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という1つのコマンドで、デザインシステムライブラリの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 Design Systemのコンポーネントに置き換えられるものがないか評価してください

新しいMintel Design SystemのButtonコンポーネントへの移行計画を作成してください

Mintel Design Systemのコンポーネントを使って、絞り込み可能なコンテンツ一覧を実装してください