{"_id":"@aprila/design-system-mcp","name":"@aprila/design-system-mcp","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@aprila/design-system-mcp","version":"0.0.1","private":false,"description":"MCP server for the Aprila design system. Serves component docs, design tokens, and the compiled stylesheet from the deployed Storybook, so agents can build UI with Aprila components — or self-contained prototypes with no install.","license":"UNLICENSED","type":"module","bin":{"aprila-design-system-mcp":"dist/index.js"},"scripts":{"build":"tsc","typecheck":"tsc --noEmit","prepack":"npm run build"},"engines":{"node":">=20"},"dependencies":{"@modelcontextprotocol/sdk":"^1.21.0","zod":"^4.4.3"},"devDependencies":{"@types/node":"^22.19.11","typescript":"^5.9.3"},"gitHead":"38f5a80d3477b5cf54c517efa42251a38047dfa0","_id":"@aprila/design-system-mcp@0.0.1","_nodeVersion":"24.14.1","_npmVersion":"11.11.0","dist":{"integrity":"sha512-4bsC+WY48mIN+pk15ltDvxAvYN7yrnBTPkMLLwiF9+JyIDXCH4mqRz7ag5dYGz3VjRScb13dvNLFwoa8W3I52w==","shasum":"803bc99df82f501b2be15f417076c0c97b77d9b8","tarball":"https://registry.npmjs.org/@aprila/design-system-mcp/-/design-system-mcp-0.0.1.tgz","fileCount":4,"unpackedSize":13738,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCumnVYTgVdeXlEt34KkBs4GOnGUu8lc8RIICls6dG7RQIgFp8bzmbHsttRgoRnWRbWLP/CjhZOO4+8xst9VDeqSgE="}]},"_npmUser":{"name":"leifriksheim","email":"riksheim.leif@gmail.com"},"directories":{},"maintainers":[{"name":"leifriksheim","email":"riksheim.leif@gmail.com"},{"name":"sabniew","email":"ext_sabina.niewiadomska@aprila.no"},{"name":"jeanetteaune","email":"jeanette.aune@aprila.no"},{"name":"webhode","email":"sjur@aprila.no"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/design-system-mcp_0.0.1_1784296642667_0.0727207534140788"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-17T13:57:22.509Z","0.0.1":"2026-07-17T13:57:22.797Z","modified":"2026-07-17T13:57:23.041Z"},"maintainers":[{"name":"leifriksheim","email":"riksheim.leif@gmail.com"},{"name":"sabniew","email":"ext_sabina.niewiadomska@aprila.no"},{"name":"jeanetteaune","email":"jeanette.aune@aprila.no"},{"name":"webhode","email":"sjur@aprila.no"}],"description":"MCP server for the Aprila design system. Serves component docs, design tokens, and the compiled stylesheet from the deployed Storybook, so agents can build UI with Aprila components — or self-contained prototypes with no install.","license":"UNLICENSED","readme":"# @aprila/design-system-mcp\n\nAn MCP server that teaches AI agents the Aprila design system. It reads the\n[component manifests](https://storybook.js.org/docs/ai/manifests) and the\ncompiled stylesheet from the **deployed Storybook**, so it needs no local\ncheckout of this repo — anyone can run it with `npx` and point their agent at\nthe live design system.\n\n## What it serves\n\n| Tool              | What you get                                                                  |\n| ----------------- | ----------------------------------------------------------------------------- |\n| `list_components` | Every component, grouped by section                                           |\n| `get_component`   | Props (types, defaults, allowed values), story snippets, import statement     |\n| `list_docs`       | The design-token guideline docs (colors, spacing, typography, radius, …)      |\n| `get_doc`         | One guideline doc in full                                                     |\n| `get_stylesheet`  | The complete compiled `@aprila/ui-core` CSS, ready to inline into a prototype |\n\nTwo consumption modes, both explained to the agent by the tools themselves:\n\n- **In a codebase** with `@aprila/ui-react` installed: use the imports and\n  React examples.\n- **Standalone prototypes** (plain HTML, claude.ai artifacts, Blazor, …): inline\n  the stylesheet and write markup with each component's root class and\n  `data-*` attributes — no build, no install.\n\n## Setup\n\nThe server reads the deployed Storybook origin from `APRILA_STORYBOOK_URL`.\n\n**Claude Desktop** — Settings → Developer → Edit Config, add:\n\n```json\n{\n  \"mcpServers\": {\n    \"aprila-design-system\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"@aprila/design-system-mcp\"],\n      \"env\": { \"APRILA_STORYBOOK_URL\": \"https://<storybook-host>\" }\n    }\n  }\n}\n```\n\n**Claude Code**:\n\n```sh\nclaude mcp add aprila-design-system -e APRILA_STORYBOOK_URL=https://<storybook-host> -- npx -y @aprila/design-system-mcp\n```\n\nAny other MCP client with stdio support works the same way.\n\n## Development\n\n```sh\nnpm -w @aprila/design-system-mcp run build   # tsc → dist/\nnpx http-server apps/storybook/storybook-static -p 8787   # serve a local build\nAPRILA_STORYBOOK_URL=http://127.0.0.1:8787 node packages/design-system-mcp/dist/index.js\n```\n\nThe manifests come from `@storybook/addon-mcp` during `npm run build-storybook`;\nthe flat stylesheet from `apps/storybook/scripts/bundle-css.mjs` in the same\nbuild.\n\n## Publishing\n\nNot yet published. `npm publish` from this directory once the org scope is set\nup (`prepack` builds automatically). Devs working in _this_ repo don't need it —\nthe Storybook dev server exposes the richer official MCP at\n`http://localhost:6006/mcp` (docs + dev + test toolsets).\n","readmeFilename":"README.md","_rev":"1-9f2875ef45b29175e0856d343c2afe79"}