こんにちは。 ドリーム・アーツでフロントエンドエンジニアをしている飯野です。
この記事では、自社製品の操作をMCPに対応させる実験をしたときのことを紹介します。
MCPサーバーの実装にはClineを用いることで、私自身が書いたコードは10行程度に抑えることができました。
Clineに興味はあるがあまり使ったことがないという人にも雰囲気が伝わるよう、試行錯誤したポイントなども含めて紹介します。
背景
人気のMCPサーバーを試してみたい、でもあまり時間はかけたくない。
そう考えていたところ、ClineにOpenAPIを読み込ませたらほとんど自動でMCPサーバーの開発ができるのではないかと思いつきました。
そこで、自社製品の「SmartDB（スマートデービー）」のOpenAPIを拝借してMCPサーバーを作ってみることにしました。
概要
そもそもClineとは？
ClineとはAIエージェント型の開発支援ツールです。VSCodeの拡張機能としても利用でき、Cline自体は無料です。ただしClineが利用するモデルには使用料がかかります。
Clineが優れているのは、タスクを指示すれば自動で実行→確認→修正を繰り返してくれる機能があるところです。これによって人間も楽になりますし、何より間に人間を介さなくていい分ループを回すのが早いので素早く目的を達成することが出来ます。
その代わり、Clineは設定によってはユーザーに確認無くコマンドを実行出来たりするのでセキュリティリスクにも注意する必要があります。
MCPサーバーの作成
1. Clineの設定
基本設定
IDEにはVSCodeのInsider版を利用しました。
モデルは下記のようにclaude-3.5-sonnetを利用しています。3.7はエラーになってしまってうまくいきませんでした。
また、ClineにはCustom Instructionsという毎回送られる追加の指示を設定することが出来ます。今回はシンプルに以下のような文を設定してみました
日本語で話してください。
また、ターミナルのコマンド実行結果が確認できない場合は、ユーザーが貼り付けて教えるので、そこで止めてユーザーに依頼してください。
欲しい情報があればユーザーが用意するので、こちらもそこで止めてユーザーに依頼してください。
言語指定は絶対にあったほうがいいと思いますが、それ以降の文は正直恩恵をあまり感じなかったため無くてもいいかもしれません。
Auto-approve
ClineにはAuto-approveという強力な機能があります。デフォルトでは例えばコマンドを実行する時に毎回ユーザーに確認を取ってくるのですが、そのような確認を自動で承認することが出来ます。これを利用するとタスクの実装→修正ループが爆速になるので生産性に大きく寄与します。
ただし全てのコマンドを実行可能にしたりPCの全ファイルを編集可能にしてしまうと意図しないコマンド実行などのセキュリティ問題が生じる可能性があるため、よく読んで設定するべきです。
個人的には以下のような設定が無難なのかなと思っています。
2. Clineに実装させる
あとはClineに目的とやってほしいことが書かれたプロンプトを投げるだけです。
今回はSmartDBのOpenAPIを使って既存のAPIを叩くMCPサーバーを作ってもらうことにしました。
最終的には以下のようなプロンプトで生成しました。具体的な試行錯誤については後述します。
# 最終目標
SmartDBというWebアプリケーションがあります。
このアプリの機能の中にはバインダというものを作って、その中にノーコードでフォーム定義を作れる機能が存在します。
あなたにはSmartDBのAPIを使用して、このフォーム定義の機能をMCP Serverとして提供するようなアプリケーションを作って欲しいです。
アプリケーションはtypescriptで作ってください
ディレクトリは xxxx を使ってください
パッケージ管理ツールはyarnを使ってください
SmartDBのopenAPIドキュメントはそのディレクトリのdoc配下に置いてあります。
あなたには xxxxx というAPIに関してMCPサーバー化してほしいです。
# 参考情報
実装するときには以下を参考にしてください。
https://github.com/modelcontextprotocol/servers/blob/main/src/filesystem/index.ts
## 前提条件:
- バインダは既に作成済みとします よってbinderIdなどはパラメータで受け取るようにして構いません
- 認証情報も一旦パラメータで受け取るようにしましょう 他に必要な情報についてもパラメータで受け取って構いません
# 実装内容
まず初めに現在のフォーム定義を取得する機能をMCPサーバーとして作りましょう。
APIのendpointは xxxxxx です。
# その他
...
Clineが作業している様子 凄い速度でコードが生成されている
3. 出来たもの
「証明書管理用のフォームを作ってほしい」という指示をAIエージェントに出すと、AIが必要な設定を考えて適宜MCPを使いながらタスクを実行しているのが分かります。
Cline利用時の工夫
Clineは非常に優秀なのですが、色々な工夫をしないと期待した通りの実装はしてくれません。
ここでは今回の実装で思った重要なポイントをいくつか紹介します。
可能ならサンプルコードを用意する
今回Clineに実装させた時、最初の方は全然使い物にならない、というかそもそも起動すらしないようなコードが返ってきていました。
しかし前述したプロンプトのように、公式のサンプルコードを実装例として例示したところ、精度が飛躍的に改善しました。
これを書くまでは独自に実装を作り込んだり、古いバージョンのSDK前提で作られたコードが混じっていて動かなかったりしていたのですが、公式のコードを例示してからはそれに倣った綺麗なコードが出力されています。
利用するライブラリやその使い方を詳細に説明するならサンプルコード無しでも十分できると思いますが、もし公式にサンプルがあったりするのであればそれを読ませるのが一番確実かつ精度良く出てくる気がします。
こまめにgit commitする
Clineはおかしな変更をしてくる時があります。ただそれでもts errorなどがあれば解決しようと修正を何度も試みるので、気づいたときには大量の誤った変更が入っていたりします。
そういうときにはその状態を残したまま更に何とかさせると事態が悪化していくので、変更を戻してプロンプトを見直してもう一度やり直させたほうが体感ではうまくいきます。
そのため、なるべくこまめにコミットするようにしましょう。
タスクを分割する
Clineは現状コンテキストウィンドウの問題で一定量のトークンまでしか扱えません。ですので、タスクを細かく区切ってなるべく1タスクの中で扱う情報が少なくなるようにすると性能が安定しやすいです。
実際、今回もAPIのエンドポイントごとにタスクを分割していますし、不具合修正はそれ単体でタスクにしています。
うまく生成出来ないときにはタスクを分割してみましょう。
静的型付け言語を使う
Clineは型情報に応じて最適な実装を考えたり、ts errorをチェックしながら間違っている実装を自主的に直したりします。ですので純javascriptよりはtypescriptのような言語の方が正しい実装を出力する可能性が高いです。
また、先程述べたようにタスクを分割する場合は毎回タスクの前にClineが一度既存の関連コードを読み直すわけですが、その時も型情報が存在することでより正確な状況把握が可能になります。
Rulesを整備する
Clineは.clinerulesというファイルを追加することでコードを生成するときのルールを指定することが出来ます。
これはプロジェクト毎の固有のルールやアーキテクチャを指示することにも使えますし、特定の条件で失敗するケースへの対処法やセキュリティガイドラインを書くこともあります。
今回はお試しということもあって特に用意しませんでしたが、そうなるとやはり品質面では微妙なコードが出力されます。今回の場合だとテストが無かったり型定義が微妙だったりという点が問題です。
コードエージェントは実装が非常に早いので、これを繰り返していくと負債が恐ろしい速度で溜まっていくことが容易に想像できます。
ですので正式にプロジェクトにするときにはなるべく早いうちからRulesを整備するべきだと感じました。
ドキュメントを整備する
今回の実装では既にOpenAPIがあり、実装する内容もシンプルだったため、それを読ませるだけでClineがapi仕様を把握して高精度なコードを作成してくれました。
しかし複雑なビジネスロジックが関与するような処理についてはその仕様が把握出来なければ当然コードの生成もうまくいきません。つまり、コードエージェント時代ではドキュメントを整備する重要性がより一層高まっていくと考えられます。
そしてこのドキュメントというのが前述したrulesの話にも直結してきます。アーキテクチャやディレクトリ構造などプロジェクトのルールを暗黙知ではなく明文化していくことで、それをrulesとしてAIエージェントに指示しやすくなります。
古いドキュメントがそのまま放置されていたり、会議で決まった内容がドキュメントに反映されていなかったりといったことが無いようにしていきたいですね。
まとめ
- Clineを使うことでMCP Serverのプロトタイプを手軽に作ることが出来た
- Clineをうまく使えば生産性を爆上げできる
- Clineをうまく使うにはドキュメントの維持やルールや基準の言語化など、基本的なことが重要
今回はプロトタイプ実装のため"早く手軽に"を重視しましたが、AIでプロダクションレベルのコードを書く際の工夫についてはまた別の機会に取り上げたいと思います。
もっとドリーム・アーツを知りたい人は是非下記の情報をチェックしてみてください。
Discussion