AI Plugin IndexUI components
Storybook MCP servers and skills
There are 35 ways to connect Storybook to Claude, ChatGPT, Cursor and other AI assistants: 13 MCP servers and 22 skills. The most used is Storybook MCP (91k GitHub stars).
Best Storybook MCP servers, compared →Most used
Storybook MCP
storybookjs
94MCP server that serves knowledge about your components based on your Storybook stories and documentation
AAA
Storybook MCP Addonstorybookjs
84Help agents automatically write and test stories for your UI components.
BAB
storybook-initstorybookjs
82Use when adding Storybook to a project that does not have Storybook configured yet.
AAA
storybook-upgradesanity-io
79Use this skill when Storybook exists but needs an upgrade.
AAB
Storybook Addon Oversight
rachelslurs
78See what your agent can and can't see. Diagnoses silent failures in your Storybook MCP manifest.
AAC
aikit-storybookgravity-ui
68AIKit Storybook conventions — Docs.mdx and *.stories.tsx structure, story types (Playground, Default, Variants, Edge Cases), decorators. Use when creating or editing any file under a component's __stories__/ directory.
AAB
MCP servers (13)
- 1Storybook MCP storybookjsMCP server that serves knowledge about your components based on your Storybook stories and documentation94
- 2Storybook MCP Addon storybookjs · Developer toolsHelp agents automatically write and test stories for your UI components.84
- 3Storybook Addon Oversight rachelslurs · AI and LLM toolsSee what your agent can and can't see. Diagnoses silent failures in your Storybook MCP manifest.78
- 4MCP Storybook viantonugroho11MCP server for browsing and searching Storybook component libraries61
- 5Storybook MCP raksbisht · Search and webMCP server that connects to any Storybook. Browse components, fetch docs and examples, search stories, and capture screenshots.60
- 6Storybook MCP mcpland · Knowledge and memoryA Model Context Protocol (MCP) server for Storybook.59
- 7Storybook Addon Angular Manifest ethriel3695Storybook addon for Angular component manifest generation with Compodoc integration57
- 8Storybook MCP Server stefanoamorelli · AI and LLM toolsMCP server for Storybook - provides AI assistants access to components, stories, properties and screenshots51
- 9Storybook MCP akfmMCP server for Storybook34
- 10MCP Storybook dannyhw · Knowledge and memoryA Model Context Protocol server for interacting with Storybook.31
- ADYour product hereThis row is seen by people browsing Storybook tools. Book it from $249 a month.See prices →
- 11Dannyhw MCP Storybook chatflowdev · Knowledge and memoryA Model Context Protocol server for interacting with Storybook.30
- 12Dannyhw Storybook chatflowdev · Knowledge and memoryA Model Context Protocol server for interacting with Storybook.27
- 13Storybook Addon MCP App mkl-techStorybook addon for mocking MCP App React integrations in local stories.23
Skills (22)
- 1storybook-init storybookjsUse when adding Storybook to a project that does not have Storybook configured yet.82
- 2storybook-upgrade sanity-ioUse this skill when Storybook exists but needs an upgrade.79
- 3aikit-storybook gravity-ui · Documents and filesAIKit Storybook conventions — Docs.mdx and *.stories.tsx structure, story types (Playground, Default, Variants, Edge Cases), decorators. Use when creating or editing any file under a component's __stories__/ directory.68
- 4using-storybook Asvarox · DesignConventions for this project''s Storybook — how stories are filed under Foundations / Components / Game, and the rule that any change to the design language must be reflected in the using-tailwind skill. Use when adding or changing a story, or when changing a design token.68
- 5storybook-manager NederlandseDigitaleDienstManage multiple Storybook instances across worktrees. Use when starting, stopping, or checking status of Storybook dev servers.60
- 6ui-screenshot-to-storybook-product harrychuang · DesignTurn screenshots or Figma exports into token-backed Storybook components and composed product screens.52
- 7ralph-playwright:storybook-test cdubiel08 · Browser automationRun Storybook 9 component tests (interaction + a11y) using Vitest browser mode or legacy test-runner. Detects which runner is installed and adapts. Optionally uses Storybook MCP to validate component usage. Requires Storybook 9+ with @storybook/addon-vitest or @storybook/test-runner.38
- 8anygen-storybook AnyGenIO · MarketingUse this skill any time the user wants to create visual stories, illustrated narratives, or storybook content. This includes: storybooks, comics, children's books, illustrated guides, step-by-step visual tutorials, brand stories, product stories, picture books, graphic novels, and visual explainers. Also trigger when: user says 做个绘本, 画个故事, 做个漫画, 做个图文教程, 做个品牌故事. If a visual story or illustrated content needs to be created, use this skill.37
- 9storybook-upgrade gabrielmoreira · Developer toolsUpgrade Storybook to a specific version (canary or release). Use this when upgrading Storybook packages in an external app, reproduction, or test project.33
- 10storybook gabrielmoreira · Developer toolsStorybook configuration, stories, addons, interaction testing, and documentation.33
- 11testing-storybook markafitzgerald1 · Browser automationGuidance on using Playwright in Storybook test components for interaction testing.33
- 12Storybook and Visual Regression Gate janpereira-devDefine story coverage, deterministic fixtures, screenshot baselines, interaction states, and approval rules for component changes.33
- 13storybook-upgrade gabrielmoreiraUse this skill when Storybook exists but needs an upgrade.30
- 14storybook liquidsnake007Use when writing or reviewing Storybook stories (`.stories.tsx`) for React components.28
- 15ambre-storybook mohamedMok · Documents and filesWrites Ambre Storybook stories for web components. Use when adding stories, controls, themes, or files in apps/storybook.26
- 16storybook-workshop Nether403Isolated UI component workshop playbook for automated state matrix generation and visual quality auditing.25
- 17storybook-solidjs worxbend · Documents and filesGenerates Solid.js Storybook story files (*.story.tsx). Use when creating or editing Storybook stories for Solid.js components22
- 18frontend-storybook-component-documentation Ditto190Imported TRAE skill from frontend/Storybook_Component_Documentation.md22
- 19storybook AitingLee · Documents and filesHow to write Storybook stories: file structure, required setup, Story examples21
- 20storybook-component-documentation jyjeanne · DesignTo develop, test, and document UI components in isolation from the main application. Use when: Building a Design System; Visual testing; Collaborating with designers.21
- 21storybook-design-system Damimd10Define Storybook documentation, story composition, controls, and governance for reusable UI components in this workspace.18
- 22storybook-design-system saschadudkin-sketch · DesignUse when changing DomHub Storybook stories, design-system components, visual states, component documentation, a11y checks, or UI governance around reusable frontend components.18
Questions
Is there an official Storybook MCP server?
Check the publisher on each listing: servers published by Storybook itself are the official ones. The most used Storybook server here is Storybook MCP by storybookjs.
How do I connect Storybook to Claude?
Pick a server below, open its page and copy the install command for Claude Code, or the config block for Claude Desktop. Most Storybook servers need an API key or token from your Storybook account.