Simplified MCP server for Storybook design system extraction with component analysis tools
Simplified MCP server for Storybook design system extraction with component analysis tools. The mcp design system extractor mcp server wraps that behind the Model Context Protocol, so an assistant can use it through 6 defined tools rather than through you.
A Model Context Protocol (MCP) server that extracts component information from Storybook design systems. Connects to Storybook instances and extracts HTML, styles, and component metadata.
Everything the assistant can do here goes through one of these:
query — Search term (use "*" for all)purpose — Find by function ("form inputs", "navigation", "feedback", "buttons", etc.)searchIn — "name", "title", "category", or "all" (default)DEFAULT — Returns only design tokens + file stats (avoids token limits)Security-protected — only accepts URLs from same domain as StorybookReturns — status, result (when completed), error (when failed)You will need 2 environment variables: STORYBOOK_URL, NODE_TLS_REJECT_UNAUTHORIZED. The server will not start without them, which is usually why the tools fail to appear on a first run. Keep credentials in your client's env block or a secrets manager rather than in a file you might commit.
The server ships on npm as mcp-design-system-extractor, so your MCP client can launch it on demand — there is no separate build step. Add the server block to your client's configuration, restart it, and the tools register themselves.
Among the developer tooling options, the useful question is rarely "what can it do" but "what does it cost you to run" — permissions, credentials, and how much of your context its toolset consumes. MCP Design System Extractor's toolset — query, purpose, searchIn and 3 more — is a fair guide to whether it matches your workflow. It is maintained by freema; worth a glance at recent repository activity before you build anything load-bearing on it.
This entry was verified against MCP Design System Extractor's own documentation before publication; SyncDev keeps the directory reviewed rather than auto-generated.
| Tool | What it does |
|---|---|
| query | Search term (use "*" for all) |
| purpose | Find by function ("form inputs", "navigation", "feedback", "buttons", etc.) |
| searchIn | "name", "title", "category", or "all" (default) |
| DEFAULT | Returns only design tokens + file stats (avoids token limits) |
| Security-protected | only accepts URLs from same domain as Storybook |
| Returns | status, result (when completed), error (when failed) |
{
"mcpServers": {
"design-system-extractor": {
"command": "npx",
"args": ["-y", "mcp-design-system-extractor"],
"env": {
"STORYBOOK_URL": "your-value",
"NODE_TLS_REJECT_UNAUTHORIZED": "your-value"
}
}
}
}Add to claude_desktop_config.json, then restart Claude Desktop.
| Variable | Description | Required |
|---|---|---|
| STORYBOOK_URL | Endpoint or connection string the server talks to. | Yes |
| NODE_TLS_REJECT_UNAUTHORIZED | Configuration value read at startup. | Optional |
Kill hallucinated APIs — version-accurate, up-to-date library documentation injected straight into context.
Microsoft's official browser automation server — drive a real browser through the accessibility tree, no screenshots needed.
GitHub's official server — repos, issues, pull requests, Actions and code security, straight from your assistant.
Issue tracking at the speed of conversation — Linear's official hosted server with OAuth and zero install.
Local repository surgery — status, diffs, commits, branches and history for any repo on disk.
Timezone sanity for AI — current time anywhere and correct conversions, without the model doing date math.