在 Mintel，我们维护着一套内部的 React 设计系统组件库。我们与产品设计团队协作，将设计系统规范融入组件实现，并使用Storybook进行文档编写。

随着 AI 智能体在开发流程中的应用日益广泛，我们希望探索如何通过为设计系统的 npm 包提供本地 MCP 命令行工具来开放设计系统文档。

@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，以支持以 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 设计系统组件的组件

制定迁移到新版 Mintel 设计系统 Button 组件的计划

使用 Mintel 设计系统组件实现一个可筛选的内容列表