Bring Ui Components
to OpenAI Agents SDK
Create your Vinkius account to connect Storybook to OpenAI Agents SDK 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.
Compatible with every major AI agent and IDE
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 OpenAI Agents SDK?
The OpenAI Agents SDK auto-discovers all 6 tools from Storybook through native MCP integration. Build agents with built-in guardrails, tracing, and handoff patterns. chain multiple agents where one queries Storybook, another analyzes results, and a third generates reports, all orchestrated through Vinkius.
- —
Native MCP integration via
MCPServerSse, pass the URL and the SDK auto-discovers all tools with full type safety - —
Built-in guardrails, tracing, and handoff patterns let you build production-grade agents without reinventing safety infrastructure
- —
Lightweight and composable: chain multiple agents and MCP servers in a single pipeline with minimal boilerplate
- —
First-party OpenAI support ensures optimal compatibility with GPT models for tool calling and structured output
Storybook in OpenAI Agents SDK
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 OpenAI Agents SDK 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 OpenAI Agents SDK
Every request between OpenAI Agents SDK 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 the OpenAI Agents SDK connect to MCP?
Use MCPServerSse(url=...) to create a server connection. The SDK auto-discovers all tools and makes them available to your agent with full type information.
Can I use multiple MCP servers in one agent?
Yes. Pass a list of MCPServerSse instances to the agent constructor. The agent can use tools from all connected servers within a single run.
Does the SDK support streaming responses?
Yes. The SDK supports SSE and Streamable HTTP transports, both of which work natively with Vinkius.
MCPServerStreamableHttp not found
Ensure you have the latest version: pip install --upgrade openai-agents
Agent not calling tools
Make sure your prompt explicitly references the task the tools can help with.
Explore More MCP Servers
View all →
ReferralCandy
16 toolsConnect your AI agents to ReferralCandy to manage referral programs, track advocates, register purchases, and analyze campaign performance.

Authorize.net
10 toolsManage payments, transactions, and customer profiles via Authorize.net — the trusted payment gateway directly via AI.

Jotform
10 toolsBuild powerful online forms with drag-and-drop ease, collect payments, gather signatures, and process submissions automatically.

Flodesk
10 toolsDesign gorgeous email campaigns with intuitive templates that grow your audience and reflect your brand without design skills.
