デザインシステム MFUI を MCP サーバー化して社内に提供した話

DRANK

はじめにこの記事は、弊社で開発しているデザインシステム MFUI のコンポーネント情報を AI コーディングアシスタントに効率的に提供するために開発した Model Context Protocol (MCP) サーバーの実装と活用方法について解説します。なお、MFUI の詳細についてはこの記事では触れません。弊社のテックイベント Money Forward TECH DAY'24 にて同じチームの Taiga Kiyokawa さんの Money Forward UI の紹介をご覧ください。 Context Protocol の詳細についての詳しい解説もありませんので、公式の情報を参照してください。 は、Storybook をドキュメンテーション基盤とし、詳細の利用方法は各ストーリーに、コンポーネントのインターフェース詳細は JSDoc に記載されています。この情報を AI コーディングアシスタント（Cursor など）が正確に理解して活用できるようにするため、MCP サーバーを通じてコンポーネントのソースコードを直接提供する仕組みを構築しました。アーキテクチャMFUI の MCP サーバー（以下 mfui-developer-mcp）は、@modelcontextprotocol/sdk を使用して実装されており、主に以下の 3 つのツールを提供しています。get_available_components: 利用可…