Zenn
🛠️

Claude MCPを使ったアプリ開発に挑戦してみた

2024/12/01に公開
2件
Next.js
macOS
mcp
LLM
Claude
tech

はじめに

どんな人向けの記事？

  • 生成 AI に興味のある方
  • Claude MCP（Model Context Protocol）に興味のある方
開発環境
Mac Studio (M2 Ultra 128GB)

概要

今回は Claude MCP のfilesystem, gitを使ってアプリ開発をしてみます。
その上で、Cline との違いについて自分なりの見解を述べます。
ちなみに、私は Cursor 課金ユーザーではないので、Cursor と比べてどうなのかについては言及していません。

Claude MCP の環境構築

Mac 環境の方は、npaka さんの下記の記事を参考に、まずは SQLite と Claude の接続を試してみましょう。

https://note.com/npaka/n/ncd797acdad06

Windows 環境の方は、Maki さんの下記の記事が参考になると思います。

https://zenn.dev/sunwood_ai_labs/articles/claude-desktop-memory-guide

その他、本記事を読み進める上で必須ではないですが、こちらの記事も MCP を理解する上で非常に参考になります。

https://weel.co.jp/media/tech/model-context-protocol/

filesystem, git を使ったアプリ開発

今回は sqlite ではなく、filesystem, gitを使ってアプリ開発を試してみます。
正直アプリ開発をするだけなら、Cursor や Cline で API を使えば事足りると思いますが、まあ MCP の練習のために試してみます。あとは、API 代が節約できないかという淡い期待もあります。

準備

本記事では SQLite と Claude の接続が完了している前提で進めていきます。
さて、まずは MCP で filesystem, git を使う準備をしていきます。

  • Node.js のインストール（Next.js 開発してる人ならインストール済かと思いますが）

    • 導入済みでない場合は 公式サイト から Node.js を導入して、npx -vのコマンドで npx のバージョンが表示される状態にしておいてください。

  • claude_desktop_config.json の編集

    • 直接 Finder からファイルを探しても良いですし、ターミナルから編集しても良いです。
    • ターミナルから編集するときにはスペースの前にバックスラッシュ\をつけるのを忘れないようにしてください。
$ nano ~/Library/Application\ Support/Claude/claude_desktop_config.json

以下は、/Users/YOUR_USERNAME/Claude_MCP/filesystem/test/llm-character-managerに開発用の git リポジトリがある前提の記載になっています。必要に応じて修正してください。

claude_desktop_config.json
{
"mcpServers": {
"sqlite": {
"command": "uvx",
"args": [
"mcp-server-sqlite",
"--db-path",
"/Users/YOUR_USERNAME/test.db"
]
},
"filesystem": {
"command": "npx",
"args": [
"-y",
"@modelcontextprotocol/server-filesystem",
"/Users/YOUR_USERNAME/Claude_MCP/filesystem/test"
]
},
"git": {
"command": "uvx",
"args": ["mcp-server-git", "--repository", "/Users/YOUR_USERNAME/Claude_MCP/filesystem/test/llm-character-manager"]
}
}
}

あとは SQLite の場合と同様に、Claude デスクトップを再起動すれば、sqlite に加えて filesystem,git との連携ができていると思います。
下記のように、22 MCP tools available となっていれば連携が成功しているはずです(sqlite, filesystem, git 連携をしている場合)。

alt text

いざアプリ開発

連携が確認できたら、いよいよアプリ開発を始めます。

久しぶりに LLM を使ったちょっとしたアプリを作りたいと思っているのですが、今回はその前工程として LLM のキャラメイク用アプリと作ったキャラクターを DB 管理できる仕組み を作ることにしました。

本筋ではないのでアプリの詳細は割愛しますが、ざっくり下記のような構成にしています。

  • フロントエンド：Next.js
  • バックエンド：Python
    • DB：SQLite
    • API：FastAPI
    • LLM：Ollama

実際に動かしてみる

作りたいアプリの要件を伝えると、Claude が動き始めます。

最初の応答はこんな感じ。
alt text

  • この段階では、ディレクトリを作っただけで、ソースコードは Artifacts に表示するだけで保存されていない。
  • しかも、出力が途中で止まっていたので「続けて」というプロンプトが必要。

応答の続き。
alt text

  • この時点ではファイルが書き込まれていないので、セットアップのコマンドを実行しても意味なし。
  • 下記のように、改善点やさらなる機能追加も提案してくれる。

alt text

先程作成したプロジェクトディレクトリ内に、作成したファイルを然るべき場所にすべて追加して
と依頼した結果がこちら。

alt text

おー、どんどんファイルが生成されていく！
応答が長くなってくると途中で出力が止まるので、続けてが必要なのが玉に瑕。。。

alt text

  • バックエンド、フロントエンドのセットアップと実行方法も教えてくれるのでコマンドを打って実行する。
  • エラーが出たり、エラーが出なくても想定外の挙動で動いたりするので、ここからはデバッグ作業になる。

filesystem と git だけでは、エラーメッセージを取得できないので、エラーメッセージのコピペ作業はやはり必要。

適宜 git コミットするように依頼するのを忘れていたので、改めてプロンプトとして与えると、以後は変更が加わる度に自動的にコミットまでしてくれるようになりました。

alt text

ここからデバッグしたり、機能追加したりしていたらリミッターが発動しました。
あまり会話が長くなると少ないやり取りで制限にかかるようになるので、ある程度区切りがついたら新しい会話から始めるべきかもです。

現段階の成果物

まだ開発途中ですが、とりあえず UI としてはまずまずのアプリができました。
パラメータを完全に制御とか、胡散臭いメッセージは Claude が勝手に作りました笑

alt text

alt text

本アプリやこのアプリを使って何がやりたいかなどについては、本記事の内容から逸脱してしまうので、また別の記事で紹介できればと思います。

Cline との比較・考察

さて、半日 filesystem,git と連携した MCP を使ってアプリ開発をした所感、および Cline との開発体験の違いについてまとめます。
→？は自信がないところなので間違っているかも。

項目 VScode+Cline MCP+filesystem+git
ファイル自動生成・編集 ○：可能 ○：可能
git 連携 ○：可能 ○：可能
コスト 従量課金 $20/月払えば無料
レートリミット 1 分ごとの制限？ 5 時間ごとの制限
デバッグ ○：エラーメッセージを取得して自動的に解決してくれる ☓：エラーメッセージは手動でコピペして与える必要がある
自律性 △：コマンドを打ったり、ファイルを編集する度に Approve が必要（半自動） ○：git コマンドやファイル編集は自動的に進めてくれる
出力が長いときの挙動 ○：出力トークンが長くても途中で止まることはなさそう？ ☓：出力トークン数超過で止まったときに続けてが必要

※Computer Use はどちらも使ったことがないのでわかりません。

上記の表に記載した通り、MCP+filesystem+git を使ったアプリ開発で今一つだと感じたのは、下記の 2 つですね。

  • エラーメッセージを手動で与える必要がある。

    • 今回のようにバックエンド、フロントエンド、と別れていて、かつブラウザでクライアント側のエラーメッセージも確認が必要なのですが、そこに書かれているエラーメッセージをコピペする必要があります。
    • Cline でもある程度コピペは必要ですが、terminal 上のエラーメッセージは自動的に取得する機能があるのが強みですね。

  • 出力トークン数超過で止まったときに続けてが必要

    • これはわりと致命的だと思っています。逆にこれを解決できれば Cline よりもかなり使いやすいと感じます。
    • というのも、一つ一つのファイルが長くなってくると、ファイルを編集するときに一回の応答で書ききれなくなってきます。
    • この場合、続けてとやると最初からやり直すか、コードを省略するようになります。
      • 前者は、最初からやり直しても結局コードが書ききれず無限ループに陥る。後者はコードを省略するので、動かないファイルができる。
      • いずれの場合も致命的だというのがおわかりになると思います。

出力トークン超過問題の解決策（案）

  • まずは、ChatGPT のようなContinue generatingボタンが欲しいですね。いちいち続けてと打つのはストレスがたまります。
  • その上で、途中まで書いたコードの続きからシームレスにファイルを生成できるようになれば、素晴らしいですね。
  • あとは、そもそもContinue generatingボタンなんかなくとも、自動的に続けてくれれば文句なしです！

まとめ

今回は Claude MCP の機能の中でもfilesystemとgitにフォーカスしましたが、おそらくこの 2 つだけでは MCP でできることの 5%も実現できていないと思います。

現状、MCP は一般ユーザーが使うには環境構築のハードルが高いので一部の開発者にしか使われていないと思います。とはいえ、すべて GUI 操作で設定が完結するようになれば、ユーザーが飛躍的に増える気もします。

MCP の登場により、今までコマンドやプログラミング言語の基本等を覚えないとできなかったことが、自然言語だけで実現できるようになる未来が一気に近づいたのではないでしょうか。

私もなんだかんだ開発者の端くれではあるので、自分が作ろうとしていたものが誰でも簡単に作れるようになってしまったら、なんだか寂しい気持ちもします。が、その未来が着々と近づいているのは否定できないので、そんな世界が到来したときに自分は何をして生きていきたいのか？
そういった自問自答を続けることが、この生成 AI 戦国時代における生存戦略の一つであると信じています。

最後まで読んでいただきありがとうございました。次回もぜひよろしくお願いします。

Discussion