# Storybook MCP for AI Agents AI Agent Connect

> Storybook MCP connects your AI client to your design system. It lets your agent browse components, check props, and get preview links without you having to leave your editor. It's the fastest way to bridge the gap between your UI documentation and your actual code.

## Overview
- **Category:** loved-by-devs
- **Price:** Free
- **Endpoint:** https://edge.vinkius.com/vk_preview_N8DIzTVbC8oiUJWVxiYw2lmtiUmexGVjlMrCUmAS/ai-agent-connect
- **Tags:** ui-components, design-system, component-library, frontend-development, ui-testing, documentation

## Description

Stop jumping back and forth between your code editor and a browser tab every time you need to check a button's props or see if a component already exists. This Connector lets your AI actually see what's in your design system. Instead of copy-pasting documentation into a chat, your agent can query the component library directly. You can ask it to find a specific UI element, grab its default arguments, or even get a link to a live preview sandbox. It handles the heavy lifting of navigating the design system's structure so you can focus on building. Because it plugs into the Vinkius catalog, it makes managing these design system connections much easier than setting up manual scrapers. You get a direct line of sight into your UI library, which means your agent writes code that actually matches your team's standards. It's about having the right information in your context at the right time without the constant friction of manual lookups.

## Tools

### extract_docs_guidance
Retrieves the specific path or notes on how to read a component's docs. It helps you find the right documentation for your team.

### get_preview_url
Creates a link to an isolated sandbox preview for a component. You can click this to see the component live in a browser.

### get_story_args
Pulls the metadata and default arguments for a specific component. It gives your AI the exact prop signatures it needs to write code.

### list_categories
Lists the top-level folders like Atoms or Molecules in your design system. This helps you understand the overall folder structure.

### list_components
Shows all the UI components available in your Storybook library. You can use this to see everything your team has built.

### search_components
Finds specific components based on keywords you type in. This is the fastest way to see if a component already exists.

## Prompt Examples

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

**Response:** 
```
Scanning Storybook index...

**Discovered UI Matches**: 
- `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).
```

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

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

**Categories**: 
- `Atoms` 
- `Molecules` 
- `Layouts` 

**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...

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

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

## Capabilities

### Browse design system categories
See the high-level folder structure of your UI library.

### Search for specific UI components
Find existing components using keywords to avoid building duplicates.

### Get metadata and default props
Retrieve exact prop signatures and default values for any component.

### Generate sandbox preview links
Get a direct link to an isolated preview of a component.

### Extract documentation guidance
Get the specific paths and notes for reading component docs.

## Use Cases

### Checking a Button's props
A developer asks the agent to find the Primary Button and show its props. The agent uses get_story_args to return the exact labels and variants.

### Finding a missing component
A developer wants to see if a 'DatePicker' exists. The agent uses search_components to scan the whole library and reports the results.

### Getting a preview
A designer wants to see the new layout. The agent uses get_preview_url to provide a link to the sandbox iframe immediately.

### Mapping the library
A new hire asks for the design system structure. The agent uses list_categories to show the Atoms, Molecules, and Organisms folders.

## Benefits

- Stop manual prop checking. Use get_story_args to let your agent see exact types and defaults without you having to hunt them down.
- Prevent duplicate code. Use search_components to see if a component exists before you build a new one from scratch.
- Faster previews. Use get_preview_url to see a live sandbox without leaving your terminal or IDE.
- Better navigation. Use list_categories to give your agent a map of your UI library structure so it can find things faster.
- Accurate docs. Use extract_docs_guidance to pull the right documentation paths for your team and ensure your agent follows the rules.

## How It Works

The bottom line is you get your design system's data directly into your AI's context so you can stop guessing what components to use.

1. Add the Storybook MCP to your AI client and provide your deployed Storybook URL.
2. The Connector reads your Storybook's static index file to map out your entire component hierarchy.
3. Ask your agent to find components, check props, or get preview links to see them in action.

## Frequently Asked Questions

**What is the Storybook MCP?**
It's a way to connect your Storybook design system directly to your AI client. It lets your agent see your components, props, and documentation so it can help you write code that matches your team's standards.

**How do I connect my design system to my AI?**
You just need to provide your Storybook URL in the connection settings. The Connector then reads your Storybook's index to make your components available to your agent.

**Can my AI agent see my component props?**
Yes, it can. Your agent can pull the exact metadata and default arguments for any component in your library, which helps it write more accurate code.

**Does this work with my specific Storybook instance?**
It works with any deployed Storybook instance that generates a static index. This gives your agent a direct line of sight into your specific UI components.

**How does this help prevent duplicate UI components?**
By letting your agent search your existing library before you start building, you can quickly see if a component already exists, saving you from creating duplicates.

**Can I get preview links for components?**
Yes, the Connector can generate links to isolated sandbox previews. This lets you see the component live in a browser without having to navigate your full Storybook site.

**Does it require API keys or OAuth?**
No. The Connector reads the static `index.json` file generated by your Storybook build. As long as the agent can reach the `STORYBOOK_URL` over the network, no additional authentication is needed.

**Is the integration read-only?**
Yes. The AI reads component metadata, props, and documentation from the static index. It cannot modify actual React, Vue, or Angular source files through this integration.

**Which UI frameworks are supported?**
Any framework supported by Storybook — React, Vue, Angular, Svelte, Web Components, and more. The Connector reads the universal `index.json` format, which is framework-agnostic.