TypeScript を活かしてデザインシステム MCP を作る / #tskaigi_after_night

Transcript

1. TypeScript を活かしてデザインシステム MCP を作る 2025-05-27 TSKaigi 2025 After Night 〜セッションおかわりの会！〜 @izumin5210
2. @izumin5210 © LayerX Inc. whoami LayerX バクラク事業部 (2022-09 -) Platform Engineering 部 Enabling チーム Staff Software Engineer ISUCON14 4位 飛び入り LT だ！（イベント始まってから作り始めました）
3. TSKaigi 2025 でも話したよ！ © LayerX Inc. 3
4. LayerX バクラク事業部 @shota8511_tech の発表 デザインシステムのデザイントークンと共通 UI コンポーネントの情報を返す MCP server を作っています © LayerX Inc. 4
5. この MCP server の、とくに UI コンポーネントに関する情報は Storybook から抽出しています https://zenn.dev/layerx/articles/7e9f87fca65e94 © LayerX Inc. 5
6. Storybook は React コンポーネントの Props の定義をうまく輸出し、ドキュメントとして表示できます © LayerX Inc. 6
7. © LayerX Inc. Storybook は何を、どうやって抽出しているか Storybook の情報をどうやって MCP で利用するか 7
8. Button コンポーネントの props 定義 型はもちろん、その props の意味や使い方・注意点などもコメントに残しています（これはもともと人間用） この型やコメントが Storybook にも反映されています © LayerX Inc. Storybook はどこから、何を、どうやって抽出しているか 8
9. Storybook における React コンポーネントの情報取得 © LayerX Inc. Storybook では react-docgen or react-docgen-typescript を利用し、 コードから情報を抜き出してドキュメントを生成している デフォルトは react-docgen だが、 react-docgen-typescript に変更可能 react-docgen-typescript は型情報も利用してくれるが、ビルドに時間がかかる react-docgen-typescript は TSDoc(JSDoc) + 型情報を見てくれる さっきの Button の例もそうでしたね 9
10. react-docgen-typescript を使えばコンポーネントの情報を抜き出せるのでは？ © LayerX Inc. 10
11. なんかそれっぽい感じで呼び出して… © LayerX Inc. 11
12. なんかそれっぽい感じで使ってみる © LayerX Inc. 12
13. できた？ © LayerX Inc. 13
14. それっぽい © LayerX Inc. 14
15. 雑感 © LayerX Inc. 実はコンポーネントの実装をそのまま渡すだけでもそれなりにいい感じになるらしい Storybook で必要な情報に絞ることで AI 的にはノイズが減り、精度もいいはずと信じてる 実際に Agent に利用してもらった感じだと、 TSDoc に @example を書いているのが Few-shot prompting 的に効いてそう これも Ubie さんのブログを見て悔しくなって半日くらいで試したやつなので もっといい感じの方法もたぶんある キミだけの最強の MCP server を作ろう！ 15