在 Mintel，我们维护着自己的内部 React 设计系统组件库。我们与产品设计团队合作，将设计系统规范融入组件实现中，并使用 Storybook 对其进行文档化。

随着 AI agent 在开发工作流中的采用日益广泛，我们希望探索如何通过在设计系统 npm 包中提供本地 MCP CLI，来开放设计系统文档。

@storybook/addon-mcp

Storybook 团队正在早期开发 @storybook/addon-mcp，它通过 MCP（Model Context Protocol，模型上下文协议）服务器开放 Storybook 文档。这样一来，AI agent 就可以以结构化的方式查询组件库文档，同时还可以使用辅助工具来生成 Storybook story。

我们升级到了 Storybook 10，并在 .storybook/main.ts 中设置了 addon 配置：

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

生成组件清单需要 Storybook 10 和 React，这些清单会公开每个组件的更多详细信息，包括 props 和 API 文档。

在本地运行 Storybook 时，该 addon 会启动 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，并将生成的清单复制到发布包中。

# 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 组件实现一个可筛选的内容列表