Sharing your MCP server

Just as publishing your Storybook can help your team work more effectively, sharing your MCP server can enable your team to share the benefits of AI-assisted development.

The MCP server is made of development, docs, and testing toolsets that an agent can call to interact with your Storybook. The development and testing toolsets are only relevant to the locally-running Storybook instance, but the docs toolset can be published and shared so that agents outside of your local environment can access the knowledge from your Storybook's manifest to reference your components and documentation when generating UI.

There are two different ways you can share your MCP server.

Automatic publishing with Chromatic

The easiest way to share your MCP server is to publish your Storybook with Chromatic, which will automatically publish your MCP server as well. If your Storybook is private, your MCP server will be private as well, and only accessible to those you invite to your Chromatic project. If your Storybook is public, your MCP server will be public as well, and accessible to anyone with the URL.

Once published, you can share the MCP server URL with your team or community, and they can configure their agent to use that URL to access it.

By publishing with Chromatic, you can be sure that your MCP server is always up-to-date with your latest Storybook, it's safeguarded by UI tests, and you don't have to worry about hosting or maintaining it yourself.

Self-hosting with @storybook/mcp

If you prefer full control over your MCP server, you can self-host it. This approach allows you to manage the server's infrastructure, security, and updates according to your team's requirements. You will need to ensure your MCP server is accessible to your team or community and properly maintained.

We provide a package, @storybook/mcp, which is a library that creates a tmcp-based MCP server exposing Storybook component/docs knowledge from manifests.

Prerequisites

• Node.js 20+
• A manifest source containing:
  • components.json (required)
  • docs.json (optional)

API

The full API for @storybook/mcp is documented in the package's repository.

Example implementation

You can reference self-hosting patterns for both a Node.js process and a Netlify Function.

This is the minimal implementation of a server using @storybook/mcp:

import { createStorybookMcpHandler } from '@storybook/mcp';
 
const storybookMcpHandler = await createStorybookMcpHandler();
 
export async function handleRequest(request: Request): Promise<Response> {
	if (new URL(request.url).pathname === '/mcp') {
		return storybookMcpHandler(request);
	}
 
	return new Response('Not found', { status: 404 });
}

More AI resources

• MCP server overview
• MCP server API
• Best practices for using Storybook with AI
• Manifests