Does it require API keys or OAuth?

No. The MCP 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 MCP reads the universal `index.json` format, which is framework-agnostic.

Storybook MCP Server for AutoGen 6 tools — connect in under 2 minutes

Name: Storybook
Availability: InStock
Author: Vinkius

microsoft.github.io/autogen/docs/tools/mcp-tools

Built by Vinkius GDPR 6 Tools Framework

Microsoft AutoGen enables multi-agent conversations where agents negotiate, delegate, and execute tasks collaboratively. Add Storybook as an MCP tool provider through Vinkius and every agent in the group can access live data and take action.

Get MCP Server for AI Agents

ASK AI ABOUT THIS MCP SERVER

Open in ChatGPT Open in Claude Open in Perplexity

Vinkius supports streamable HTTP and SSE.

python

import asyncio
from autogen_agentchat.agents import AssistantAgent
from autogen_ext.tools.mcp import McpWorkbench

async def main():
    # Your Vinkius token. get it at cloud.vinkius.com
    async with McpWorkbench(
        server_params={"url": "https://edge.vinkius.com/[YOUR_TOKEN_HERE]/mcp"},
        transport="streamable_http",
    ) as workbench:
        tools = await workbench.list_tools()
        agent = AssistantAgent(
            name="storybook_agent",
            tools=tools,
            system_message=(
                "You help users with Storybook. "
                "6 tools available."
            ),
        )
        print(f"Agent ready with {len(tools)} tools")

asyncio.run(main())

Fully ManagedVinkius Servers

60%Token savings

High SecurityEnterprise-grade

IAMAccess control

EU AI ActCompliant

DLPData protection

V8 IsolateSandboxed

Ed25519Audit chain

<40msKill switch

Stream every event to Splunk, Datadog, or your own webhook in real-time

* Every MCP server runs on Vinkius-managed infrastructure inside AWS - a purpose-built runtime with per-request V8 isolates, Ed25519 signed audit chains, and sub-40ms cold starts optimized for native MCP execution. See our infrastructure

About Storybook MCP Server

Seamlessly integrate your Storybook design system into your conversational AI workflows. Empower front-end engineers and designers to instantly query component libraries, retrieve prop signatures, and extract documentation paths natively within their terminal. By connecting your deployed Storybook instance directly to your AI context, you eliminate context switching, prevent duplicate UI implementations, and accelerate component-driven architecture development across your entire front-end ecosystem.

AutoGen enables multi-agent conversations where agents negotiate, delegate, and collaboratively use Storybook tools. Connect 6 tools through Vinkius and assign role-based access. a data analyst queries while a reviewer validates, with optional human-in-the-loop approval for sensitive operations.

What you can do

Design System Discovery — Systematically map your component folder structures invoking list_categories and browse all rendered elements across your UI utilizing list_components.
Component Inspection — Quickly lookup predefined interface elements utilizing search_components to avoid code duplication, and retrieve component properties and metadata via get_story_args.
Implementation Guidance — Extract local source code paths directly from the Storybook index using extract_docs_guidance to efficiently evaluate implementation logic.
Visual Previews — Generate interactive, isolated sandbox iframe endpoints by running get_preview_url to safely preview changes before integrating.

The Storybook MCP Server exposes 6 tools through the Vinkius. Connect it to AutoGen in under two minutes — no API keys to rotate, no infrastructure to provision, no vendor lock-in. Your configuration, your data, your control.

How to Connect Storybook to AutoGen via MCP

Follow these steps to integrate the Storybook MCP Server with AutoGen.

Install AutoGen

Run pip install "autogen-ext[mcp]"

Replace the token

Replace [YOUR_TOKEN_HERE] with your Vinkius token

Integrate into workflow

Use the agent in your AutoGen multi-agent orchestration

Explore tools

The workbench discovers 6 tools from Storybook automatically

Why Use AutoGen with the Storybook MCP Server

AutoGen provides unique advantages when paired with Storybook through the Model Context Protocol.

Multi-agent conversations: multiple AutoGen agents discuss, delegate, and collaboratively use Storybook tools to solve complex tasks

Role-based architecture lets you assign Storybook tool access to specific agents. a data analyst queries while a reviewer validates

Human-in-the-loop support: agents can pause for human approval before executing sensitive Storybook tool calls

Code execution sandbox: AutoGen agents can write and run code that processes Storybook tool responses in an isolated environment

Storybook + AutoGen Use Cases

Practical scenarios where AutoGen combined with the Storybook MCP Server delivers measurable value.

Collaborative analysis: one agent queries Storybook while another validates results and a third generates the final report

Automated review pipelines: a researcher agent fetches data from Storybook, a critic agent evaluates quality, and a writer produces the output

Interactive planning: agents negotiate task allocation using Storybook data to make informed decisions about resource distribution

Code generation with live data: an AutoGen coder agent writes scripts that process Storybook responses in a sandboxed execution environment

Storybook MCP Tools for AutoGen (6)

These 6 tools become available when you connect Storybook to AutoGen via MCP:

extract_docs_guidance

Get guidance on how to read documentation for a component

get_preview_url

Generate the preview URL for a component sandbox

get_story_args

Get metadata and default arguments for a specific component

list_categories

g., Atoms, Molecules, Organisms). List the top-level categories and folder structure of the Design System

list_components

You can optionally filter by category folder. List all UI components available in the Storybook Design System

search_components

Search for specific components by name or keyword

Example Prompts for Storybook in AutoGen

Ready-to-use prompts you can give your AutoGen agent to start working with Storybook immediately.

"Search for Button components in my Storybook and show their props."

"List the categories in the design system and browse the components rendered."

"Extract the local source code paths from the index for the Navigation Bar component and generate an iframe preview."

Troubleshooting Storybook MCP Server with AutoGen

Common issues when connecting Storybook to AutoGen through the Vinkius, and how to resolve them.

McpWorkbench not found

Install: pip install "autogen-ext[mcp]"

Storybook + AutoGen FAQ

Common questions about integrating Storybook MCP Server with AutoGen.

How does AutoGen connect to MCP servers?

Create an MCP tool adapter and assign it to one or more agents in the group chat. AutoGen agents can then call Storybook tools during their conversation turns.

Can different agents have different MCP tool access?

Yes. AutoGen's role-based architecture lets you assign specific MCP tools to specific agents, so a querying agent has different capabilities than a reviewing agent.