Mintelでは、社内向けのReactデザインシステムのコンポーネントライブラリを運用しています。プロダクトデザインチームと連携し、デザインシステムの基準をコンポーネントの実装に組み込み、Storybookを使ってドキュメント化しています。

開発ワークフローにおけるAIエージェントの活用が進むなか、デザインシステムのnpmパッケージにローカルで動作するMCP CLIを同梱することで、デザインシステムのドキュメントを公開する方法を模索しました。

@storybook/addon-mcp

Storybookチームは、StorybookのドキュメントをMCP（Model Context Protocol）サーバー経由で公開する@storybook/addon-mcpを現在初期開発中です。これにより、AIエージェントがコンポーネントライブラリのドキュメントを構造化された形で照会できるようになるほか、Storybookのストーリー生成を支援するツールも提供されます。

Storybook 10へアップグレードし、.storybook/main.tsでアドオンの設定を行いました。

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

コンポーネントマニフェストの生成には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モードで起動できるようにしました。これにより、他のチームはpnpm dlx <library-name>@latestという単一のコマンドで、デザインシステムライブラリのMCPサーバーの最新バージョンを実行できるようになります。

ビルドプロセス

ライブラリのビルドプロセスを拡張し、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の追加

また、MCPサーバーをstdioモードで起動するためのCLIエントリーポイントをパッケージに追加しました。

// 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デザインシステムのコンポーネントを使って、フィルタリング可能なコンテンツリストを実装して