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 Google ADK 6 tools — connect in under 2 minutes

Name: Storybook
Availability: InStock
Author: Vinkius

google.github.io/adk-docs/tools/mcp-tools

Built by Vinkius GDPR 6 Tools SDK

Google Agent Development Kit (ADK) is Google's framework for building production AI agents. Add Storybook as an MCP tool provider through Vinkius and your ADK agents can call every tool with full schema introspection.

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

from google.adk.agents import Agent
from google.adk.tools.mcp_tool import McpToolset
from google.adk.tools.mcp_tool.mcp_session_manager import (
    StreamableHTTPConnectionParams,
)

# Your Vinkius token. get it at cloud.vinkius.com
mcp_tools = McpToolset(
    connection_params=StreamableHTTPConnectionParams(
        url="https://edge.vinkius.com/[YOUR_TOKEN_HERE]/mcp",
    )
)

agent = Agent(
    model="gemini-2.5-pro",
    name="storybook_agent",
    instruction=(
        "You help users interact with Storybook "
        "using 6 available tools."
    ),
    tools=[mcp_tools],
)

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.

Google ADK natively supports Storybook as an MCP tool provider. declare Vinkius Edge URL and the framework handles discovery, validation, and execution automatically. Combine 6 tools with Gemini's long-context reasoning for complex multi-tool workflows, with production-ready session management and evaluation built in.

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 Google ADK 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 Google ADK via MCP

Follow these steps to integrate the Storybook MCP Server with Google ADK.

Install Google ADK

Run pip install google-adk

Replace the token

Replace [YOUR_TOKEN_HERE] with your Vinkius token

Create the agent

Save the code above and integrate into your ADK workflow

Explore tools

The agent will discover 6 tools from Storybook via MCP

Why Use Google ADK with the Storybook MCP Server

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

Google ADK natively supports MCP tool servers. declare a tool provider and the framework handles discovery, validation, and execution

Built on Gemini models, ADK provides long-context reasoning ideal for complex multi-tool workflows with Storybook

Production-ready features like session management, evaluation, and deployment come built-in. not bolted on

Seamless integration with Google Cloud services means you can combine Storybook tools with BigQuery, Vertex AI, and Cloud Functions

Storybook + Google ADK Use Cases

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

Enterprise data agents: ADK agents query Storybook and cross-reference results with internal databases for comprehensive analysis

Multi-modal workflows: combine Storybook tool responses with Gemini's vision and language capabilities in a single agent

Automated compliance checks: schedule ADK agents to query Storybook regularly and flag policy violations or configuration drift

Internal tool platforms: build self-service agent platforms where teams connect their own MCP servers including Storybook

Storybook MCP Tools for Google ADK (6)

These 6 tools become available when you connect Storybook to Google ADK 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 Google ADK

Ready-to-use prompts you can give your Google ADK 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 Google ADK

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

McpToolset not found

Update: pip install --upgrade google-adk

Storybook + Google ADK FAQ

Common questions about integrating Storybook MCP Server with Google ADK.

How does Google ADK connect to MCP servers?

Import the MCP toolset class and pass the server URL. ADK discovers and registers all tools automatically, making them available to your agent's tool-use loop.

Can ADK agents use multiple MCP servers?

Yes. Declare multiple MCP tool providers in your agent configuration. ADK merges all tool schemas and the agent can call tools from any server in a single turn.

Which Gemini models work best with MCP tools?

Gemini 2.0 Flash and Pro models both support function calling required for MCP tools. Flash is recommended for latency-sensitive use cases, Pro for complex reasoning.