在 Mintel，我們維護自有的內部 React 設計系統元件庫。我們與產品設計團隊合作，將設計系統規範嵌入至元件實作中，並使用 Storybook 進行文件化。

隨著 AI 代理在開發流程中的採用日益增加，我們想探索如何透過在設計系統 npm 套件中提供本機端的 MCP(模型上下文協定) CLI 來開放設計系統文件。

@storybook/addon-mcp

Storybook 團隊目前正在早期開發 @storybook/addon-mcp，其透過 MCP (Model Context Protocol) 伺服器開放 Storybook 文件。這讓 AI 代理能夠以結構化的方式查詢元件庫文件，同時也提供了協助產生 Storybook stories 的工具。

我們升級至 Storybook 10，並在 .storybook/main.ts 中設定 addon 組態：

const config: StorybookConfig = {
  addons: ["@storybook/addon-mcp"],
  features: {
    experimentalComponentsManifest: true,
  },
};

產生元件 manifests 需要 Storybook 10 與 React，這會開放每個元件的更多詳細資訊，包含 props 與 API 文件。

此 addon 會在 Storybook 於本機執行時啟動 MCP 伺服器，我們可以透過 http://localhost:6006/mcp 存取該伺服器。

{
  "mcpServers": {
    "storybook-mcp": {
      "url": "http://localhost:6006/mcp",
      "type": "http"
    }
  }
}

MCP 伺服器會在建置 Storybook 時於 manifests 目錄中產生檔案。這些檔案以結構化的格式包含元件的中繼資料與文件。

將 MCP 提供給其他團隊

此 addon 對於從事設計系統本身的開發者來說很有用，但我們希望讓使用該設計系統的其他開發團隊也能使用 MCP 伺服器。

為此，我們串接底層的 @storybook/mcp 套件，為函式庫加入 CLI，以允許在 stdio 模式下啟動 MCP 伺服器。其他團隊隨後便能以單一指令執行設計系統函式庫 MCP 伺服器的最新版本：pnpm dlx <library-name>@latest。

建置流程

我們擴充了函式庫的建置流程，使其同時建置 Storybook，並將產生的 manifests 複製到已發布的套件中。

# Build the storybook
pnpm build-storybook
# Copy manifest files into package dist
mkdir -p ./dist/manifests
cp -r ./storybook-static/manifests/ ./dist/manifests/
# Build the library
pnpm vite build

新增 CLI

我們也在套件中新增了 CLI 進入點，以便在 stdio 模式下啟動 MCP 伺服器。

// package.json
{
  "bin": "./dist/mcp.js"
}

#!/usr/bin/env node

import { McpServer } from "tmcp";
import { ValibotJsonSchemaAdapter } from "@tmcp/adapter-valibot";
import { StdioTransport } from "@tmcp/transport-stdio";
import {
  type StorybookContext,
  addListAllDocumentationTool,
  addGetDocumentationTool,
} from "@storybook/mcp";
import fs from "node:fs/promises";
import pkgJson from "./package.json";

const adapter = new ValibotJsonSchemaAdapter();
const server = new McpServer(
  {
    name: pkgJson.name,
    version: pkgJson.version,
    description: pkgJson.description,
  },
  {
    adapter,
    capabilities: {
      tools: { listChanged: true },
    },
    instructions:
      "You can use this MCP server to access Mintel Design System documentation, with component API docs for the React component library.",
  }
).withContext<StorybookContext>();

addListAllDocumentationTool(server).then(() => {
  addGetDocumentationTool(server).then(() => {
    const transport = new StdioTransport(server);

    transport.listen({
      format: "markdown",
      manifestProvider: async (_request, path) =>
        fs.readFile(`${__dirname}/${path}`, "utf-8"),
    });
  });
});

使用方式

團隊現在可以透過設定如 Cursor 等 IDE 來在本地端設定並執行 MCP 伺服器：

{
  "mcpServers": {
    "mintel-design-system": {
      "command": "pnpm",
      "args": ["dlx", "<package-name>@latest"]
    }
  }
}

也可以按專案進行設定，使用專案中所採用的設計系統函式庫特定版本來執行：

{
  "mcpServers": {
    "mintel-design-system": {
      "command": "pnpm",
      "args": ["exec", "<package-name>"]
    }
  }
}

我們仍在摸索善用 MCP 伺服器的最佳方式，但它在處理以下這類提示時已展現出實用性：

評估此程式碼庫中是否有任何元件可替換為 Mintel Design System 元件

為遷移至新的 Mintel Design System Button 元件制定計畫

使用 Mintel Design System 元件實作可篩選的內容清單