What I did

Added MCP (Model Context Protocol) server support to @storybook/react-native, enabling AI agents like Claude Code and Cursor to query component documentation, props, and story snippets directly from your running React Native Storybook.

Why

The @storybook/mcp package already provides this capability for web Storybook. This brings the same functionality to React Native by reusing the existing @storybook/mcp tools and @storybook/react's experimental_manifests to generate the component manifest — no custom manifest generation needed.

How it works

1. buildIndex (already used for story generation) produces a StoryIndex from story files on disk
2. experimental_manifests from @storybook/react/preset transforms those index entries into the component manifest format that @storybook/mcp expects (including react-docgen prop extraction, code snippets, etc.)
3. The standard @storybook/mcp tools (list-all-documentation, get-documentation, get-documentation-for-story) are registered on the MCP server
4. A custom select-story tool broadcasts story selection to connected devices via WebSocket
5. A get-storybook-story-instructions tool provides React Native-specific guidance for writing stories

Changes

New files:

• mcpServer.ts — MCP server setup: lazy-initializes tmcp server, registers tools, converts between Node.js HTTP and Web Request/Response APIs
• manifest/storyInstructions.ts — React Native-specific story writing instructions

Modified files:

• channelServer.ts — Added POST/GET /mcp endpoint routing
• withStorybook.ts (Metro) — Added mcp?: boolean option
• repack/withStorybook.ts — Added mcp?: boolean option for consistency
• package.json — Added dependencies: @storybook/mcp, @storybook/react, tmcp, @tmcp/adapter-valibot, @tmcp/transport-http, valibot

Usage

// metro.config.js
module.exports = withStorybook(config, {
  websockets: { port: 7007 },
  mcp: true,
});

Then connect your AI agent to http://localhost:7007/mcp. For Claude Code:

claude mcp add --transport http --scope project storybook http://localhost:7007/mcp

How to test

1. Enable MCP in the expo example's metro config (websockets: 'auto', mcp: true)
2. Start the app: pnpm example
3. Verify MCP works: configure Claude Code (or MCP inspector) to connect to http://localhost:7007/mcp and call list-all-documentation
4. Run existing tests: pnpm test (all pass)