SSyncDev

Storybook MCP Server

Help agents automatically write and test stories for your UI components

Local serverstdioTypeScript

What is the Storybook MCP Server?

Help agents automatically write and test stories for your UI components

What the server does

Welcome to the Storybook MCP Addon monorepo! This project enables AI agents to work more efficiently with Storybook by providing an MCP (Model Context Protocol) server that exposes UI component information and development workflows.

Credentials and setup notes

  • Node.js 24+ - The project requires Node.js 24 or higher (see .nvmrc) - pnpm 10.19.0+ - Strict package manager requirement (enforced in package.json) ```bash

More MCP options

Compare MCP servers by category, or browse hosted MCP servers if you prefer an endpoint over a local process.

How to install the Storybook MCP Server

{
  "mcpServers": {
    "github-com-storybookjs-addon": {
      "command": "npx",
      "args": ["-y", "pnpm"]
    }
  }
}

Add to claude_desktop_config.json, then restart Claude Desktop.

Configuration

  • Node.js 24+ - The project requires Node.js 24 or higher (see .nvmrc) - pnpm 10.19.0+ - Strict package manager requirement (enforced in package.json) ```bash

Example prompts to try

  • “Use Storybook MCP to Patch.”
  • “Use Storybook MCP to Minor.”
  • “Use Storybook MCP to Major.”

Frequently asked questions

Help agents automatically write and test stories for your UI components Confirm the tools offered by your installed version in the connected client. Tool availability and permissions depend on the server and account configuration.

Alternatives to the Storybook MCP Server

Figma

Feed real design data to your coding assistant — layout, tokens and components straight from Figma files.

Developer ToolsTypeScript★ 11.0k

Figma

Integrates Figma's API with Claude and other Model Context Protocol (MCP) compatible clients, providing read-only access to Figma files and projects.

Design & Creative ToolsTypeScript★ 150

Canvas

Manages courses, assignments, enrollments, and grades within Canvas using the Canvas API.

Design & Creative ToolsRemoteTypeScript★ 101

3D Model Context Protocol

Provides a unified TypeScript interface for LLMs to interact with various 3D software applications.

Design & Creative ToolsPython★ 16

Figma To Vue

Generates Vue 3 components from Figma designs, adhering to Hostinger's design system.

Design & Creative ToolsTypeScript★ 10

Cursor Talk To Figma

Enables Cursor AI to interact with Figma, allowing programmatic design modification and data extraction.

Design & Creative ToolsTypeScript★ 3