特定のディレクトリ内のコンポーネント情報を出力する MCP サーバーを試作

社内デザインシステムを MCP サーバー化したら UI 実装が爆速になったという記事を読んで、真似できないかなと思って MCP サーバーを作成した。

https://github.com/rkyurit/mcp-server-sample/tree/main/vue-sfc-descriptor

残念ながらデザインシステムなんていう大層なものはないが、汎用コンポーネントとして抽出したものを特定のディレクトリに集めて切り出せないことはない状態にはしてある。
そこで、特定のディレクトリ内のコンポーネント情報をいい感じに取得する MCP サーバーを作成できれば、上記の記事のような効果を得られるのではないかと思ったのでとりあえず簡単に試作した。
なお、実際のプロダクトのコンポーネントでは試せていないし、Agent への指示でそのディレクトリを直接指定するのと MCP サーバー経由で情報を取得するのでどちらが正確に実装してくれるかを比較したりもしていない。この短期間であんなにちゃんと検証できてるのすごすぎ。

コンポーネント内のコメントの位置とか Props や Emit の定義方法などをかなり限定したものになっているので汎用性はない。実際の開発環境に取り入れるとしたら、もうちょい汎用的なつくりにしないと無理そう。

Claud Desktop から呼び出すとこんな感じ ↓