C — Moderate risk signals Graded October 16, 2026Several concerns worth a closer look before you install.Based on public adoption and transparency signals as of October 16, 2026. Our opinion, not a code audit or security guarantee.
App connector · Files & documents, Cloud & infrastructure
@storybook/mcp
MCP server that serves knowledge about your components based on your Storybook stories and documentation
Bottom line: Signal-based grade (3/7 points): heavily downloaded, public source code. This reflects adoption and transparency, not a code audit.
- Popularity score
- 47/100
- Rank
- Not ranked: outside the 500 most popular tools
- Weekly downloads
- 2.3M
What it does
@storybook/mcp is an MCP server that connects AI agents to your Storybook component library, allowing them to query component documentation, stories, and metadata. It enables LLMs to understand and reason about your UI components in real time without copying component code into prompts.
Who it’s for
Frontend teams and developers using Storybook who want AI agents (Claude, etc.) to have live access to component APIs and usage examples. Product builders integrating component knowledge into AI-powered workflows or code generation tools.
Copy-paste setup
Check these steps against the project’s own instructions before running anything.
Install via npm and configure in Claude Desktop:
npm install @storybook/mcp
Add to Claude Desktop claude_desktop_config.json (verify exact config format against the repo README):
{
"mcpServers": {
"storybook": {
"command": "npx",
"args": ["@storybook/mcp"]
}
}
}
Ensure your Storybook instance is running locally or accessible at the configured endpoint.
Risks
- Prompt injection: Component stories or documentation could contain malicious text designed to manipulate agent behavior if source is user-controlled.
- Data exposure: Storybook instance must be network-accessible to the agent; internal component documentation may leak proprietary design patterns or business logic.
- Supply chain: Dependency on @storybook packages; compromised transitive dependencies could alter component metadata served to agents.
- Credentials in stories: Developers may accidentally commit API keys or secrets in example code within stories, which would be exposed to the agent.
- Scope creep: Agent access to full component library could enable unintended code generation or architectural decisions without oversight.
How to stay secure
Least-privilege permissions
- Restrict agent to read-only access; disable any write or deployment capabilities on the Storybook instance
- Configure MCP server with allowlist of specific components/stories the agent can access, not the entire library
- Use environment-based filtering to serve only non-sensitive documentation (strip stories containing
secret,api_key,tokenpatterns) - Implement per-user/per-agent access controls with separate service accounts; audit which components each agent queries
Network isolation
- Serve Storybook MCP over VPN/private network or require mTLS authentication; avoid public internet exposure
- Place MCP connector behind a reverse proxy with rate limiting and IP allowlisting
- Use a dedicated, hardened runner or container for the agent—isolate from production systems and other untrusted workloads
- Disable direct filesystem access; MCP should only communicate via well-defined API endpoints
Monitoring
- Log all MCP requests (component queries, story metadata fetches) with timestamps and agent identity; alert on unusual access patterns
- Track dependency versions of @storybook/* packages; enable automated alerts for security patches and suspicious version changes
- Monitor for repeated queries on sensitive components or attempts to enumerate the full component catalog
- Detect and flag stories containing credentials using secret-scanning tools in the build pipeline before they reach the Storybook instance
Red flags to watch for
- Agent generating code that accesses internal APIs, databases, or business logic exposed in component documentation
- Stories or documentation being modified unexpectedly or containing injection-like syntax (
{{}}, template expressions, shell commands) - MCP connector requesting components outside the approved allowlist or attempting to access metadata API endpoints not explicitly permitted
- Sudden spikes in agent queries or requests for all components in rapid succession—potential reconnaissance for vulnerability exploitation
Alternatives
- Claude's native file upload – manually provide component documentation and stories via PDFs or markdown; lower automation but tighter control.
- Custom REST API wrapper – build your own MCP server that exposes only sanitized, approved component metadata.
- Chromatic or design system APIs – integrated tooling from design platforms (Figma, Zeroheight) that serve component specs to agents.
- LangChain Document Loaders – load Storybook JSON output into a vector DB and query via retrieval-augmented generation (RAG).