Bring Ui Components
to Google ADK
Create your Vinkius account to connect Storybook to Google ADK and start using all 6 AI tools in minutes. Fully managed, enterprise secure, and ready to use without writing a single line of code. No hosting, no server setup — just connect and start using.
GDPR Free for SubscribersCompatible with every major AI agent and IDE
Gemini
What is the 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.
What you can do
- Design System Discovery — Systematically map your component folder structures invoking
list_categoriesand browse all rendered elements across your UI utilizinglist_components. - Component Inspection — Quickly lookup predefined interface elements utilizing
search_componentsto avoid code duplication, and retrieve component properties and metadata viaget_story_args. - Implementation Guidance — Extract local source code paths directly from the Storybook index using
extract_docs_guidanceto efficiently evaluate implementation logic. - Visual Previews — Generate interactive, isolated sandbox iframe endpoints by running
get_preview_urlto safely preview changes before integrating.
How it works
- Install the Storybook MCP module into your local AI configuration.
- In the connection parameters, simply provide your deployed
STORYBOOK_URL. - Storybook generates a static
index.jsoninherently; the MCP natively reads this JSON index to retrieve your entire frontend component hierarchy. - Prompt your AI: "Search the Storybook components for 'Button', detail its default arguments, and generate an isolated preview URL."
Who is this for?
- Frontend Engineers — Rapidly discover existing UI elements and their expected properties without leaving your coding interface.
- UI/UX Designers — Validate and audit deployed component structures programmatically, ensuring implementation aligns exactly with design tokens.
- Technical Writers — Extract existing Storybook documentation pathways automatically to maintain consistent, up-to-date design system guidelines.
Built-in capabilities (6)
Get guidance on how to read documentation for a component
Generate the preview URL for a component sandbox
Get metadata and default arguments for a specific component
g., Atoms, Molecules, Organisms). List the top-level categories and folder structure of the Design System
You can optionally filter by category folder. List all UI components available in the Storybook Design System
Search for specific components by name or keyword
Why Google ADK?
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.
- —
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 in Google ADK
Why run Storybook with Vinkius?
The Storybook connection runs on our fully managed, secure cloud infrastructure. We handle the hosting, maintenance, and security so you don't have to deal with servers or code. All 6 tools are ready to work instantly without any complex setup.
You stay in complete control of your data. Your AI only accesses the information you approve, keeping your sensitive passwords and private details completely safe. Plus, with automatic optimizations, your AI works faster and more efficiently.
* Every connection is hosted and maintained by Vinkius. We handle the security, updates, and infrastructure so you don't have to write code or manage servers. See our infrastructure
Over 4,000 integrations ready for AI agents
Explore a vast library of pre-built integrations, optimized and ready to deploy.
Connect securely in under 30 seconds
Generate tokens to authenticate and link external services in a single step.
Complete visibility into every agent action
Audit live requests, latency, success rates, and active security compliance policies.
Optimize spending and track token ROI
Analyze real-time token consumption and cost metrics detailed by connection.
Explore our live AI Agents Analytics dashboard to see it all working
This dashboard is included when you connect Storybook using Vinkius. You will never be left in the dark about what your AI agents are doing with your tools.
Storybook and 4,000+ other AI tools. No hosting, no code, ready to use.
Professionals who connect Storybook to Google ADK through Vinkius don't need to write code, manage servers, or worry about security. Everything is pre-configured, secure, and runs automatically in the background.
Raw MCP | Vinkius | |
|---|---|---|
| Ready-to-use MCPs | Find and configure each manually | 4,000+ MCPs ready to use |
| Connection Setup | Manual coding & server setup | 1-click instant connection |
| Server Hosting | You host it yourself (needs 24/7 uptime) | 100% hosted & managed by Vinkius |
| Security & Privacy | Stored in plaintext config files | Bank-grade encrypted vault |
| Activity Visibility | Blind execution (no logs or tracking) | Live dashboard with real-time logs |
| Cost Control | Runaway AI token spend risk | Automatic budget limits |
| Revoking Access | Must delete files or code to stop | 1-click disconnect button |
How Vinkius secures
Storybook for Google ADK
Every request between Google ADK and Storybook is protected by our secure gateway. We automatically keep your sensitive data private, prevent unauthorized access, and let you disconnect instantly at any time.
Frequently asked questions
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.
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.
McpToolset not found
Update: pip install --upgrade google-adk
Explore More MCP Servers
View all →
3D AI Studio
12 toolsGenerate and process 3D models via 3D AI Studio — text-to-3D, image-to-3D, AI texturing, remeshing, rendering, and mesh tools from any AI agent.
Arize AI
6 toolsMonitor ML model performance, detect data drift, and troubleshoot prediction quality with real-time observability dashboards.
Cal.com
12 toolsLet anyone book time with you through customizable scheduling pages that sync with your calendar and eliminate back-and-forth.
Courier
10 toolsEquip your AI agent to send multi-channel notifications and monitor delivery status through the Courier API.