在 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 中設定此外掛：

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

產生元件 manifests 需要同時使用 Storybook 10 與 React，這會揭露每個元件更詳細的資訊，包含 props 與 API 文件。

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

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

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

將 MCP 提供給其他團隊

這個外掛對於直接參與設計系統開發的開發者來說很有用，但我們也希望讓其他使用該設計系統的開發團隊能夠使用 MCP 伺服器。

為此，我們串接了底層的 @storybook/mcp 套件，在函式庫中加入 CLI，讓 MCP 伺服器能在 stdio 模式下啟動。如此一來，其他團隊就能透過單一指令執行最新版本的設計系統函式庫 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 設計系統的元件

為遷移至新的 Mintel 設計系統 Button 元件建立一份計畫

使用 Mintel 設計系統的元件實作一個可篩選的內容清單