# Storybook MCP

> Storybook MCP connects your AI client directly to your design system's component library. You can programmatically browse every UI element, inspect specific components for their properties and metadata, locate documentation paths, and generate isolated preview URLs—all without leaving your coding environment.

## Overview
- **Category:** loved-by-devs
- **Price:** Free
- **Tags:** ui-components, design-system, component-library, frontend-development, ui-testing, documentation

## Description

Your AI agent can now treat your Storybook instance like a functional part of your codebase. Instead of opening a dozen tabs to check component props or find the source code structure, you just ask it. It maps out your entire design system—from top-level categories down to individual atoms. You'll stop wasting time jumping between documentation sites and your IDE. This MCP lets you query component libraries for default arguments and validate complex prop signatures instantly. Whether you're mapping out the overall architecture using Vinkius, or just trying to confirm if a Button component supports an 'isLoading' state, the data is right there in your context. You get immediate feedback on how components are structured, what source paths they rely on, and even isolated sandbox previews for testing changes before committing any code.

## Tools

### extract_docs_guidance
Gets guidance on how to read documentation for a component by extracting its local source code paths.

### get_preview_url
Generates the unique URL needed to run an isolated sandbox preview of a component's visual state.

### get_story_args
Retrieves detailed metadata and default arguments, such as required props, for a specific UI component.

### list_categories
Lists the top-level structural categories (like Atoms or Molecules) that organize your design system.

### list_components
Provides a complete list of all available UI components within the entire Storybook library.

### search_components
Searches for specific components using keywords or partial names across the design system index.

## Prompt Examples

**Prompt:** 
```
Search for Button components in my Storybook and show their props.
```

**Response:** 
```
Scanning Storybook index...
**Discovered UI Matches (`search_components`)**:
- `Button/Primary-Action` (ID: comp-btn-01)
- `Button/Ghost` (ID: comp-btn-02)

Inspecting props via `get_story_args` on `Button/Primary-Action`:
- **Props**: `label` (string), `isActive` (boolean), `variant` (primary/secondary), `onClick` (function).
I can generate an isolated preview URL if needed.
```

**Prompt:** 
```
List the categories in the design system and browse the components rendered.
```

**Response:** 
```
Mapping the interface structure...

**Categories (`list_categories`)**:
- `Atoms`
- `Molecules`
- `Layouts`

**Components (`list_components`)**:
- `Atoms/Input`
- `Atoms/Tooltip`
- `Layouts/Sidebar`

Documentation endpoints have been dynamically assembled.
```

**Prompt:** 
```
Extract the local source code paths from the index for the Navigation Bar component and generate an iframe preview.
```

**Response:** 
```
Checking local references logically...

**Source Paths (`extract_docs_guidance`)**:
Resolved path: `./src/components/NavBar.tsx`. Documentation notes suggest importing `NavProps` directly.

**Preview Generated (`get_preview_url`)**:
The isolated sandbox iframe is ready at `//storybook-instance/iframe.html?id=layout-navbar--default`.
```

## Capabilities

### Map design system structure
List the top-level categories and folder organization of your component library.

### Search for components by name
Find specific UI elements within the Storybook based on a keyword or partial name.

### Get component metadata
Retrieve detailed information, including default arguments and expected properties, for any given component.

### Generate sandbox previews
Create temporary, isolated URLs so you can safely preview how a component will look before implementing it.

### Locate source documentation paths
Extract local source code file paths and implementation notes directly from the Storybook index.

## Use Cases

### A developer needs to confirm prop requirements for an existing widget.
The engineer asks the agent: 'What are the required props for the user avatar component?' The MCP uses `get_story_args` and immediately returns a list of properties, their types (string, boolean), and whether they have default values. No opening documentation pages needed.

### A designer wants to see how a component looks with different states.
The designer prompts the agent: 'Show me an isolated preview of the primary button in its disabled state.' The MCP generates a specific, temporary `get_preview_url`, allowing them to validate the visual output without touching the staging environment.

### A new hire needs to understand the component hierarchy.
The agent runs `list_categories` and maps out 'Atoms,' 'Molecules,' and 'Layouts.' The new hire can then use `list_components` on a specific category, like 'Atoms/Input' to see every available input variant.

### A developer needs to update documentation for a core component.
The engineer asks the agent to find the source code path and usage notes. The MCP uses `extract_docs_guidance` to locate the file (`./src/components/NavBar.tsx`) and pulls implementation details, which are then copied directly into the README.

## Benefits

- Avoids context switching. You don't have to leave your chat or IDE to check if a prop exists or what its type is; the agent pulls that info directly from Storybook.
- Reduces code duplication. By using tools like `search_components` and `get_story_args`, you ensure every new feature uses an existing, tested component rather than building one from scratch.
- Speeds up documentation maintenance. Technical writers can use the MCP to automatically pull source paths via `extract_docs_guidance`, keeping guides current with zero manual copy-pasting.
- Safe testing environment. Generating a preview URL using `get_preview_url` lets you test component changes in an isolated iframe before committing code, catching visual bugs early.
- Global architectural view. Use `list_categories` to map the entire design system structure at once, giving new team members a bird's-eye view of all available building blocks.

## How It Works

The bottom line is you get component-level intelligence fed directly into your chat or IDE prompt.

1. Install the Storybook MCP module into your AI client's configuration.
2. Provide your deployed Storybook instance URL in the connection parameters.
3. Ask your agent to perform a task, like 'Find all input components and list their required arguments.' The tool executes the necessary lookups and returns structured data.

## Frequently Asked Questions

**How do I use Storybook MCP to find out what props a component needs?**
You ask your agent to check a specific component. The MCP uses `get_story_args` and returns a clean list of all necessary properties, their data types, and whether they have default values.

**Can Storybook MCP help me see how a component looks before coding it?**
Yes. You prompt the agent for a preview URL. It runs `get_preview_url` to generate an isolated sandbox iframe, letting you validate the visual output safely.

**Which tool should I use if I want to see all available components?**
Use `list_components`. This function gives you a comprehensive inventory of every single UI element defined in your entire design system, organized by category.

**Does Storybook MCP help with documentation linking?**
Yes. You can use `extract_docs_guidance` to pull the local source code paths and relevant implementation notes directly from the index, saving you manual file searching.

**What if I only know a keyword for a component?**
No problem. Use `search_components`. It finds components by name or partial keywords across the whole library, narrowing down your focus quickly.