> **Version 10.3** — **React** / **TypeScript**
> Also available:
- `?codeOnly=true` for code snippets only
- other versions: Version 9 (`/docs/9/ai/mcp/sharing.md`), Version 8 (`/docs/8/ai/mcp/sharing.md`)

# Sharing your MCP server

While they are in [preview](../../releases/features.mdx#preview), Storybook's AI capabilities (specifically, the [manifests](../manifests.mdx) and [MCP server](./overview.mdx)) are currently only supported for [React](?renderer=react) projects.

  Additionally, the API may change in future releases. We welcome feedback and contributions to help improve this feature.

Just as [publishing your Storybook](../../sharing/publish-storybook.mdx) 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](./overview.mdx#development), [docs](./overview.mdx#docs), and [testing](./overview.mdx#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](../manifests.mdx) 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](../../sharing/publish-storybook.mdx#publish-storybook-with-chromatic), which will [automatically publish your MCP server](https://chromatic.com/docs/mcp/) 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](https://chromatic.com/docs/mcp/#grab-your-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](https://github.com/paoloricciuti/tmcp/) MCP server exposing Storybook component/docs knowledge from [manifests](../manifests.mdx).

### Prerequisites

- Node.js 20+
- A [manifest](../manifests.mdx) source containing:
  - `components.json` (required)
  - `docs.json` (optional)

### API

The full API for `@storybook/mcp` is documented in the [package's repository](https://github.com/storybookjs/mcp/tree/main/packages/mcp).

### Example implementation

You can reference [self-hosting patterns](https://github.com/storybookjs/mcp/tree/main/apps/self-host-mcp) for both a Node.js process and a Netlify Function.

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

```ts title="server.ts"

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](./overview.mdx)
- [MCP server API](./api.mdx)
- [Best practices for using Storybook with AI](../best-practices.mdx)
- [Manifests](../manifests.mdx)