connect
Connect to a Storybook URL and return connection status. Required before other tools.
LABSCO SUMMARY
The connection is server state rather than a per-call argument, so this is pointed at one Storybook at a time and connect has to come first.
What comes back is the design system's own material — navigation, documented examples, component source — plus a screenshot, which is how you check that a story renders the way its docs claim. That combination is what makes it useful to an agent writing UI against components someone else built: find the component that already exists, read the props and examples the team documented, and look at it before copying a pattern. Nothing writes back, so the Storybook stays the source of truth.
What it is
A reader for a running Storybook instance: connect to its URL, then browse the navigation, search components, pull documentation and capture a rendering.
What you get
- connect takes a Storybook url and returns connection status; its description marks it as required before other tools.
- list walks the Storybook navigation of components and stories, narrowed by category and expanded with full.
- search finds components by name or by path, for when the navigation label and the code path differ.
- get_docs returns documentation, code examples and content for a component or story at a given path, with format and full controlling how much comes back.
- screenshot captures the rendering of a component or story at a path.
Requirements
A running Storybook the server can reach over HTTP, at the url you hand to connect. No account or key is configured.
Setup effort
One command — npx -y @raksbisht/storybook-mcp
USE CASES
01
Writing UI against a design system you did not build
Attach to the team's Storybook, find the component by whatever name you know it under, and read the props and examples its authors documented.
02
Finding out whether the component already exists
Browse the navigation the way a developer would before writing anything new, narrowing to the category the component would live in.
03
Checking a story renders the way its docs claim
Read what the documentation says the component does, then capture the rendering and compare them rather than trusting the prose.
5 tools
Counted once with only startup setup. Other versions, modes or optional credentials may expose a different list.
get_docs
Get documentation, code examples, and content for a component or story.
list
List components and stories in the Storybook navigation.
screenshot
Take a screenshot of a component or story.
search
Search for components by name or path.
BEFORE YOU INSTALL
What to know first
Tools you get
5 tools when we connected.
Requires
npx on PATH
CONTEXT COST
Light Standing cost
Rated by the size of the 5 tool definitions that ride along on every turn, not by how many there are
INSTALLATION
Connect your client
Add the block to your client, or run the command directly.
Server setup
Configuration file
JSON
{
"mcpServers": {
"storybook-mcp": {
"command": "npx",
"args": [
"-y",
"@raksbisht/storybook-mcp"
]
}
}
}npx
TERMINAL
npx -y @raksbisht/storybook-mcp
