Published Storybook MCP servers
Give your entire organization access to a shared MCP instance to improve generated code quality. Chromatic manages publishing, auth, and versioning.
Without proper context, agents produce un-mergeable code with render errors, visual bugs, and hallucinated APIs. Storybook MCP server improves code quality by equipping coding agents with better context and allowing them to self-correct using Storybook's testing tools.
Chromatic now lets you publish your Storybook MCP servers, so your team’s coding agents can access it as a shared resource.
What is Storybook MCP?
Ask an LLM to build a landing page and you'll get the same uninspiring output: Inter font, purple gradients, and minimal animations. That's because models predict from patterns in their training data. Without proper direction, they sample from the high-probability center, leading to "safe choices" that lack personality.
Storybook MCP gives agents better context about your components: APIs, stories, usage patterns, and tests. With that context, agents generate code that actually fits your system.
It also plugs agents into Storybook's testing tools so they can work iteratively and self-correct, running tests against generated components and acting on feedback from render errors, test failures, and accessibility violations.
Storybook MCP is now available for React projects. For the full details, check out the Storybook MCP announcement →
Publish an MCP server to share context with teams
When you publish an MCP server, you allow other teams to query it for context. For example, it’s useful for multiple product teams that consume a shared design system.
Easy setup
When you publish an MCP-enabled Storybook to Chromatic, it automatically deploys the MCP server at the /mcp endpoint.
// .mcp.json
{
"mcpServers": {
"storybook-mcp": {
"type": "http",
"url": "https://main--<appid>.chromatic.com"
}
}
}
Built-in authentication
When enabling the MCP server, your team can authenticate using their existing Chromatic accounts.
Chromatic mirrors the permissions configured in your GitHub Organization, Bitbucket Group, or GitLab Team. Additionally, Chromatic offers SSO support on Enterprise plans. For more, check out our getting started guide.
Permalinks for version and branch-specific servers
Chromatic publishes an MCP server for every deployment of your Storybook. This is especially useful if your project supports multiple versions (design systems) or there are long-lived branches (research spikes).
Compose multiple MCP servers together
Product teams often maintain their own components while using multiple design systems and component libraries. Configuring multiple MCP servers and trusting agents to select the right one is unpredictable.
With Storybook composition, you can merge a local Storybook MCP with various remotely published MCPs. This enables your agent to find and reference components from all composed Storybooks when generating UI.
Get started
Storybook MCP gives agents the context they need to work autonomously. Chromatic automatically publishes Storybook MCP to make it accessible to your entire organization.