[RFC] Add support for a Model Context Protocol (MCP) server integration

[jfrazier08]

Summary

Proposal: Add support for a Model Context Protocol (MCP) server integration in Storybook. This would enable Storybook to expose structured, machine-readable context from stories and documentation, allowing AI systems and developer tools to generate UI code and designs more effectively.

Problem Statement

• Our team is building a prompt-based workflow that allows users to generate UI designs and code using context from design and development tools.
• Figma supports this via an MCP server, which provides structured design context to AI models.
• Storybook currently lacks an MCP server integration, making it difficult to extract structured context—especially from canvas-rendered stories.
• We attempted to rewrite Storybook docs to be compatible with our Backstage MCP server, but canvas content requires a full rewrite, which is not scalable.

Non-goals

• This proposal does not aim to change how Storybook renders or structures stories.
• We are not proposing changes to Storybook’s UI or documentation format.
• We are not requesting a Backstage-specific integration—this should be a general-purpose MCP server for Storybook.

Implementation

We propose the development of a native MCP server integration for Storybook that exposes structured context from stories and documentation. This would include:

• Story metadata (e.g., title, component, args, parameters)
• Documentation content (MDX or auto-generated)
• Component source code and controls

This MCP server would expose a REST or GraphQL API that conforms to the Model Context Protocol specification, enabling AI systems to query and consume Storybook content as structured context for generation tasks.

High-Level Architecture
Introduce a new @storybook/mcp-server package.
This package runs alongside Storybook and exposes an MCP-compliant API endpoint (e.g., /mcp) that returns structured story data.
The server would hook into Storybook’s internal APIs to extract:

• Story metadata
• Docs content (parsed MDX or auto-generated)
• Source code and controls

Prior Art

• Figma’s MCP server provides structured design context for AI workflows.
• Backstage’s TechDocs and catalog plugins expose structured metadata for developer portals.
• Tools like Ladle and Chromatic have explored structured story metadata for automation and testing.

Deliverables

1. Create @storybook/mcp-server package.
2. Implement MCP-compliant API to expose story metadata and docs.
3. Add configuration options for customizing exposed data.
4. Provide documentation and integration examples for AI and developer tools.

Risks

1. Exposing internal story data may introduce security or privacy concerns if not properly scoped.
2. Maintaining compatibility with evolving Storybook internals could increase maintenance burden.

Mitigations:

1. Allow opt-in configuration for exposed data.
2. Use existing Storybook APIs where possible to reduce coupling.

Unresolved Questions

• Using a to do list makes it easy to resolve the questions as we move the RFC along.

• Should the MCP server be a standalone service or a plugin within the Storybook runtime?

• What authentication or access control mechanisms should be supported?

Alternatives considered / Abandoned Ideas

1. Rewriting Storybook docs for Backstage MCP: Too labor-intensive and not scalable.
2. Scraping Storybook output: Fragile and lacks structured data.
3. Embedding Storybook in Backstage: Doesn’t solve the need for structured, queryable context.

[domyen]

Interesting! Thanks for writing this all down.

btw What is Backstage and how is it relevant to Storybook?

[jfrazier08]

Backstage.io is an open source platform for building developer portals (https://backstage.io/). We attempted to extract our Storybook docs to expose them through the portal so our MCP server integration could find context around our design system, however that path wasn't viable due to the fact that we would need to rewrite our entire Storybook site to match the docs format Backstage expects.

[zol]

Thanks for submitting @jfrazier08 , I'd be stoked to help enable agentic workflows with an MCP server. The requirements are shaping up but there are still lots of unknowns. For instance, you mention exposing source code from the MCP server. Do you envisage the MCP client does not already have access to the component and story source code?

It would be helpful if you could share some prompts along with the agent behavior that you'd like to see enabled by a Storybook MCP server!

[dannyhw]

I think it would be cool if the storybook dev server basically had some remote mcp endpoints and had stuff like

• get the preview canvas output (html and all)
• get status of a story, and any errors etc
• navigate to story
• get story list
• screenshot story

I started doing some simpler stuff in my own mcp server but tighter integration is needed to do some of the more useful stuff
https://github.com/dannyhw/mcp-storybook

however the playwright mcp together with a simple mcp like this can already navigate storybook pretty well, take screenshots and check console output etc

[JReinhold]

For anyone landing here, we're starting a research project about using agents with Storybook and/or design systems: #32276

Feel free to leave thoughts, feedback or input in there if you want to.