@agentero/design-system 0.0.1 → 0.0.3
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 +57 -0
- package/mcp/manifests/components.html +838 -0
- package/mcp/manifests/components.json +1 -0
- package/mcp/server.mjs +6547 -0
- package/package.json +5 -1
package/README.md
CHANGED
|
@@ -48,6 +48,63 @@ import { cn } from '@agentero/design-system/lib';
|
|
|
48
48
|
cn('px-4 py-2', isActive && 'bg-blue-500', className);
|
|
49
49
|
```
|
|
50
50
|
|
|
51
|
+
## AI integration (MCP)
|
|
52
|
+
|
|
53
|
+
This package ships a [Model Context Protocol](https://modelcontextprotocol.io/) server that gives AI coding assistants access to component documentation, props, and usage examples — no Storybook runtime needed.
|
|
54
|
+
|
|
55
|
+
Add to your project's `.claude/mcp.json`:
|
|
56
|
+
|
|
57
|
+
```json
|
|
58
|
+
{
|
|
59
|
+
"mcpServers": {
|
|
60
|
+
"design-system": {
|
|
61
|
+
"command": "node",
|
|
62
|
+
"args": ["./node_modules/@agentero/design-system/mcp/server.mjs"]
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
Or run it directly:
|
|
69
|
+
|
|
70
|
+
```bash
|
|
71
|
+
npx @agentero/design-system-mcp
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
The server exposes three tools:
|
|
75
|
+
|
|
76
|
+
- **list-all-documentation** — discover all available components and docs
|
|
77
|
+
- **get-documentation** — get full docs, props, and usage examples for a component
|
|
78
|
+
- **get-documentation-for-story** — get details for a specific story variant
|
|
79
|
+
|
|
80
|
+
## Local development
|
|
81
|
+
|
|
82
|
+
To develop the design system alongside a consumer app without a build process, link the package locally:
|
|
83
|
+
|
|
84
|
+
```bash
|
|
85
|
+
# In the design system directory
|
|
86
|
+
yarn link
|
|
87
|
+
|
|
88
|
+
# In the consumer app directory
|
|
89
|
+
yarn link @agentero/design-system
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
The root `package.json` exports point directly to TypeScript source files, so the consumer's bundler (Vite, Next.js, etc.) picks up changes instantly via HMR — no build step or watcher needed.
|
|
93
|
+
|
|
94
|
+
If using Next.js, add the package to `transpilePackages` in `next.config.ts`:
|
|
95
|
+
|
|
96
|
+
```ts
|
|
97
|
+
transpilePackages: ['@agentero/design-system'],
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
### Unlinking
|
|
101
|
+
|
|
102
|
+
```bash
|
|
103
|
+
# In the consumer app directory
|
|
104
|
+
yarn unlink @agentero/design-system
|
|
105
|
+
yarn install --force
|
|
106
|
+
```
|
|
107
|
+
|
|
51
108
|
## License
|
|
52
109
|
|
|
53
110
|
[Apache-2.0](./LICENSE)
|