@staffbase/design-mcp 19.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +75 -0
- package/dist/data/components.json +1118 -0
- package/dist/data/docs.json +226 -0
- package/dist/data/icons.json +2344 -0
- package/dist/data/meta.json +4 -0
- package/dist/data/package_instructions.md +187 -0
- package/dist/data/tokens.json +4449 -0
- package/dist/server.d.ts +6 -0
- package/dist/server.js +451 -0
- package/dist/server.js.map +1 -0
- package/package.json +48 -0
package/README.md
ADDED
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
# @staffbase/design-mcp
|
|
2
|
+
|
|
3
|
+
Model Context Protocol server for the [Staffbase Design System](https://design.staffbase.rocks). Exposes components, props, tokens, icons, and the published docs as tools your AI coding agent can call.
|
|
4
|
+
|
|
5
|
+
It's a thin wrapper around the same data shipped in [`@staffbase/design`](../design) and the [Astro docs site](../../apps/astro) — no remote calls, no telemetry. Snapshots are baked at publish time, so the server runs offline once installed.
|
|
6
|
+
|
|
7
|
+
## Install
|
|
8
|
+
|
|
9
|
+
The package is published publicly to npm — no registry config or token required. Point your agent at it via `npx`:
|
|
10
|
+
|
|
11
|
+
### Claude Code
|
|
12
|
+
|
|
13
|
+
```jsonc
|
|
14
|
+
// ~/.claude.json or .mcp.json
|
|
15
|
+
{
|
|
16
|
+
"mcpServers": {
|
|
17
|
+
"staffbase-design": {
|
|
18
|
+
"command": "npx",
|
|
19
|
+
"args": ["-y", "@staffbase/design-mcp@latest"],
|
|
20
|
+
},
|
|
21
|
+
},
|
|
22
|
+
}
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
### Cursor
|
|
26
|
+
|
|
27
|
+
```jsonc
|
|
28
|
+
// .cursor/mcp.json
|
|
29
|
+
{
|
|
30
|
+
"mcpServers": {
|
|
31
|
+
"staffbase-design": {
|
|
32
|
+
"command": "npx",
|
|
33
|
+
"args": ["-y", "@staffbase/design-mcp@latest"],
|
|
34
|
+
},
|
|
35
|
+
},
|
|
36
|
+
}
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
### Windsurf / Codex / Continue
|
|
40
|
+
|
|
41
|
+
Same shape — point at `npx -y @staffbase/design-mcp@latest`.
|
|
42
|
+
|
|
43
|
+
### Internal Staffbase consumers
|
|
44
|
+
|
|
45
|
+
The same package is also mirrored to the private `@staffbase` GitHub Packages registry. If your environment resolves the `@staffbase` scope from there, no change is needed — the `npx` command above works unmodified once your `.npmrc` points the scope at `https://npm.pkg.github.com/` with a `GITHUB_TOKEN`.
|
|
46
|
+
|
|
47
|
+
## Tools
|
|
48
|
+
|
|
49
|
+
| Tool | Purpose |
|
|
50
|
+
| ----------------------- | --------------------------------------------------------------------------------------- |
|
|
51
|
+
| `list_components` | Names, categories, deprecation flags, compound subcomponents |
|
|
52
|
+
| `get_component` | Props interface, anatomy, available variants, Figma URL, deprecation map |
|
|
53
|
+
| `get_component_example` | One example code block (default or named variant) |
|
|
54
|
+
| `list_tokens` | Filtered by layer (primitive/semantic/component) and/or category |
|
|
55
|
+
| `get_token` | One token plus its resolution chain |
|
|
56
|
+
| `list_icons` | Filter by search term (matches name + tags) |
|
|
57
|
+
| `get_icon` | One icon's React component name + tags |
|
|
58
|
+
| `get_doc_page` | A rendered Astro docs page (`components/button`, `foundation/tokens/colors`, …) |
|
|
59
|
+
| `get_guide` | The full AI-agent guide (deprecation map, anatomy patterns, Pattern A vs B form errors) |
|
|
60
|
+
| `search_design_system` | Fuzzy search across components, tokens, icons, and doc body text |
|
|
61
|
+
|
|
62
|
+
Doc pages and the guide are also exposed as MCP resources (`staffbase-design://guide`, `staffbase-design://docs/{slug}`) for clients that surface resources first-class.
|
|
63
|
+
|
|
64
|
+
## Local development
|
|
65
|
+
|
|
66
|
+
```bash
|
|
67
|
+
pnpm --filter @staffbase/design-mcp build:data # regenerate JSON snapshots
|
|
68
|
+
pnpm --filter @staffbase/design-mcp dev # run the stdio server against the local repo
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
Point your agent at the local build by replacing the `npx` command with `node /absolute/path/to/packages/design-mcp/dist/server.js`.
|
|
72
|
+
|
|
73
|
+
## Versioning
|
|
74
|
+
|
|
75
|
+
`@staffbase/design-mcp` shares a version line with `@staffbase/design` (Changesets `fixed`). Every design-system release ships a matching MCP build with refreshed snapshots, so you can rely on the version of the MCP you have installed matching the design system your codebase consumes.
|