What is the Story UI MCP server?
Story UI adds an AI workspace to Storybook and exposes eight MCP tools. An AI coding agent can generate and update stories, list components and stories and read component props, so screens use the components your team actually ships, and each story is rendered and checked before you see it.
Story UI adds a workspace to the Storybook you already have. You describe a screen and it writes a real .stories.tsx file using your design system's components. The result shows in Storybook's own preview with your providers, theme and tokens.
The MCP server exposes that same generation loop to an AI coding agent. Both its stdio and remote transports call the Story UI HTTP server, which must be running from your project directory.
What changes in your agent's output
- Components are discovered from your project, so the agent cannot invent a component you do not own, and props are checked against real types.
- Output is a story file in your repository, ready for review and a pull request.
- Stories are rendered in a real browser and measured for overflow, overlap, blank areas and broken layout, then regenerated if they fail.
- A direct inspector edits a property without calling a model at all.
How the setup works
- In your Storybook project, run the init command, then the check command to confirm the install works.
- Start Storybook and Story UI together, then add the MCP entry to your client.
- Ask the agent to generate or update a story using your components.
Who the Story UI MCP server is for
Best for
- Design system teams with a React and TypeScript component library who want agents to use it correctly.
- Product designers exploring whole screens in the real system without waiting on engineering.
- Teams that pair it with a knowledge server such as Design Systems MCP and a code-side review via a critique skill.
Not for
- Projects without Storybook. It requires Storybook 10 or newer, and the other frameworks get only the classic panel.
- Reading design files. The Figma MCP server covers Figma, while Story UI works from code.
- Setups with no model provider. An Anthropic, OpenAI or Google Gemini key is needed.
Use it with UiChemy
Story UI produces component stories for a design system you host in Storybook. For a WordPress site, UiChemy builds the pages: Figma to WordPress turns a design into editable blocks, and Composer edits them inside Elementor or Gutenberg. Click Get Started on uichemy.com.
Connect Story UI MCP Server: Storybook Screens in Your Design System to your AI client
npx @tpitre/story-ui@latest initInstall into Storybook
In your Storybook project run
npx @tpitre/story-ui@latest init, thennpx story-ui check. It names anything to fix. You need Storybook 10 or newer, Node 20 or newer and a provider key.Start the servers
Run
npm run storybook-with-uiso Storybook and Story UI start together. The MCP stdio process finds the HTTP server on port 4001 by default.Add the MCP entry
Paste the entry above into your client's MCP config and set
STORY_UI_CWDto your project path.Remote option
For a hosted server, use the Streamable HTTP endpoint at
/mcp-remote/mcp. Claude Code can add it withclaude mcp add --transport http story-ui <url>/mcp-remote/mcpplus an Authorization header in token mode.Optional: Playwright
Run
npx playwright install chromiumso Story UI can render and check its own work.
Client configuration
{
"mcpServers": {
"story-ui": {
"command": "npx",
"args": ["@tpitre/story-ui", "mcp"],
"env": { "STORY_UI_CWD": "/path/to/your/project" }
}
}
}Endpoints and ports
npx @tpitre/story-ui mcpNeeds the HTTP server running<server>/mcp-remote/mcpStreamable HTTP, Bearer token in token mode4001Overridable through STORY_UI_HTTP_PORT or PORThttps://github.com/southleft/story-uiSee docs/MCP_INTEGRATION.mdWhat you can do with it
- Only your componentsComponents come from type declarations, local source and Storybook's index, so stories cannot use components you do not own.
- Output is a real fileEvery generation is a
.stories.tsxfile in your repository and Storybook, not a mockup or sandbox. - Self-checking storiesStatic checks, a real-browser render, layout and accessibility checks and a visual review run before you see the result.
- Direct property editingClick an element and the inspector reads its real props and rewrites one attribute with no model call.
- Version history and diffEvery version is kept and can be restored, and a Changes view shows the diff.
- Git handoffOne click commits the story to a new branch and can open a pull request, never on your current branch.
Tools it exposes
test-connection
Checks that the Story UI server is reachable.
generate-story
Generates a new Storybook story from a description.
update-story
Edits an existing story.
list-components
Lists the components discovered in your design system.
list-stories
Lists the stories that exist in the project.
get-story
Returns the contents of one story.
delete-story
Deletes a story.
get-component-props
Returns the real props of a component.
Frequently asked questions
What is the Story UI MCP server?
It is the MCP interface to Story UI, a Storybook workspace that generates stories from your own design system. It exposes eight tools so an AI coding agent can generate, update, list, read and delete stories and read component props.
How do I install Story UI?
In a Storybook project run npx @tpitre/story-ui@latest init, then npx story-ui check, then npm run storybook-with-ui. You need Storybook 10 or newer, Node 20 or newer, a React and TypeScript design system and one provider API key.
Does the MCP server run on its own?
No. Both the stdio and the Streamable HTTP transports call the Story UI HTTP server, which must be running from your project directory. The stdio process finds it through an environment variable or the default port 4001.
Which AI providers does it support?
The README names Anthropic, OpenAI and Google Gemini, and says one key is enough. The key lives in a .env file, and init adds .env to .gitignore when the project has one, so it is not committed.
How does it check its own work?
Code is checked statically against your design system, then each story renders in a real browser and is measured for overflow, overlap, blank areas and accessibility. Failures go back to the model, with up to three correction attempts on static problems.
Can it work with a Figma-based workflow?
It works from code, not from Figma files. Teams often use a Figma MCP server for design context and this one for stories that match the shipped components, then run an accessibility skill on the result.
What license does it use?
The repository is MIT licensed, with an MIT badge and a license section in the README. GitHub detects MIT as well, so you can use it in commercial projects under the usual MIT terms.