### Start the MCP server

Source: https://github.com/storybookjs/mcp/blob/main/apps/self-host-mcp/README.md

Commands to install dependencies and start the MCP server locally.

```bash
pnpm install
cd apps/self-host-mcp
pnpm start
```

--------------------------------

### Get documentation for a component

Source: https://context7.com/storybookjs/mcp/llms.txt

Fetches detailed documentation, prop definitions, and story examples for a specific component ID.

```bash
# Get documentation for a component
curl -X POST http://localhost:6006/mcp \
  -H "Content-Type: application/json" \
  -d '{
    "jsonrpc": "2.0",
    "id": 2,
    "method": "tools/call",
    "params": {
      "name": "get-documentation",
      "arguments": {
        "id": "button"
      }
    }
  }'

# Multi-source mode (when composing multiple Storybooks)
curl -X POST http://localhost:6006/mcp \
  -H "Content-Type: application/json" \
  -d '{
    "jsonrpc": "2.0",
    "id": 2,
    "method": "tools/call",
    "params": {
      "name": "get-documentation",
      "arguments": {
        "id": "button",
        "storybookId": "design-system"
      }
    }
  }'
```

--------------------------------

### Fetch Story Instructions with storybook-dev-mcp

Source: https://github.com/storybookjs/mcp/blob/main/eval/tasks/903-create-component-async-fetch-reshaped/system.explicit-mcp.md

Use this tool to get the latest instructions for creating or updating component stories, ensuring adherence to current conventions. No specific setup is mentioned beyond having the tool installed.

```bash
npx storybook-dev-mcp get-storybook-story-instructions
```

--------------------------------

### Start Storybook with Addon Watching

Source: https://github.com/storybookjs/mcp/blob/main/README.md

Starts Storybook in development mode, automatically watching the addon for changes and reflecting them in the running instance.

```bash
pnpm storybook
```

--------------------------------

### Check Example Stories with `get-documentation-for-story`

Source: https://github.com/storybookjs/mcp/blob/main/eval/tasks/904-create-component-async-module-reshaped/system.explicit-mcp.md

If a required property is not found in the component's documentation, use this tool to check example stories for alternative ways to achieve the desired styling or functionality.

```bash
npx storybook-dev-mcp get-documentation-for-story --component <component-name> --story <story-name>
```

--------------------------------

### Minimal `tmcp` Server Composition Example

Source: https://github.com/storybookjs/mcp/blob/main/packages/mcp/README.md

Use this example to build a custom `tmcp` server and register Storybook's documentation tools. Ensure you pass `StorybookContext` per request for manifest resolution.

```typescript
import { McpServer } from 'tmcp';
import { ValibotJsonSchemaAdapter } from '@tmcp/adapter-valibot';
import {
	addGetStoryDocumentationTool,
	addGetDocumentationTool,
	addListAllDocumentationTool,
	type StorybookContext,
} from '@storybook/mcp';

const adapter = new ValibotJsonSchemaAdapter();
const server = new McpServer(
	{ name: 'custom-mcp', version: '1.0.0' },
	{
		adapter,
		capabilities: { 
			tools: { listChanged: true },
		},
	},
).withContext<StorybookContext>();

await addListAllDocumentationTool(server);
await addGetDocumentationTool(server);
await addGetStoryDocumentationTool(server);
```

--------------------------------

### Clone Repository and Install Dependencies

Source: https://github.com/storybookjs/mcp/blob/main/README.md

Clones the Storybook MCP repository and installs all project dependencies using pnpm.

```bash
git clone https://github.com/storybookjs/mcp.git
cd addon-mcp

# Install all dependencies (for all packages in the monorepo)
pnpm install
```

--------------------------------

### Get Component Documentation with `get-documentation`

Source: https://github.com/storybookjs/mcp/blob/main/eval/tasks/904-create-component-async-module-reshaped/system.explicit-mcp.md

Use this tool to fetch detailed documentation for a specific component, including all its available properties. Always verify properties before use.

```bash
npx storybook-dev-mcp get-documentation --component <component-name>
```

--------------------------------

### Check Example Stories for Property Documentation

Source: https://github.com/storybookjs/mcp/blob/main/eval/tasks/903-create-component-async-fetch-reshaped/system.explicit-mcp.md

If a needed property is not found in the direct documentation, use this function to check example stories for alternative ways to achieve the desired styling or functionality. This helps in finding undocumented or implicitly documented properties.

```bash
npx storybook-docs-mcp get-documentation-for-story --story-name "<story-name>"
```

--------------------------------

### Define Task Prompt

Source: https://github.com/storybookjs/mcp/blob/main/eval/README.md

Example content for a task's prompt.md file including technical requirements.

```markdown
Build a SearchBar component with autocomplete...

<technical_requirements>

1. Component MUST be default export in src/components/SearchBar.tsx
2. Component MUST have data-testid="search-bar"
      </technical_requirements>
```

--------------------------------

### Build and Develop Packages

Source: https://github.com/storybookjs/mcp/blob/main/README.md

Commands to build all packages in the monorepo and start development mode with watch capabilities.

```bash
# Build all packages
pnpm build

# Start development mode (watches for changes in all packages)
pnpm dev

# Run unit tests in watch mode
pnpm test

# Run unit tests once
pnpm test:run

# Run Storybook with the addon for testing
pnpm --filter internal-storybook storybook
```

--------------------------------

### Install pnpm and Use Correct Node Version

Source: https://github.com/storybookjs/mcp/blob/main/README.md

Ensures the correct Node.js version is used and installs pnpm globally with the required version.

```bash
nvm use

# Install pnpm if you don't have it
npm install -g pnpm@10.19.0
```

--------------------------------

### Implement handler with custom manifest fetching

Source: https://github.com/storybookjs/mcp/blob/main/packages/mcp/README.md

Full example showing handler creation with a custom manifest provider and request routing.

```ts
import { createStorybookMcpHandler } from '@storybook/mcp';

const mcp = await createStorybookMcpHandler({
	manifestProvider: async (_request, path) => {
		return await fetchManifest(path);
	},
});

export async function handleRequest(request: Request) {
	if (new URL(request.url).pathname !== '/mcp') {
		return new Response('Not found', { status: 404 });
	}

	return mcp(request);
}
```

--------------------------------

### Get story documentation via MCP

Source: https://context7.com/storybookjs/mcp/llms.txt

Retrieves documentation for a specific story, including prop combinations.

```bash
curl -X POST http://localhost:6006/mcp \
  -H "Content-Type: application/json" \
  -d '{
    "jsonrpc": "2.0",
    "id": 3,
    "method": "tools/call",
    "params": {
      "name": "get-documentation-for-story",
      "arguments": {
        "componentId": "button",
        "storyName": "Large"
      }
    }
  }'
```

--------------------------------

### Source Configuration

Source: https://github.com/storybookjs/mcp/blob/main/packages/mcp/README.md

Configuration for multi-source setups, allowing composition of multiple Storybook MCP sources.

```APIDOC
## `sources`

### Description
Optional multi-source configuration for composing multiple Storybook MCP sources. This is supported but relatively uncommon for most user setups.

### Type
```typescript
Source[];
```

#### `Source`

### Description
Represents one Storybook source in multi-source mode.

### Type
```typescript
type Source = {
	id: string;
	title: string;
	url?: string;
};
```

#### `SourceManifests`

### Description
Represents fetched manifests (or an error) for a single source.

### Type
```typescript
type SourceManifests = {
	source: Source;
	componentManifest: ComponentManifestMap;
	docsManifest?: DocsManifestMap;
	error?: string;
};
```
```

--------------------------------

### POST /mcp (get-documentation)

Source: https://context7.com/storybookjs/mcp/llms.txt

Retrieves detailed documentation for a specific UI component or docs entry, including prop definitions and story examples.

```APIDOC
## POST /mcp

### Description
Retrieves detailed documentation for a specific UI component or docs entry. Returns the first 3 stories with code snippets showing prop usage, plus TypeScript prop definitions.

### Method
POST

### Endpoint
/mcp

### Request Body
- **jsonrpc** (string) - Required - Version of the JSON-RPC protocol.
- **method** (string) - Required - Set to "tools/call".
- **params** (object) - Required - Contains the tool name and arguments.
  - **name** (string) - Required - Set to "get-documentation".
  - **arguments** (object) - Required - Tool arguments.
    - **id** (string) - Required - The ID of the component or documentation entry.
    - **storybookId** (string) - Optional - The ID of the storybook when composing multiple Storybooks.

### Request Example
{
  "jsonrpc": "2.0",
  "id": 2,
  "method": "tools/call",
  "params": {
    "name": "get-documentation",
    "arguments": {
      "id": "button",
      "storybookId": "design-system"
    }
  }
}
```

--------------------------------

### Start Development Mode for All Packages

Source: https://github.com/storybookjs/mcp/blob/main/README.md

Initiates a watch mode build process for all packages within the monorepo, automatically rebuilding upon changes.

```bash
pnpm turbo watch build
```

--------------------------------

### Launch MCP Inspector

Source: https://github.com/storybookjs/mcp/blob/main/README.md

Starts the MCP Inspector tool, which requires Storybook to be running, to debug and test MCP server functionality.

```bash
pnpm inspect
```

--------------------------------

### Implement minimal Storybook MCP handler

Source: https://github.com/storybookjs/mcp/blob/main/packages/mcp/README.md

Basic setup for a request handler that routes MCP requests to the Storybook MCP handler.

```ts
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 });
}
```

--------------------------------

### Summary Metrics JSON Structure

Source: https://github.com/storybookjs/mcp/blob/main/eval/README.md

Example of the summary.json output containing execution and grading metrics.

```json
{
	"cost": 0.1234,
	"duration": 45,
	"turns": 8,
	"buildSuccess": true,
	"typeCheckErrors": 0,
	"lintErrors": 0,
	"test": { "passed": 3, "failed": 0 },
	"a11y": { "violations": 1 },
	"coverage": {
		"lines": 87.5,
		"statements": 86.9,
		"branches": 75.0,
		"functions": 80.0
	}
}
```

--------------------------------

### Define Lifecycle Hooks

Source: https://github.com/storybookjs/mcp/blob/main/eval/README.md

Example of defining post-trial preparation hooks in hooks.ts.

```typescript
import type { Hooks } from '../../types.ts';

export default {
	async postPrepareTrial(args, log) {
		// Custom setup (e.g., copy fixtures)
	},
} satisfies Hooks;
```

--------------------------------

### Preview Primary Button Story with Storybook MCP

Source: https://github.com/storybookjs/mcp/blob/main/eval/tasks/914-preview-story-by-path/prompt.md

Shows how to preview the Primary button story using the Storybook MCP preview tool. This requires the Storybook MCP setup.

```bash
npx storybook@latest mcp preview -- stories "stories/Button.stories.tsx:Primary"
```

--------------------------------

### Get Specific Component Documentation with storybook-docs-mcp

Source: https://github.com/storybookjs/mcp/blob/main/eval/tasks/903-create-component-async-fetch-reshaped/system.explicit-mcp.md

After obtaining a component name, use this function to fetch all its available properties. This is crucial for understanding what properties can be safely used.

```bash
npx storybook-docs-mcp get-documentation --component-name "<component-name>"
```

--------------------------------

### Preview Secondary Button Story with Storybook MCP

Source: https://github.com/storybookjs/mcp/blob/main/eval/tasks/914-preview-story-by-path/prompt.md

Shows how to preview the Secondary button story using the Storybook MCP preview tool. This requires the Storybook MCP setup.

```bash
npx storybook@latest mcp preview -- stories "stories/Button.stories.tsx:Secondary"
```

--------------------------------

### Button Stories Imports

Source: https://github.com/storybookjs/mcp/blob/main/eval/tasks/914-preview-story-by-path/prompt.md

Lists the imports required for the Button.stories.tsx file. Ensure these dependencies are installed.

```typescript
import type { Meta, StoryObj } from "@storybook/react";

import { Button } from "./Button";
```

--------------------------------

### Get preview URLs for stories

Source: https://context7.com/storybookjs/mcp/llms.txt

Generates direct browser preview URLs for stories using IDs, file paths, or custom props and globals.

```bash
curl -X POST http://localhost:6006/mcp \
  -H "Content-Type: application/json" \
  -d '{
    "jsonrpc": "2.0",
    "id": 4,
    "method": "tools/call",
    "params": {
      "name": "preview-stories",
      "arguments": {
        "stories": [
          { "storyId": "button--primary" }
        ]
      }
    }
  }'
```

```bash
curl -X POST http://localhost:6006/mcp \
  -H "Content-Type: application/json" \
  -d '{
    "jsonrpc": "2.0",
    "id": 4,
    "method": "tools/call",
    "params": {
      "name": "preview-stories",
      "arguments": {
        "stories": [
          {
            "absoluteStoryPath": "/path/to/Button.stories.tsx",
            "exportName": "Primary"
          }
        ]
      }
    }
  }'
```

```bash
curl -X POST http://localhost:6006/mcp \
  -H "Content-Type: application/json" \
  -d '{
    "jsonrpc": "2.0",
    "id": 4,
    "method": "tools/call",
    "params": {
      "name": "preview-stories",
      "arguments": {
        "stories": [
          {
            "storyId": "button--primary",
            "props": { "size": "large" },
            "globals": { "theme": "dark" }
          }
        ]
      }
    }
  }'
```

--------------------------------

### Define Evaluation Variant Configuration

Source: https://github.com/storybookjs/mcp/blob/main/eval/README.md

Example configuration for defining agent variants and their associated context settings.

```typescript
// eval/variant-configs/storybook-mcp-comparison.ts
const base = {
	agent: 'claude-code',
	model: 'claude-sonnet-4.6',
};

export default {
	name: 'storybook-mcp-comparison',
	variants: [
		{
			...base,
			id: 'with-mcp',
			label: 'With Storybook MCP',
			context: [{ type: 'storybook-mcp-docs' }],
		},
		{
			...base,
			id: 'without-mcp',
			label: 'Without MCP',
			context: [{ type: false }],
		},
	],
};
```

--------------------------------

### Deploy Storybook MCP as Netlify Function

Source: https://context7.com/storybookjs/mcp/llms.txt

Deploy the MCP addon as a Netlify Function for serverless hosting. This handler caches the MCP server instance for efficient cold starts and supports fetching manifests from URLs or local paths.

```typescript
// netlify/functions/mcp.ts
import { createStorybookMcpHandler } from '@storybook/mcp';
import fs from 'node:fs/promises';
import { basename, resolve } from 'node:path';

const manifestsPath = process.env.MANIFESTS_PATH ?? './manifests';

function createMcpHandler(manifestsPath: string) {
  return createStorybookMcpHandler({
    manifestProvider: async (_request, path) => {
      const fileName = basename(path);

      if (manifestsPath.startsWith('http://') || manifestsPath.startsWith('https://')) {
        const response = await fetch(`${manifestsPath}/${fileName}`);
        if (!response.ok) {
          throw new Error(`Failed to fetch manifest: ${response.status}`);
        }
        return await response.text();
      }

      return await fs.readFile(resolve(manifestsPath, fileName), 'utf-8');
    },
  });
}

let cachedHandlerPromise: ReturnType<typeof createMcpHandler> | undefined;

export default async function handler(request: Request): Promise<Response> {
  const pathname = new URL(request.url).pathname;
  if (pathname !== '/mcp' && pathname !== '/.netlify/functions/mcp') {
    return new Response('Not found', { status: 404 });
  }

  if (!cachedHandlerPromise) {
    cachedHandlerPromise = createMcpHandler(manifestsPath);
  }

  const mcpHandler = await cachedHandlerPromise;
  return mcpHandler(request);
}

```

--------------------------------

### Get Documentation for a Specific Story

Source: https://context7.com/storybookjs/mcp/llms.txt

Retrieves story-specific documentation, including code snippets showing exact prop combinations used.

```APIDOC
## POST /mcp

### Description
Gets documentation for a specific story.

### Method
POST

### Endpoint
/mcp

### Request Body
- **jsonrpc** (string) - Required - JSON-RPC version.
- **id** (integer) - Required - Request ID.
- **method** (string) - Required - The method to call, should be "tools/call".
- **params** (object) - Required - Parameters for the tool call.
  - **name** (string) - Required - The name of the tool, should be "get-documentation-for-story".
  - **arguments** (object) - Required - Arguments for the tool.
    - **componentId** (string) - Required - The ID of the component.
    - **storyName** (string) - Required - The name of the story.

### Request Example
```json
{
  "jsonrpc": "2.0",
  "id": 3,
  "method": "tools/call",
  "params": {
    "name": "get-documentation-for-story",
    "arguments": {
      "componentId": "button",
      "storyName": "Large"
    }
  }
}
```

### Response
#### Success Response (200)
- **documentation** (object) - Story-specific documentation.
- **codeSnippet** (string) - Code snippet showing exact prop combinations used.
```

--------------------------------

### List All Components with `list-all-documentation`

Source: https://github.com/storybookjs/mcp/blob/main/eval/tasks/904-create-component-async-module-reshaped/system.explicit-mcp.md

Query this tool to obtain a comprehensive list of all available components within the Storybook MCP.

```bash
npx storybook-dev-mcp list-all-documentation
```

--------------------------------

### Configure server options

Source: https://github.com/storybookjs/mcp/blob/main/apps/self-host-mcp/README.md

Run the server with custom port and manifest path configurations.

```bash
cd apps/self-host-mcp
pnpm start -- --port 13316 --manifestsPath ./manifests
```

--------------------------------

### Create Task Directory

Source: https://github.com/storybookjs/mcp/blob/main/eval/README.md

Command to initialize a new task directory.

```bash
mkdir tasks/200-my-component
```

--------------------------------

### POST /mcp (list-all-documentation)

Source: https://context7.com/storybookjs/mcp/llms.txt

Lists all available UI components and documentation entries from the Storybook. This tool should be called first to discover available component and docs IDs.

```APIDOC
## POST /mcp

### Description
Lists all available UI components and documentation entries from the Storybook.

### Method
POST

### Endpoint
/mcp

### Request Body
- **jsonrpc** (string) - Required - Version of the JSON-RPC protocol.
- **method** (string) - Required - Set to "tools/call".
- **params** (object) - Required - Contains the tool name and arguments.
  - **name** (string) - Required - Set to "list-all-documentation".
  - **arguments** (object) - Optional - Tool arguments.
    - **withStoryIds** (boolean) - Optional - Whether to include story IDs in the output.

### Request Example
{
  "jsonrpc": "2.0",
  "id": 1,
  "method": "tools/call",
  "params": {
    "name": "list-all-documentation",
    "arguments": {
      "withStoryIds": true
    }
  }
}
```

--------------------------------

### List all documentation via MCP tool

Source: https://context7.com/storybookjs/mcp/llms.txt

Retrieves a list of available UI components and documentation entries. Call this to discover IDs before requesting specific details.

```bash
# Test the MCP server using curl
curl -X POST http://localhost:6006/mcp \
  -H "Content-Type: application/json" \
  -d '{
    "jsonrpc": "2.0",
    "id": 1,
    "method": "tools/call",
    "params": {
      "name": "list-all-documentation",
      "arguments": {}
    }
  }'

# With story IDs for downstream workflows
curl -X POST http://localhost:6006/mcp \
  -H "Content-Type: application/json" \
  -d '{
    "jsonrpc": "2.0",
    "id": 1,
    "method": "tools/call",
    "params": {
      "name": "list-all-documentation",
      "arguments": {
        "withStoryIds": true
      }
    }
  }'
```

--------------------------------

### Inspect Generated Project and Run Storybook

Source: https://github.com/storybookjs/mcp/blob/main/eval/README.md

Navigate to the generated project directory within a trial and run `pnpm storybook` to inspect the results.

```bash
cd tasks/100-flight-booking-plain/trials/{trial-name}/project
pnpm storybook
```

--------------------------------

### Create a Changeset

Source: https://github.com/storybookjs/mcp/blob/main/README.md

Command to initialize a changeset for version management.

```bash
# 1. Create a changeset describing your changes
pnpm changeset
```

--------------------------------

### List All Component Documentation with storybook-docs-mcp

Source: https://github.com/storybookjs/mcp/blob/main/eval/tasks/903-create-component-async-fetch-reshaped/system.explicit-mcp.md

Query this function to retrieve a comprehensive list of all available components within the design system. This is the first step in verifying component properties.

```bash
npx storybook-docs-mcp list-all-documentation
```

--------------------------------

### Build All Packages

Source: https://github.com/storybookjs/mcp/blob/main/README.md

Compiles all packages within the monorepo.

```bash
pnpm build
```

--------------------------------

### Run Unit Tests

Source: https://github.com/storybookjs/mcp/blob/main/README.md

Commands to execute unit tests across all packages, with options for watch mode, single run, and CI reporting.

```bash
# Watch tests across all packages
pnpm test

# Run tests once across all packages
pnpm test:run

# Run tests with coverage and CI reporters
pnpm test:ci
```

--------------------------------

### Preview Stories MCP Tool

Source: https://context7.com/storybookjs/mcp/llms.txt

Gets Storybook preview URLs for one or more stories. Available when using `@storybook/addon-mcp`. Returns URLs that users can open directly to preview components in the browser.

```APIDOC
## POST /mcp

### Description
Gets Storybook preview URLs for one or more stories.

### Method
POST

### Endpoint
/mcp

### Request Body
- **jsonrpc** (string) - Required - JSON-RPC version.
- **id** (integer) - Required - Request ID.
- **method** (string) - Required - The method to call, should be "tools/call".
- **params** (object) - Required - Parameters for the tool call.
  - **name** (string) - Required - The name of the tool, should be "preview-stories".
  - **arguments** (object) - Required - Arguments for the tool.
    - **stories** (array) - Required - An array of stories to preview.
      - **storyId** (string) - Optional - The ID of the story.
      - **absoluteStoryPath** (string) - Optional - The absolute path to the story file.
      - **exportName** (string) - Optional - The export name of the story.
      - **props** (object) - Optional - Custom props to apply to the story.
      - **globals** (object) - Optional - Custom global parameters to apply to the story.

### Request Example
```json
{
  "jsonrpc": "2.0",
  "id": 4,
  "method": "tools/call",
  "params": {
    "name": "preview-stories",
    "arguments": {
      "stories": [
        { "storyId": "button--primary" },
        {
          "absoluteStoryPath": "/path/to/Button.stories.tsx",
          "exportName": "Primary",
          "props": { "size": "large" },
          "globals": { "theme": "dark" }
        }
      ]
    }
  }
}
```

### Response
#### Success Response (200)
- **stories** (array) - An array of preview information for each story.
  - **title** (string) - The title of the story.
  - **name** (string) - The name of the story.
  - **previewUrl** (string) - The URL to preview the story.
```

--------------------------------

### Debug MCP with Inspector and Curl

Source: https://context7.com/storybookjs/mcp/llms.txt

Use the MCP Inspector or `curl` to debug and test MCP server functionality during development. Start Storybook, then launch the inspector or send POST requests to the `/mcp` endpoint.

```bash
# Start Storybook with MCP addon
pnpm storybook

# In another terminal, launch the inspector
pnpm inspect

# Or use curl to test directly
curl -X POST http://localhost:6006/mcp \
  -H "Content-Type: application/json" \
  -d '{
    "jsonrpc": "2.0",
    "id": 1,
    "method": "tools/list",
    "params": {}
  }'

# Expected response lists available tools:
# {
#   "jsonrpc": "2.0",
#   "id": 1,
#   "result": {
#     "tools": [
#       { "name": "list-all-documentation", ... },
#       { "name": "get-documentation", ... },
#       { "name": "preview-stories", ... },
#       { "name": "run-story-tests", ... }
#     ]
#   }
# 

```

--------------------------------

### Add List All Documentation Tool

Source: https://context7.com/storybookjs/mcp/llms.txt

Registers the list-all-documentation tool on a custom tmcp McpServer. Use this when building your own MCP server while reusing Storybook's docs tools.

```APIDOC
```typescript
import { McpServer } from 'tmcp';
import { ValibotJsonSchemaAdapter } from '@tmcp/adapter-valibot';
import {
  addListAllDocumentationTool,
  addGetDocumentationTool,
  addGetStoryDocumentationTool,
  type StorybookContext,
} from '@storybook/mcp';

const adapter = new ValibotJsonSchemaAdapter();
const server = new McpServer(
  { name: 'custom-mcp', version: '1.0.0' },
  {
    adapter,
    capabilities: { tools: { listChanged: true } },
  }
).withContext<StorybookContext>();

// Register all Storybook documentation tools
await addListAllDocumentationTool(server);
await addGetDocumentationTool(server);
await addGetStoryDocumentationTool(server);

// Optional: conditionally enable tools
await addListAllDocumentationTool(server, async () => {
  return process.env.ENABLE_DOCS === 'true';
});

// For multi-source mode
await addGetDocumentationTool(server, undefined, { multiSource: true });
```
```

--------------------------------

### Register module mocks in preview

Source: https://github.com/storybookjs/mcp/blob/main/packages/addon-mcp/src/instructions/storybook-story-instructions.md

Register module mocks in .storybook/preview.ts to ensure consistent dependency mocking.

```javascript
import { sb } from 'storybook/test';

// Prefer spy mocks (keeps functions, but allows to override them and spy on them)
sb.mock(import('some-library'), { spy: true });
```

```javascript
sb.mock(import('./relative/module.ts'), { spy: true });
```

--------------------------------

### Manifest Provider Configuration

Source: https://github.com/storybookjs/mcp/blob/main/packages/mcp/README.md

Configure how Storybook MCP loads manifest files. Use `manifestProvider` when manifests are not at default same-origin paths. It returns raw JSON strings for requested manifest paths.

```APIDOC
## `manifestProvider`

### Description
Primary extension point for production setups. Use this when manifests are not available at the default same-origin paths. Your function returns the raw JSON string for each requested manifest path.

Manifest paths requested by built-in tools:

- `./manifests/components.json` (required)
- `./manifests/docs.json` (optional)

### Type
```typescript
(request: Request | undefined, path: string, source?: Source) => Promise<string>;
```
```

--------------------------------

### Configure Multi-Source Composition with OAuth

Source: https://context7.com/storybookjs/mcp/llms.txt

Configure multiple Storybook sources with OAuth support in `.storybook/main.ts`. The addon handles token management and manifest fetching across different Storybook instances.

```typescript
// .storybook/main.ts
import type { StorybookConfig } from '@storybook/react-vite';

const config: StorybookConfig = {
  addons: ['@storybook/addon-mcp'],
  refs: {
    'design-system': {
      title: 'Design System',
      url: 'https://design-system.example.com',
    },
    'component-library': {
      title: 'Component Library',
      url: 'https://components.example.com',
    },
  },
};

export default config;

// Then use storybookId in tool calls:
// get-documentation: { "id": "button", "storybookId": "design-system" }
// list-all-documentation returns entries grouped by source

```

--------------------------------

### addListAllDocumentationTool

Source: https://github.com/storybookjs/mcp/blob/main/packages/mcp/README.md

Registers the tool that returns all component/docs IDs from manifests.

```APIDOC
## `addListAllDocumentationTool`

### Description
Registers the [list tool](https://storybook.js.org/docs/next/ai/mcp/overview/#list-all-documentation) that returns all component/docs IDs from manifests.

### Type
```typescript
(server: McpServer<any, StorybookContext>, enabled?: () => boolean | Promise<boolean>) =>
	Promise<void>;
```
```

--------------------------------

### Run story tests via MCP

Source: https://context7.com/storybookjs/mcp/llms.txt

Executes component and accessibility tests. Requires @storybook/addon-vitest configuration.

```bash
curl -X POST http://localhost:6006/mcp \
  -H "Content-Type: application/json" \
  -d '{
    "jsonrpc": "2.0",
    "id": 5,
    "method": "tools/call",
    "params": {
      "name": "run-story-tests",
      "arguments": {
        "stories": [
          { "storyId": "button--primary" },
          { "storyId": "button--secondary" }
        ],
        "a11y": true
      }
    }
  }'
```

```bash
curl -X POST http://localhost:6006/mcp \
  -H "Content-Type: application/json" \
  -d '{
    "jsonrpc": "2.0",
    "id": 5,
    "method": "tools/call",
    "params": {
      "name": "run-story-tests",
      "arguments": {}
    }
  }'
```

--------------------------------

### Run CI Quality Checks

Source: https://github.com/storybookjs/mcp/blob/main/README.md

Commands to execute various quality assurance tasks like building, testing, linting, and type checking.

```bash
# Run all checks (build, test, lint, format, typecheck, publint)
pnpm check

# Run checks in watch mode (experimental)
pnpm check:watch

# Type checking (uses tsc directly, not turbo)
pnpm typecheck

# Type checking with turbo (for individual packages)
pnpm turbo:typecheck

# Testing with turbo (for individual packages)
pnpm turbo:test
```

--------------------------------

### Run Evaluation Trials

Source: https://github.com/storybookjs/mcp/blob/main/eval/README.md

Commands to execute evaluation trials either interactively or via pnpm.

```bash
# Interactive eval
node eval.ts

# Eval via pnpm script
pnpm eval
```

--------------------------------

### Import and Render Transcript Component

Source: https://github.com/storybookjs/mcp/blob/main/eval/templates/grading/results/transcript.mdx

Import necessary modules and render the Transcript component with provided data. Ensure transcriptData is correctly imported from its JSON source.

```javascript
import { Meta } from '@storybook/addon-docs/blocks';
import transcriptData from '../../results/transcript.json';
import { Transcript } from '../../../../../../templates/result-docs/transcript.tsx';

<Meta title="Transcript" />

<Transcript {...transcriptData} />
```

--------------------------------

### Update Meta and StoryObj imports

Source: https://github.com/storybookjs/mcp/blob/main/packages/addon-mcp/src/instructions/storybook-story-instructions.md

Update story imports to use the framework package instead of the renderer package.

```diff
- import { Meta, StoryObj } from '{{RENDERER}}';
+ import { Meta, StoryObj } from '{{FRAMEWORK}}';
```

--------------------------------

### Configure Autodocs using tags

Source: https://github.com/storybookjs/mcp/blob/main/packages/addon-mcp/src/instructions/storybook-story-instructions.md

Use the tags array to enable autodocs instead of the parameters.docs.autodocs property.

```javascript
// .storybook/preview.js or in individual stories
export default {
	tags: ['autodocs'], // generates autodocs for all stories
};
```

--------------------------------

### Import and Process Source Files

Source: https://github.com/storybookjs/mcp/blob/main/eval/templates/grading/results/source.mdx

Dynamically imports all files from the src directory, filters out 'main.tsx', and formats them into an object keyed by file path. This is useful for generating documentation or previews of project source code.

```javascript
import { Meta } from '@storybook/addon-docs/blocks';
import { Source } from '../../../../../../templates/result-docs/source.tsx';

export const modules = import.meta.glob('/src/**/*', {
	query: '?raw',
	import: 'default',
	eager: true,
});

export const files = Object.fromEntries(
	Object.entries(modules)
		.filter(([path]) => !path.endsWith('/src/main.tsx'))
		.map(([path, content]) => [path.replace(/^\\/, ''), content]),
);

<Meta title="Source" />

<Source files={files} />
```

--------------------------------

### createStorybookMcpHandler

Source: https://github.com/storybookjs/mcp/blob/main/packages/mcp/README.md

Creates and configures an MCP HTTP handler with built-in documentation tools registered.

```APIDOC
## POST /mcp

### Description
Creates an MCP HTTP handler that processes requests to the /mcp endpoint. It registers tools for listing and retrieving documentation from Storybook manifests.

### Method
POST

### Endpoint
/mcp

### Parameters
#### Request Body
- **options** (StorybookMcpHandlerOptions) - Optional - Configuration object for the handler, including manifest providers and lifecycle hooks.

### Response
#### Success Response (200)
- **Response** (Response) - A fetch-compatible response containing the MCP protocol result.

### Request Example
```ts
import { createStorybookMcpHandler } from '@storybook/mcp';

const mcp = await createStorybookMcpHandler({
	manifestProvider: async (_request, path) => {
		return await fetchManifest(path);
	},
});

export async function handleRequest(request: Request) {
	return mcp(request);
}
```
```

--------------------------------

### Configure custom manifest source

Source: https://github.com/storybookjs/mcp/blob/main/packages/mcp/README.md

Use the manifestProvider option to define a custom mechanism for fetching manifest files.

```ts
const storybookMcpHandler = await createStorybookMcpHandler({
	manifestProvider: async (_request, path) => {
		return asyncReadManifestFromSomewhere(path);
	},
});
```

--------------------------------

### Run Vitest Tests

Source: https://github.com/storybookjs/mcp/blob/main/eval/tasks/911-fix-failing-tests/prompt.vitest-cli.md

Execute Vitest tests using the command line. This command should be used for running tests directly, not through Storybook MCP tools. Fix any failing tests and re-run this command until all tests pass.

```bash
npx vitest run
```

--------------------------------

### Register Storybook tools in custom MCP server

Source: https://context7.com/storybookjs/mcp/llms.txt

Integrates Storybook documentation tools into a custom McpServer instance.

```typescript
import { McpServer } from 'tmcp';
import { ValibotJsonSchemaAdapter } from '@tmcp/adapter-valibot';
import {
  addListAllDocumentationTool,
  addGetDocumentationTool,
  addGetStoryDocumentationTool,
  type StorybookContext,
} from '@storybook/mcp';

const adapter = new ValibotJsonSchemaAdapter();
const server = new McpServer(
  { name: 'custom-mcp', version: '1.0.0' },
  {
    adapter,
    capabilities: { tools: { listChanged: true } },
  }
).withContext<StorybookContext>();

// Register all Storybook documentation tools
await addListAllDocumentationTool(server);
await addGetDocumentationTool(server);
await addGetStoryDocumentationTool(server);

// Optional: conditionally enable tools
await addListAllDocumentationTool(server, async () => {
  return process.env.ENABLE_DOCS === 'true';
});

// For multi-source mode
await addGetDocumentationTool(server, undefined, { multiSource: true });
```

--------------------------------

### Execute Eval Harness Commands

Source: https://github.com/storybookjs/mcp/blob/main/eval/README.md

Run batch evaluations or specific advanced evaluations using the provided CLI scripts.

```bash
# Run eval across variants (recommended for batch testing)
node eval.ts

# Run single advanced eval (interactive mode)
node advanced-eval.ts

# With all options specified (advanced-eval)
node advanced-eval.ts --agent claude-code --model claude-sonnet-4.6 --context components.json --upload-id batch-1 100-flight-booking-plain
```

--------------------------------

### Optional Callbacks

Source: https://github.com/storybookjs/mcp/blob/main/packages/mcp/README.md

Optional callbacks that can be provided to hook into the documentation listing and retrieval processes.

```APIDOC
## `onListAllDocumentation`

### Description
Optional callback after `list-all-documentation` resolves successfully.

### Type
```typescript
(params: {
  context: StorybookContext;
  manifests: AllManifests;
  resultText: string;
  sources?: SourceManifests[];
}) => void | Promise<void>;
```

## `onGetDocumentation`

### Description
Optional callback after `get-documentation` runs:

- When a component/docs entry is found, receives `foundDocumentation` and `resultText`.
- When not found, receives only `context` and `input`.

### Type
```typescript
(
  params:
    | {
        context: StorybookContext;
        input: { id: string; storybookId?: string };
        foundDocumentation: ComponentManifest | Doc;
        resultText: string;
      }
    | {
        context: StorybookContext;
        input: { id: string; storybookId?: string };
      },
) => void | Promise<void>;
```
```