{"passport":{"unfragile":{"@version":"1.0","version":"2026-05","artifact":{"id":"npm_npm-storybook-mcp-server","slug":"npm-storybook-mcp-server","name":"storybook-mcp-server","type":"mcp","url":"https://www.npmjs.com/package/storybook-mcp-server","page_url":"https://unfragile.ai/npm-storybook-mcp-server","categories":["mcp-servers"],"tags":["mcp","mcp-server","storybook","model-context-protocol","claude","claude-desktop","anthropic","puppeteer","screenshot","visual-testing","component-testing"],"pricing":{"model":"open_source","free":true,"starting_price":null},"status":"active","verified":false},"capabilities":[{"id":"npm_npm-storybook-mcp-server__cap_0","uri":"capability://memory.knowledge.component.metadata.extraction.and.indexing","name":"component-metadata-extraction-and-indexing","description":"Extracts and indexes component metadata from Storybook's internal store, including component names, descriptions, properties, and story definitions. Works by connecting to a running Storybook instance via its API or reading the Storybook configuration and story files directly, then exposing this metadata through MCP tools that AI assistants can query to understand the component library structure and available properties.","intents":["I want Claude to understand what components are available in my Storybook and their properties","I need an AI assistant to know the exact prop types and descriptions for each component","I want to query my component library programmatically to find components by name or capability"],"best_for":["design systems teams using Storybook as the single source of truth for components","AI-assisted code generation workflows that need accurate component APIs","teams building AI agents that generate component-based UIs"],"limitations":["Requires Storybook instance to be running or pre-built static metadata available","Only extracts metadata that Storybook exposes — custom component properties not documented in stories won't be indexed","No real-time sync if component definitions change — requires server restart or manual refresh"],"requires":["Storybook 6.0 or higher","Node.js 14+","Access to Storybook configuration files or running Storybook instance"],"input_types":["Storybook configuration (JSON/TypeScript)","Story files (CSF format)","Component source files"],"output_types":["structured JSON metadata","component property schemas","story definitions with arguments"],"categories":["memory-knowledge","data-processing-analysis"],"confidence":0.5,"matches":0,"success_rate":0},{"id":"npm_npm-storybook-mcp-server__cap_1","uri":"capability://data.processing.analysis.story.argument.schema.generation","name":"story-argument-schema-generation","description":"Generates JSON Schema representations of Storybook story arguments (controls) by introspecting story definitions and their argTypes metadata. Uses Storybook's controls system to build machine-readable schemas that describe valid prop combinations, default values, and constraints for each story variant, enabling AI assistants to understand how to compose valid component instances.","intents":["I want Claude to know what props each story accepts and their valid value ranges","I need an AI to generate story argument objects that match the component's control definitions","I want to validate AI-generated prop combinations against the actual story schema"],"best_for":["teams using Storybook controls for interactive component documentation","AI-assisted UI generation where prop validation is critical","design systems with complex component APIs that need precise prop documentation"],"limitations":["Only works with stories that have argTypes defined — stories without controls won't generate schemas","Custom control types may not map cleanly to JSON Schema — requires custom handlers for non-standard controls","Doesn't capture runtime validation logic or conditional prop dependencies"],"requires":["Storybook 6.0+ with controls addon enabled","Stories written in CSF (Component Story Format) 3.0+","argTypes metadata defined in story files"],"input_types":["Storybook story definitions (CSF)","argTypes metadata objects"],"output_types":["JSON Schema documents","prop validation schemas","argument type definitions"],"categories":["data-processing-analysis","memory-knowledge"],"confidence":0.5,"matches":0,"success_rate":0},{"id":"npm_npm-storybook-mcp-server__cap_2","uri":"capability://image.visual.component.screenshot.capture.and.storage","name":"component-screenshot-capture-and-storage","description":"Captures visual screenshots of Storybook stories using Puppeteer (headless browser automation) and stores them as indexed assets accessible via MCP. Renders each story in an isolated browser context, captures the rendered output at specified viewport sizes, and makes screenshots queryable by story name or component, enabling AI assistants to see what components actually look like visually.","intents":["I want Claude to see what my components look like when rendered, not just their code","I need visual references for components so AI can make informed UI generation decisions","I want to generate screenshots of all story variants automatically for visual regression testing"],"best_for":["design system teams that need AI-assisted visual component understanding","teams building AI agents that generate UI and need visual feedback loops","visual regression testing workflows integrated with AI code generation"],"limitations":["Requires headless browser environment — may not work in containerized/serverless contexts without additional configuration","Screenshot capture adds latency (typically 2-5 seconds per story) — not suitable for real-time interactions","Only captures static rendered output — doesn't capture interactive states or animations without custom viewport scripting","Storage grows linearly with number of stories and viewport variants — can consume significant disk space for large design systems"],"requires":["Puppeteer 10.0+ or compatible headless browser","Storybook instance accessible at a URL (local or remote)","Disk space for screenshot storage (typically 50KB-500KB per screenshot)","Node.js 14+"],"input_types":["Storybook story URLs","viewport dimensions (width, height)","story identifiers"],"output_types":["PNG/JPEG image files","image metadata (dimensions, capture timestamp)","screenshot index/manifest"],"categories":["image-visual","automation-workflow"],"confidence":0.5,"matches":0,"success_rate":0},{"id":"npm_npm-storybook-mcp-server__cap_3","uri":"capability://tool.use.integration.mcp.tool.exposure.for.ai.assistants","name":"mcp-tool-exposure-for-ai-assistants","description":"Exposes Storybook component data through MCP (Model Context Protocol) tools that Claude and other AI assistants can call directly. Implements MCP resource and tool handlers that wrap component metadata, story arguments, and screenshot references into callable functions with defined input/output schemas, enabling seamless integration with Claude Desktop and other MCP-compatible AI platforms.","intents":["I want Claude to be able to query my Storybook directly without me copying and pasting component info","I need Claude Desktop to have native access to my component library as MCP tools","I want to build AI agents that can autonomously explore and understand my component system"],"best_for":["teams using Claude Desktop or other MCP-compatible AI assistants","developers building AI agents that need programmatic access to component libraries","organizations standardizing on MCP for AI tool integration"],"limitations":["MCP protocol overhead adds latency to each tool call (typically 50-200ms per request)","Tool schemas must be pre-defined — dynamic or user-defined tools require server-side schema registration","Limited to MCP-compatible AI platforms — won't work with non-MCP assistants like ChatGPT or Gemini without custom adapters","No built-in authentication — requires careful deployment to prevent unauthorized component access"],"requires":["MCP server implementation (Node.js)","Claude Desktop 0.1.0+ or compatible MCP client","Network connectivity between MCP client and server"],"input_types":["MCP tool call requests with JSON arguments","component names or identifiers","query filters"],"output_types":["JSON-formatted tool responses","component metadata objects","screenshot URIs or embedded image data"],"categories":["tool-use-integration","automation-workflow"],"confidence":0.5,"matches":0,"success_rate":0},{"id":"npm_npm-storybook-mcp-server__cap_4","uri":"capability://search.retrieval.story.variant.enumeration.and.filtering","name":"story-variant-enumeration-and-filtering","description":"Enumerates all story variants within Storybook and provides filtering/search capabilities to find specific stories by component name, story name, tags, or metadata. Builds an in-memory index of all stories from the Storybook configuration and exposes query tools that allow AI assistants to discover relevant stories without needing to know the exact story identifiers upfront.","intents":["I want Claude to find all button variants without me listing them explicitly","I need to search for stories matching specific criteria (e.g., all 'disabled' states)","I want an AI agent to discover what story variants exist for a given component"],"best_for":["large design systems with hundreds of stories where manual discovery is impractical","AI-assisted workflows that need to explore component variants programmatically","teams building component search or discovery tools"],"limitations":["Index is built at server startup — new stories require server restart to be discoverable","Search is limited to metadata that Storybook exposes — custom story properties won't be searchable unless explicitly indexed","Performance degrades with very large story counts (1000+) — may need pagination or lazy loading"],"requires":["Storybook 6.0+","Story files with consistent naming conventions for effective filtering","Sufficient memory for in-memory story index"],"input_types":["search query strings","filter criteria (component name, tags, status)","pagination parameters"],"output_types":["story metadata arrays","filtered story lists","story identifiers and URLs"],"categories":["search-retrieval","data-processing-analysis"],"confidence":0.5,"matches":0,"success_rate":0},{"id":"npm_npm-storybook-mcp-server__cap_5","uri":"capability://data.processing.analysis.component.dependency.graph.analysis","name":"component-dependency-graph-analysis","description":"Analyzes component dependencies by parsing story files and component source code to build a dependency graph showing which components use other components. Exposes this graph through MCP tools, allowing AI assistants to understand component composition hierarchies and identify which components are safe to modify without breaking dependents.","intents":["I want Claude to understand which components depend on a component I'm modifying","I need to know the full composition tree for a complex component","I want an AI to identify low-level components that are safe to refactor because they have few dependents"],"best_for":["teams managing large component libraries where dependency tracking is critical","AI-assisted refactoring workflows that need impact analysis","design systems with complex component hierarchies"],"limitations":["Dependency analysis is static — doesn't capture runtime-only dependencies or dynamic imports","Requires component source files to be accessible — won't work with pre-built/compiled components","Accuracy depends on consistent import patterns — non-standard imports may be missed","Building the dependency graph adds startup latency (typically 1-5 seconds for large codebases)"],"requires":["Access to component source files (JavaScript/TypeScript)","Consistent import/export patterns in component code","AST parser (built-in or via external library)"],"input_types":["component names or file paths","dependency direction (dependents or dependencies)"],"output_types":["dependency graph JSON","component dependency lists","impact analysis reports"],"categories":["data-processing-analysis","planning-reasoning"],"confidence":0.5,"matches":0,"success_rate":0},{"id":"npm_npm-storybook-mcp-server__cap_6","uri":"capability://code.generation.editing.story.code.and.source.retrieval","name":"story-code-and-source-retrieval","description":"Retrieves and exposes the source code for stories and their underlying components through MCP tools. Allows AI assistants to read the actual implementation code for any story or component, including the story definition (CSF), component source, and any custom hooks or utilities used, enabling code-aware AI interactions.","intents":["I want Claude to see the actual code for a story to understand how it works","I need an AI to read component source code to make informed refactoring suggestions","I want to ask Claude questions about specific component implementations"],"best_for":["code-generation and refactoring workflows where AI needs to understand existing patterns","teams using AI for code review and analysis of component implementations","educational use cases where AI explains component code"],"limitations":["Requires source files to be accessible on the server — won't work with minified or compiled-only components","Large source files can exceed token limits in AI context windows — may need truncation or summarization","No syntax highlighting or formatting preservation — returns raw source code","Doesn't include comments or documentation unless explicitly in source files"],"requires":["Access to component source files (not compiled/minified)","File system access on the MCP server","Source maps or original source files for TypeScript components"],"input_types":["component names or file paths","story identifiers"],"output_types":["source code strings","code with line numbers","syntax-highlighted code blocks"],"categories":["code-generation-editing","memory-knowledge"],"confidence":0.5,"matches":0,"success_rate":0},{"id":"npm_npm-storybook-mcp-server__cap_7","uri":"capability://image.visual.multi.viewport.screenshot.generation","name":"multi-viewport-screenshot-generation","description":"Captures component screenshots across multiple viewport sizes (mobile, tablet, desktop) and device types, storing them indexed by viewport configuration. Uses Puppeteer to render stories at different screen dimensions and device emulations, enabling AI assistants to understand responsive behavior and make viewport-aware design decisions.","intents":["I want Claude to see how my components look on mobile, tablet, and desktop","I need visual references for responsive components at different breakpoints","I want to generate responsive design documentation automatically with screenshots"],"best_for":["teams building responsive design systems that need visual documentation","AI-assisted responsive UI generation workflows","design systems with mobile-first or responsive-first components"],"limitations":["Screenshot count multiplies with viewport variants — 10 stories × 3 viewports = 30 screenshots, increasing storage and capture time","Doesn't capture touch interactions or hover states specific to mobile — only visual layout","Device emulation may not perfectly match real device rendering — CSS media queries are tested but not actual device hardware","Capture time scales linearly with viewport count — 3 viewports = 3× capture time vs single viewport"],"requires":["Puppeteer 10.0+ with device emulation support","Storybook instance accessible at a URL","Disk space for multiple screenshots per story (typically 150KB-1.5MB per story across viewports)"],"input_types":["viewport configurations (width, height, device type)","story identifiers","device emulation profiles"],"output_types":["screenshot files indexed by viewport","responsive design metadata","viewport-indexed image manifests"],"categories":["image-visual","automation-workflow"],"confidence":0.5,"matches":0,"success_rate":0},{"id":"npm_npm-storybook-mcp-server__cap_8","uri":"capability://memory.knowledge.story.metadata.and.documentation.indexing","name":"story-metadata-and-documentation-indexing","description":"Indexes story-level metadata including titles, descriptions, tags, and custom documentation fields defined in story files. Builds a searchable metadata index that allows AI assistants to find stories by description, purpose, or custom tags, and to understand the intended use case for each story variant.","intents":["I want Claude to find stories by their purpose or use case, not just by name","I need to tag stories with custom metadata that AI can use for discovery","I want story descriptions to be searchable and queryable by AI"],"best_for":["design systems with well-documented stories and consistent metadata practices","teams using story tags for organization and discovery","AI-assisted workflows that need semantic understanding of story purpose"],"limitations":["Requires consistent metadata practices across stories — inconsistent tagging reduces search effectiveness","Custom metadata fields must be explicitly defined in story files — no automatic extraction from comments","Search is literal/keyword-based — doesn't understand semantic meaning of descriptions","Metadata changes require server restart to be indexed (unless hot-reload is implemented)"],"requires":["Storybook 6.0+ with story metadata support","Consistent story documentation practices","Story files with title, description, and tags defined"],"input_types":["story metadata queries","tag filters","description search terms"],"output_types":["story metadata objects","tagged story lists","metadata search results"],"categories":["memory-knowledge","search-retrieval"],"confidence":0.5,"matches":0,"success_rate":0},{"id":"npm_npm-storybook-mcp-server__cap_9","uri":"capability://data.processing.analysis.component.property.type.inference","name":"component-property-type-inference","description":"Infers and exposes component property types by analyzing TypeScript/JSDoc definitions, Storybook argTypes, and story usage patterns. Builds a type system representation that AI assistants can query to understand valid prop types, optional vs required props, and prop constraints without needing to parse TypeScript directly.","intents":["I want Claude to know the exact types for all component props","I need an AI to understand which props are required vs optional","I want to validate AI-generated prop combinations against the component's type system"],"best_for":["TypeScript-based design systems where type safety is critical","AI-assisted code generation that needs to respect component type contracts","teams building type-aware component composition tools"],"limitations":["Type inference is best-effort — complex types (unions, generics, conditional types) may not be fully captured","Requires TypeScript source files or JSDoc annotations — JavaScript-only components won't have type information","Doesn't capture runtime validation or custom prop validators — only static type information","Generic components with type parameters may be difficult to represent in a queryable format"],"requires":["TypeScript source files or JSDoc annotations in component code","TypeScript compiler or type parser (built-in or via external library)","Storybook argTypes for prop documentation"],"input_types":["component names","prop names"],"output_types":["type definitions (JSON representation)","prop type schemas","required/optional prop lists"],"categories":["data-processing-analysis","code-generation-editing"],"confidence":0.5,"matches":0,"success_rate":0}],"trust":{"score":33,"verified":false,"data_access_risk":"high","permissions":["Storybook 6.0 or higher","Node.js 14+","Access to Storybook configuration files or running Storybook instance","Storybook 6.0+ with controls addon enabled","Stories written in CSF (Component Story Format) 3.0+","argTypes metadata defined in story files","Puppeteer 10.0+ or compatible headless browser","Storybook instance accessible at a URL (local or remote)","Disk space for screenshot storage (typically 50KB-500KB per screenshot)","MCP server implementation (Node.js)"],"failure_modes":["Requires Storybook instance to be running or pre-built static metadata available","Only extracts metadata that Storybook exposes — custom component properties not documented in stories won't be indexed","No real-time sync if component definitions change — requires server restart or manual refresh","Only works with stories that have argTypes defined — stories without controls won't generate schemas","Custom control types may not map cleanly to JSON Schema — requires custom handlers for non-standard controls","Doesn't capture runtime validation logic or conditional prop dependencies","Requires headless browser environment — may not work in containerized/serverless contexts without additional configuration","Screenshot capture adds latency (typically 2-5 seconds per story) — not suitable for real-time interactions","Only captures static rendered output — doesn't capture interactive states or animations without custom viewport scripting","Storage grows linearly with number of stories and viewport variants — can consume significant disk space for large design systems","builder identity is not verified yet","no observed match outcomes yet"],"rank_breakdown":{"adoption":0.05,"quality":0.45,"ecosystem":0.5000000000000001,"match_graph":0.25,"freshness":0.6,"weights":{"adoption":0.25,"quality":0.25,"ecosystem":0.15,"match_graph":0.23,"freshness":0.12}},"observed_outcomes":{"matches":0,"success_rate":0,"avg_confidence":0,"top_intents":[],"last_matched_at":null},"maintenance":{"status":"active","updated_at":"2026-05-24T12:16:24.482Z","last_scraped_at":"2026-05-03T14:23:37.822Z","last_commit":null},"community":{"stars":null,"forks":null,"weekly_downloads":null,"model_downloads":null,"model_likes":null}},"distribution":{"claim_url":"https://unfragile.ai/submit?claim=npm-storybook-mcp-server","compare_url":"https://unfragile.ai/compare?artifact=npm-storybook-mcp-server"}},"signature":"ju0DCKsZEjLdDVjtyYKnQb5T2jQGzDK3yIBC1JzYIUNmj5vvkfvm2eQvupP7MwAT2lyAoS7p/gxE7GXBoWpPCg==","signedAt":"2026-06-21T02:32:59.160Z","signedBy":"unfragile.ai","version":1},"_links":{"self":"https://unfragile.ai/api/v1/passport/npm-storybook-mcp-server","artifact":"https://unfragile.ai/npm-storybook-mcp-server","verify":"https://unfragile.ai/api/v1/verify?slug=npm-storybook-mcp-server","publicKey":"https://unfragile.ai/api/v1/trust-passport-public-key","spec":"https://unfragile.ai/trust","schema":"https://unfragile.ai/schema.json","docs":"https://unfragile.ai/docs"}}