MCP server · Developer tools
Storybook MCP server
by storybookjs
Lets your AI write and check Storybook stories for your UI components.
This is a helper that connects your AI assistant to Storybook, the tool teams use to build and preview user interface components. Once it is set up, your AI can help write stories and test them while you work. It is handy for anyone who builds or maintains a design system or component library.
What is an MCP server? The 30-second version
On its own, your AI can only chat with you. An MCP server is a small helper program that gives your AI a new skill or a connection to an app. This one connects your AI to Storybook, so it can work with your components and their stories. You ask in plain words, and the AI uses this helper to do the work inside Storybook for you.
What this MCP server does
You ask your AI to write or check a story for one of your UI components. The AI uses this helper to reach your running Storybook setup. The helper passes the request along and Storybook responds with what it knows about your components. You get the story text, feedback, or a result back in your chat. It is meant to fit into your normal Storybook workflow, not replace it.
Click to zoomWhat you can do with it
- Write new stories for your UI components
- Check existing stories for problems
- Suggest changes to a story that is not working
- Help you test how a component behaves in Storybook
- Work alongside your normal Storybook setup
Try asking your AI
- “Write a Storybook story for my Button component”
- “Check my Card stories and tell me what is broken”
- “Add a story that shows the Alert component in an error state”
- “Help me test the Modal component in Storybook”
What it gives back to you
You get answers and story text back in your chat, written in plain language. Depending on what you ask, it may return a new story file, a list of issues it found, or suggestions for changes. The helper talks to your Storybook setup, so results reflect your real components.
Before you start
What you need
- A Storybook project set up for your UI components
- The Storybook MCP addon installed in that project
- Your AI assistant connected to the addon's endpoint
Good to know
It works with your real Storybook project, so review any story changes before saving them.
Install it with your AI
Add Storybook MCP server to your AI, no technical skills needed
You don't install anything by hand. You copy one prompt, paste it into an AI that can work on your computer, and it checks, installs and connects the server for you, asking you when it needs something.
Sign in to get the install prompt
Members get a ready-made prompt that lets the Claude desktop app check Storybook MCP server, install it and connect it for them, step by step. You don't need any technical skills: you copy, paste and answer a few questions. Your connected AI can also find and install any of the 4,066 MCP servers here for you.
Who it's for
Frontend developers, designers who work with components, and anyone maintaining a UI component library or design system.
