Storybook MCP Server for UI Testing & Documentation

Overview

The Storybook MCP (Model Context Protocol) Server is an addon that exposes a programmable interface to a running Storybook instance. It implements a lightweight protocol that lets external tools (test runners, visual-regression suites, CI jobs, documentation generators) inspect the current story model, control story args/controls, run story play functions, and orchestrate interactions inside the Storybook sandbox.

This capability is useful because it turns Storybook from a static visual catalog into a controllable test surface. Instead of brittle DOM scraping or custom test harnesses, external tools can interact with components through Storybook’s canonical model: stories, args, controls, and play functions. That makes automated testing, screenshot-driven regression, and generated documentation more robust and easier to maintain.

Features

• Exposes the Storybook story model (stories, metadata, args/controls) programmatically
• Programmatic control of story args and controls (set/get)
• Ability to trigger story play functions and wait for their completion
• Integrates with browser-based runners (Puppeteer, Playwright) and CI environments
• Designed for automation: deterministic hooks for testing and screenshot capture
• Lightweight addon that integrates into standard Storybook config
• Works with Storybook’s existing stories; no need to change component code to enable automation

Installation / Configuration

Install the addon into your project (npm or Yarn):

# npm
npm install --save-dev @storybook/addon-mcp

# yarn
yarn add --dev @storybook/addon-mcp

Enable the addon in your Storybook main configuration (.storybook/main.js or main.ts):

// .storybook/main.js
module.exports = {
  // ...other Storybook config
  addons: [
    '@storybook/addon-essentials',
    '@storybook/addon-a11y',
    '@storybook/addon-mcp'
  ],
};

You can pass options to the addon if you need to change defaults (port, logging, etc.). Example with an options object:

module.exports = {
  addons: [
    {
      name: '@storybook/addon-mcp',
      options: {
        // optional configuration; refer to the addon docs for supported keys
        port: 9001,
      },
    },
  ],
};

Restart Storybook after adding the addon. The MCP server will start alongside your Storybook instance and expose the protocol surface for external tooling.

Available Resources

• GitHub repository: https://github.com/storybookjs/addon-mcp — source, issues, and contribution notes
• Storybook docs & community: find examples and usage patterns in Storybook official docs and community channels
• Example integrations: look for Playwright/Puppeteer + Storybook examples in the repo or community projects

Use Cases

Below are concrete ways teams typically use the MCP server.

1. Automated visual regression with Playwright or Puppeteer

• Drive stories to a known state (set args), run the story’s play function, then capture a screenshot for visual diffing.
• Example outline (Playwright pseudo-code):

// pseudo-code example
await page.goto('http://localhost:6006'); // Storybook UI
// Use