Skip to main content

​
MCP Integration

React Native Storybook can expose an experimental MCP (Model Context Protocol) endpoint for AI tooling integration starting from v10.3.

​
What is MCP?

Model Context Protocol is a standardized interface that allows AI tools to query documentation and interact with your Storybook instance. This enables:
  • AI-powered component discovery: Ask AI about available components and their stories
  • Automated documentation queries: Retrieve component metadata, args, and parameters
  • Story selection tools: Control which story is displayed on connected devices
  • Development assistance: Integrate Storybook data into AI coding assistants

​
Endpoint Location

When enabled, the MCP endpoint runs on the same channel server as WebSockets: 
http://<host>:<port>/mcp
Example: http://localhost:7007/mcp

​
Configuration

​
Enable with Metro

For Metro-based projects (Expo, React Native CLI): 
// metro.config.js
const { getDefaultConfig } = require('expo/metro-config');
const { withStorybook } = require('@storybook/react-native/metro/withStorybook');

const config = getDefaultConfig(__dirname);

module.exports = withStorybook(config, {
  websockets: 'auto',
  experimental_mcp: true,
});
websockets: 'auto' automatically detects your LAN IP and is available from v10.2. You can also manually set { host, port }.

​
Enable with Re.Pack / Rspack

For projects using Re.Pack: 
// rspack.config.js
import { StorybookPlugin } from '@storybook/react-native/repack/withStorybook';

export default {
  plugins: [
    new StorybookPlugin({
      enabled: storybookEnabled,
      websockets: 'auto',
      experimental_mcp: true,
    }),
  ],
};

​
WebSocket Requirements

MCP functionality is split into two categories:
Available without WebSocketsThese tools work with experimental_mcp: true alone:
  • Query component documentation
  • Retrieve story metadata
  • Access args and parameters
  • Browse available stories
module.exports = withStorybook(config, {
  experimental_mcp: true,
  // websockets not required
});

​
MCP Client Configuration

Configure your AI tool to connect to the Storybook MCP endpoint:

​
Example: Claude Desktop

// claude_desktop_config.json
{
  "mcpServers": {
    "storybook": {
      "type": "http",
      "url": "http://localhost:7007/mcp"
    }
  }
}

​
Example: Custom Client

// Node.js client example
const fetch = require('node-fetch');

const MCP_ENDPOINT = 'http://localhost:7007/mcp';

async function queryStorybook(query) {
  const response = await fetch(MCP_ENDPOINT, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ query }),
  });
  
  return await response.json();
}

// Example queries
queryStorybook('List all Button stories');
queryStorybook('What are the args for the Primary Button story?');

​
Complete Setup Example

1

Configure Metro with MCP and WebSockets

// metro.config.js
const { getDefaultConfig } = require('expo/metro-config');
const { withStorybook } = require('@storybook/react-native/metro/withStorybook');

const config = getDefaultConfig(__dirname);

module.exports = withStorybook(config, {
  enabled: process.env.EXPO_PUBLIC_STORYBOOK_ENABLED === 'true',
  websockets: 'auto',
  experimental_mcp: true,
});
2

Start Metro bundler

npm start
You should see output indicating the MCP endpoint is available:
MCP endpoint available at http://192.168.1.100:7007/mcp
3

Configure your AI tool

Add the MCP endpoint to your AI tool’s configuration using the URL from the Metro output.
4

Test the connection

Ask your AI tool to query Storybook:
"What components are available in Storybook?"
"Show me the Button component stories"

​
Network Configuration

​
For Physical Devices

When testing on physical devices, use your machine’s IP address: 
module.exports = withStorybook(config, {
  websockets: {
    host: '192.168.1.100', // Your machine's IP
    port: 7007,
  },
  experimental_mcp: true,
});
Use websockets: 'auto' to automatically detect and inject your LAN IP address.

​
For Android Emulator

Android emulators use a special IP to access the host machine: 
module.exports = withStorybook(config, {
  websockets: {
    host: '10.0.2.2',
    port: 7007,
  },
  experimental_mcp: true,
});

​
Firewall Configuration

Ensure your firewall allows connections on the MCP port: 
# macOS
sudo /usr/libexec/ApplicationFirewall/socketfilterfw --add <port>

# Linux (ufw)
sudo ufw allow 7007/tcp

# Windows (PowerShell as Administrator)
New-NetFirewallRule -DisplayName "Storybook MCP" -Direction Inbound -Action Allow -Protocol TCP -LocalPort 7007

​
Use Cases

​
Component Discovery

Ask AI to find components: 
"What button variants are available?"
"Show me all form input components"
"Which stories demonstrate error states?"

​
Documentation Queries

Retrieve component information: 
"What are the available props for the Button component?"
"Show me the default args for the TextInput Primary story"
"What decorators are applied to the Card stories?"

​
Development Assistance

Integrate with coding workflows: 
"Create a new story for Button with a large size variant"
"What's the pattern for adding controls to a story?"
"How do I add a decorator to center my component?"

​
Testing Automation

Combine with testing tools: 
"Generate test cases for all Button stories"
"What stories should I test for the Login form?"
"List edge cases covered in the TextInput stories"

​
Troubleshooting

​
404 Error on /mcp

Problem: MCP endpoint returns 404 Solutions:
  • Ensure experimental_mcp: true is set in Metro config
  • Restart Metro bundler after config changes
  • Verify you’re using Storybook v10.3 or later
# Clear Metro cache and restart
npx react-native start --reset-cache

​
Story Selection Tool Unavailable

Problem: AI tool reports story selection is unavailable Solution: Enable WebSockets in Metro config: 
module.exports = withStorybook(config, {
  websockets: 'auto', // Required for story selection
  experimental_mcp: true,
});

​
Connection Issues from Physical Devices

Problem: Cannot connect to MCP endpoint from device Solutions:
  • Use websockets: 'auto' for automatic IP detection
  • Manually set your machine’s LAN IP address
  • Check firewall settings
  • Verify device is on the same network
# Find your IP address
# macOS/Linux
ifconfig | grep inet

# Windows
ipconfig

​
MCP Server Not Starting

Problem: Metro starts but MCP endpoint isn’t available Solutions:
  • Check if port 7007 is already in use: 
    lsof -i :7007
  • Use a different port: 
    websockets: {
  port: 7008, // Use different port
},
experimental_mcp: true,

​
Security Considerations

MCP endpoints should only be enabled in development environments. Never expose MCP in production builds.

​
Disable in Production

Use environment variables to control MCP: 
const isDev = process.env.NODE_ENV === 'development';

module.exports = withStorybook(config, {
  enabled: isDev,
  websockets: isDev ? 'auto' : undefined,
  experimental_mcp: isDev,
});

​
Network Access Control

  • Run MCP on localhost for local development only
  • Use VPN for remote team access
  • Avoid exposing MCP port to public networks
  • Consider authentication for shared development environments

​
Additional Resources

Build docs developers (and LLMs) love

Get started for freeTalk to us