a2a mcp
Back to MCP Servers
Storybook MCP logo
mcp-server185

Storybook MCP

Storybook MCP 是一款官方的模型上下文協定（MCP）伺服器，能將 AI 助手連接到您的 Storybook，提供機器可讀的組件元數據、故事、屬性和文件，讓助手能夠智能地重複使用 UI 組件並透過測試自我修正。

XFacebookLinkedInRedditHacker News

概述

Storybook MCP 是由 Storybook 官方團隊提供的整合方案，將 模型上下文協議 (MCP) 的強大功能引入元件驅動的 UI 開發。它將您現有的 Storybook 轉變為一個豐富、結構化的資料來源，AI 代理可以即時查詢。

透過以經過優化、符合權杖效率的格式來公開元件元資料、故事、屬性類型、使用範例和文件，Storybook MCP 讓 AI 代理能夠構建符合您團隊設計系統的 UI，而非產生通用或不一致的程式碼。

主要功能

  • 元件探索與上下文：代理能夠列出元件，並擷取詳細的屬性、故事、控制項和文件。
  • 優化的清單：提供經過篩選、可供機器讀取的資料載荷（元件清單），其中包含 API、變體、設計權杖和使用片段——遠比原始原始程式碼更有效率。
  • 故事生成與測試：代理能夠為元件撰寫新的故事並自主執行測試，並內建自我修正的回饋循環。
  • 無縫整合：透過 @storybook/addon-mcp 套件安裝；MCP 伺服器與您的 Storybook 開發伺服器並行運行（通常位於 /mcp 端點）。
  • 獨立函式庫：可獨立使用 @storybook/mcp 進行自訂設定。
  • 支援 React (v10.3+)：目前主要針對 React 進行優化，未來計劃擴展到其他框架。

運作方式

  1. 安裝附加元件：npx storybook add @storybook/addon-mcp
  2. 執行您的 Storybook 開發伺服器。
  3. 將任何相容 MCP 的 AI 代理（Claude、Cursor 等）連接到 MCP 端點。
  4. 代理現在可以直接存取您現行的設計系統，以進行具有上下文感知的程式碼生成。

這創造了一個迭代式的工作流程，讓代理能夠生成程式碼、透過故事預覽、執行測試並修復問題，而無需持續的人工介入。

為開發者帶來的好處

  • 更高品質的 AI 輸出：代理遵循您既定的模式和元件 API，減少臆測和重做工作。
  • 權杖效率：更小、更集中的上下文載荷意味著更好的效能和更低的成本。
  • 生產環境 UI 的護欄：測試回饋循環幫助代理產出符合您標準的程式碼。
  • 加速前端開發：非常適合設計系統團隊、大型程式碼庫以及代理工作流程。

使用情境

  • 在重複使用您的元件函式庫的同時，生成新的 UI 功能。
  • 將 Figma 設計轉換為符合您現有 Storybook 元件的生產環境程式碼。
  • 為元件覆蓋率進行自主的故事撰寫和測試。
  • 以前端專屬的智慧功能增強 AI 編碼工具（例如 Cursor、Windsurf 或自訂代理）。
  • 在團隊環境中維護大型設計系統的一致性。

安裝與入門指南

需要 Storybook 10.3+（React 渲染器）。

# 升級 Storybook
npx storybook@latest upgrade

新增 MCP 附加元件

npx storybook add @storybook/addon-mcp


接著執行 `storybook dev` 並將您的代理程式連線至 `http://localhost:6006/mcp`（連接埠可能不同 ）。

完整文件請參閱 [官方 Storybook AI / MCP 文件](https://storybook.js.org/docs/ai/mcp/overview) 。

## 相關資源

- 官方部落格：[Storybook MCP for React](https://storybook.js.org/blog/storybook-mcp-for-react/)
- GitHub：[storybookjs/mcp](https://github.com/storybookjs/mcp)
- npm：[@storybook/addon-mcp](https://www.npmjs.com/package/@storybook/addon-mcp)

Tags

storybookmcpai-agentreactui-componentsdesign-systemfrontendtypescript

Related Entries

Keep exploring similar tools and resources in this category.

Browse MCP Servers
DataForSEO MCP Server logo

DataForSEO MCP Server

MCP Servers

DataForSEO MCP Server is the official Model Context Protocol server for connecting AI clients to DataForSEO SEO, SERP, keyword, backlink, on-page, business, domain, content, merchant, and AI optimization data. It can be used as a hosted Streamable HTTP endpoint, a local npx package, a Docker container, or a source-built TypeScript server.

vercel eve logo

vercel eve

MCP Servers

Vercel Eve is an open-source, filesystem-first TypeScript framework for building durable AI agents on Vercel. It organizes agent capabilities as files for instructions, tools, skills, channels, schedules, subagents, and connections, including integrations with external MCP and OpenAPI tools.

TinyFish logo

TinyFish

MCP Servers

TinyFish 為相容 MCP 的 AI 助手提供網頁自動化、網路搜尋、內容擷取以及遠端瀏覽器會話工具。代管的 MCP 伺服器使用 OAuth 2.1，而可選的本地 @tiny-fish/mcp 代理支援 API 金鑰驗證，適用於僅限本地、CI 及無頭設定。

X MCP logo

X MCP

MCP Servers

X MCP 是 X 官方託管的 Model Context Protocol 伺服器，可讓相容 MCP 的 AI 工具呼叫 X API 端點。它透過 xurl 橋接 OAuth 使用者情境，支援貼文搜尋、使用者查詢、書籤、趨勢、新聞和 Articles 等工作流程。

TinyFish logo

TinyFish

MCP Servers

TinyFish exposes web automation, web search, content extraction, and remote browser-session tools to MCP-compatible AI assistants. The hosted MCP server uses OAuth 2.1, while an optional local @tiny-fish/mcp proxy supports API-key authentication for local-only, CI, and headless setups.

openaiDeveloperDocs logo

openaiDeveloperDocs

MCP Servers

OpenAI Developer Docs MCP is an OpenAI-hosted, read-only server that lets MCP clients search and fetch documentation from developers.openai.com, platform.openai.com, and learn.chatgpt.com. It uses a public streamable HTTP endpoint and does not call the OpenAI API on the user's behalf.