あらすじ
学習かたがた MCP（Model Context Protocol）本家サイトのModel Context Protocol: User Guideをもとに、簡単なMCPクライアントを作ってみたけど、CLIだとちょっと見た目が寂しいのでGoogle Stitchを使ってUIを作ってみたのでメモ（まだ作業途中なので、参考程度に）
ここでは、開発環境は以下を使っている
- Node.js
- Typescript
- Windows
StitchでUIを作ってみる
Google Stitchは、自然言語のプロンプトで必要な画面を指定することでデザイン案を生成してくれる。今回のようにデモ用に簡単なUIをサクッと作るには充分な使い勝手になっていると思う
Stitch
デザインもモバイルかWebかを選択でき、プロンプト入力してGenerate designsをクリックするだけでそれっぽいデザインを制作してくれる
特に細かい指定をしていない場合も、必要そうなメニューは項目などはあらかじめセットしてくれる
見た目や色などもトンマナを指定できるので、ここでもお好みに調整できる
デザインの修正をプロンプトで行える
もちろん出来上がったデザインにたいして、自然言語で改変も可能だ。左下のチャット欄にプロンプトを書くだけ。
add a description field under conditions.
例えばこのように指定した場合、Conditions欄の下に、期待通りにDescription欄が追加され、ご丁寧に表示サンプルまでセットされている
出来上がったデザインをFigmaで編集したり、コードをコピペしたり
今回は、出来上がったコードをプロジェクトに新規作成したindex.htmlファイルにコピペして、これをテンプレにMCPクライアントの制作を開始した
MCPクライアントを作ってみる
MCPクライアントの実装自体はUser Guideを参考に、ほぼそのままCLIベースで一度組み立てて動作確認をした
MCPのユーザーガイドに従ってWindows Powershellでechoして.envファイルを作成したら
BOM付きUTFでファイル生成されたせいか期待通りAPI Keyが読み込めず思いのほかはまってしまった。。
.envファイルをテキストエディタでBOM無しに変換したら対処できたけど、慣れないPowershellでの作業には気を付けよう…
そのうえで、先ほどStitchで制作したindex.htmlをベースに以前コーディングした mcp-weatherと連携して、指定した都市の天気を表示するようにClineに指示している
コードの中身は細かく見れていないが、いろいろとまだ課題はありつつも一応MCP Serverと連携して天気APIからデータをとってくるところまではできていそうだ
過去には、API叩かずにそれっぽいテストデータを自分で作ったスタブから取得して表示していたこともあったので、細かなコードレビューやテストをするまでは油断はできないので留意
まとめ
以上、ここまでで、初見で調べながらで小一時間くらいでMCPクライアントからデザイン、実装までが一気に完了できた。慣れたらこれくらいなら10分前後でできてしまうかもしれない。
とはいえいまのところ一番面倒な突合せ作業や修正作業をClineがやってくれている。そういう意味で成果物や環境設定のレビューなどClineも含めた全体作業をしっかりと見る必要はあるが、Clineの使い方を最適化していくことである程度の規模の開発業務であれば、かなり劇的に作業圧縮もできそうだ。
個人的には、ツールや環境の向き不向きを念頭に技術選択するなどまだいろいろ考えないといけない煩わしさはあるが、企画者が自分でプロトタイプしつつ要件定義するくらいのところまでは使い勝手含めて技術的にはもう届いていると思う。