UI コンポーネントカタログに MCP サーバー機能を追加する試み、そしてその結果

hokkaido.js vol.03 x #techramen25conf 非公式前夜祭 (https://hokkaido-js.connpass.com/event/358257/) での発表資料です。

Transcript

1. UI コンポーネントカタログに MCP サーバー機能を追加する試み、 そしてその結果 Hokkaido.js Vol.3 @ ASAHIKAWA
2. UI コンポーネントカタログ Storybook …?
3. さて、 これは なんでしょう?
4. Storybook • Blazor で再実装 • React や Svelte などと同じく、 コンポーネント指向で クライアント Web アプリを開発する用の フレームワーク • ...なんだけど、使う言語が C# です ...のクローンです https://blazor.net/
5. Storybook とは • UI コンポーネント専用の開発＆カタログ環境 • つまるところは npm run で実行される Web アプリ • コンポーネント単位での開発を可能に • デザイナー・エンジニア・QA 共通の、生きたドキュメント • 外観のリグレッションの早期検知や、E2Eテストにも活用 https://storybook.js.org/
6. MCP Model Context Protocol
7. MCP とは • 生成 AI と、その外部のサービス・機能とを 連携させるための規格 • AI に情報を提供したり、AI が何か操作を 行うことを可能とする • 機能提供する側の実装を MCP サーバー とよぶ • 利用する側である生成 AI が MCP クライアントっていうわけ https://modelcontextprotocol.io/
8. MCP で AI に デザインシステムを わからせる試み • 2025年の春頃に話題になりました https://zenn.dev/ubie_dev/articles/f927aaff02d618
9. アイディア Idea
10. すでに Storybook があるなら、 これを MCP に AI にあたえればよいのでは? どのようなコンポーネン トがあり、その使用例は (Story 定義から) このコンポーネントの 用途や概要 (JSDoc から) 実際のマークアップ例 (Story 定義から) どんなパラメータがある か、およびその型や説明 (型定義と JSDoc から)
11. Blazing Story に MCP サーバ機能 を追加 https://github.com/jsakamoto/BlazingStory/commits/feature/mcp-server • MCP サーバー実装を容易にす るための各種処理系に向けた SDK が公開されている • C# 用の SDK も用意されてい るのでこれを活用
12. やってみた Try it
13. 環境 Visual Studio Code GitHub Copilot Claude Sonnet 4
14. 準備 { "inputs": [], "servers": { "Toolbelt UI Stories": { "type": "http", "url": "https://.///mcp/blazingstory/" } } } .vscode/mcp.json # General Instructions - When implementing components, prioritize using components that are listed on the MCP server of the UI component catalog "Toolbelt UI Stories". - For any components whose namespace is "ToolbeltUI.Components", refer to the MCP server of the UI component catalog "Toolbelt UI Stories" to understand how to use them properly. - When working with components that has "ToolbeltUI.Components" namespace, also check the Stories registered on the MCP server of "Toolbelt UI Stories". Use the names of each Story to identify potentially relevant examples and refer to their contents for necessary information. .github/copilot-instructions.md MCPサーバーとの接続構成 この MCP サーバーの使用を指示する カスタムインストラクション
15. テキストで 「こういうのを作って」 とお願いする Inside the current Checkout.razor file, please implement a checkout form for an e-commerce site. - At the top of the page, add a title that says "Checkout". - Below that, include a stepper component to indicate three steps: 1. Information, 2. Confirmation, and 3. Complete. - For now, focus on building the "Information" form. - The form should include the following sections and fields: - Shipping Information - Full Name - Postal Code - Address - Phone Number - Email Address - Delivery Options - Preferred Delivery Date - Preferred Delivery Time (with three options: Morning, Afternoon, Evening) - Payment Method - Payment Method (with three options: Cash on Delivery, Credit Card, PayPay) - "Next" button - Use a select component for the Preferred Delivery Time. - Use a vertical radio group component for selecting the Payment Method options.
16. 成果
17. 成果
18. 画像で 「こういうのを作って」 とお願いする • Figma とかじゃなくていい • 例は PowerPoint で作成した、 手書きスケッチ風の画像 • 構造を持たない、本当にピクセ ルだけの情報
19. 成果
20. 成果
21. 一発で高精度なマークアップが生成される • かつては、指定したコンポーネントライブラリを使わず、ガッツリ CSS を生成することがあった • あるいは、指定したコンポーネントは使用されるも、渡すパラメー タがデタラメ • それっぽい、ありそうなコードは生成される • そのコンポーネントの実際の仕様を理解していないのがバレバレ
22. AI 時代のコンポーネント作成の注意点 • JSDoc しっかり書こう • 人間も AI もこれを読んでそのコンポーネントの使い方を知る • コンポーネントやパラメータの名前重要 • ややこしい名前だと、AI も人間のような間違いをします • 否定系のパラメータ名とかやめましょう (例: “NotEnabled”)
23. Storybook でこれをやる意義 • Story を実装する手間がかかる • AI に食わせるだけなら、先の Zenn 記事のように、コンポーネント実装 コードをスキャンして返す MCP をいっかい作っておけばいいのでは? • でも、生成されたコード、人間は保守しないんですか? • 人間も保守するんだったら、人間がそのライブラリを学習するための情報 が必要 • AI と人間の両方がライブラリを理解する為に Storybook が活躍
24. Storybook を MCPサーバ化した事例 • ここまでの話は、本家 Storybook じゃなくて、その Blazor 向けク ローンである Blazing Story における話でした • では Storybook ではどうなのか? • 実はよく調べてません • 以前にさくっと ChatGPT + Web Search で調べてみたときに は、何か試験的実装が公開されていたのを見かけたような...
25. まとめ Conclusion
26. 結論：普通に実用レベルでした • Storybook 等の UI コンポーネントカタログは、MCP で AI とつな ぐと、AI が生成するコードが高精度化 • そもそも人間がそのライブラリの使い方を知れることに加えて、 小さなコンポーネント単位での開発や、Visual Regression Test、 End-to-End Test にも活用 • AI 時代も Storybook は大活躍
27. Learn, Practice, Share.