Cline任せでコード書いてたらAPIクレジットが爆散したのでClaude Desktop + MCPをいい感じにしてサブスクだけで無双する
タイトルは半分釣りです。課金額が気づいたらえらいことになってたのは本当です。
というわけで、VSCodeで直接使うのではなく、VSCodeに加えて定額サブスクのClaude ProとそのDesktopアプリからコード生成や編集をしてもらうことで、APIをなるべく使わずかつ楽に開発を助けてもらえないか試してみることにします。
MCPサーバーが使えるのは現状Desktopアプリのみ
MCPサーバーについて特にここでは詳しく説明しません。
ClaudeのDesktopアプリと連携して、チャットだけじゃなく色々なサービスと連携できる機能だよ、ってところです。以下にいろいろ公開されているものがあり、連携のさせ方まで丁寧なREADMEがついてます。とてもありがたいですね。
技術系以外のnoteなどの大抵の記事は、上記を特に編集せずnpxで実行させていることが多く、それだけでも全然十分なのですが、ここでは
- 自分でもちょっとカスタムしたい
- TypeScriptで揃えたい
- 1つのディレクトリ（プロジェクト）としてまとめて管理したい
- なんなら必要に応じてどんどん生成して追加したい
ということを考えると、やはり手元の1箇所にソースを集めて自前で起動させるほうが良さそうと思われたので、順番に実装（ほぼコピペか生成だけど）してみることにします。
まずはテスト的にWeb検索できるMCPサーバーを建ててみる
まず以下のページを参考にしてTypeScriptのプロジェクトを作ります。
ただしこの記事ではnode/npm/npxの代わりにbunを利用します。tscしなくていいのでとても楽です。あとmacOS環境の前提です。
Brave検索機能
Brave検索を可能にするMCPサーバーのサンプルが以下に公開されています。index.tsのペライチでアレンジしやすそうなので、こちらをベースに使わせていただきます。
自分の環境ではtype importを明確にするため冒頭は次のように書き換えました。
import {
CallToolRequestSchema,
ListToolsRequestSchema,
- Tool,
+ type Tool,
} from "@modelcontextprotocol/sdk/types.js"
上記をsrc/brave-search.tsとして保存し、@modelcontextprotocol/sdkをbun addしておきます。
APIキー取得
以下からまずはアカウントを登録します。
Free AIのプランをSubscribeします。ボタンクリック後、無料プランではあるものの、クレジットカード情報が必要らしく、入力画面が出てくるので入力します。（1円決済とかされているのかもしれませんが未確認）
普通のAIじゃないFreeプランとの違いはよくわかってないですが、試したところではどちらでも大丈夫そうでした。
SubscribeしたのちAPIキーを生成してコピーしておきます。
Claude Desktopから利用できるよう設定
Claude Desktopの設定画面からDeveloperを選択すると上記のようになります。Edit Configをクリックすると claude_desktop_config.json が開くので、次のように編集します。
{
"mcpServers": {
"brave-search": {
"command": "/Users/<ホームdir>/.bun/bin/bun",
"args": [
"run",
"/Users/<ホームdir>/<プロジェクトdir>/src/brave-search.ts"
],
"env": {
"BRAVE_API_KEY": "ここにAPIキーをいれる"
}
}
}
}
command はフルパスで指定するほうがいいです。
npxを使っている例はだいたいそのままnpxと書かれていますが、nodeやbunを使う場合はパスの通り具合によっては適切に実行されなかったり、特にnodeでnvmなどを使っていれば意図しないバージョンで動作させられたりすることがあります。
編集後Claude Desktopを再起動し、上記のような表示になっていればMCPサーバーが正常に認識されています。
なかなか検索してくれないのを改善するカスタム
このbrave-search、デフォルトだとこんな感じです。
明示的に「検索して」というとちゃんと検索してくれるんですが、もっと軽率にMCP使ってほしいんですよねえ。というわけでちょっとだけプロンプトを調整してみます。
server.tool(
"brave_web_search",
- "Performs a web search using the Brave Search API, ideal for general queries, news, articles, and online content.",
+ "Retrieves up-to-date information from the web using Brave Search. You should proactively use this tool whenever you need current information beyond your knowledge cutoff, when answering questions about recent events, when asked about specific facts you're uncertain about, or when providing comprehensive answers. Search automatically when you suspect information might be outdated or when greater detail would improve your response. Use this for news, technical information, current events, product details, or any topic where fresh, accurate data would enhance your answer quality.",
最近の話とか知識カットオフに引っかかってそうだったりしたら気軽に使うんだよ〜〜という感じの指示です。これで同じ質問をしてみます。
追い討ちで「Web検索して」とわざわざ言わなくても、一発で検索してくれるようになりました。
ローカルにあるソースコードファイルを編集してもらえるようにする
さてここから本番です。
こちらをsrc/filesystem.tsとして保存します。
$ bun add diff @types/diff minimatch
依存関係をインストールし、
{
"mcpServers": {
"brave-search": {
"command": "/Users/<ホームdir>/.bun/bin/bun",
"args": [
"run",
"/Users/<ホームdir>/<プロジェクトdir>/src/brave-search.ts"
],
"env": {
"BRAVE_API_KEY": "ここにAPIキーをいれる"
}
},
+ "filesystem": {
+ "command": "/Users/<ホームdir>/.bun/bin/bun",
+ "args": [
+ "run",
+ "/Users/<ホームdir>/<プロジェクトdir>/src/filesystem.ts",
+ "/Users/<ホームdir>"
+ ]
+ }
}
}
設定を追加、Claude Desktopを再起動しておきます。
Git commitしてくれる機能もつけたい
こちらを使います。
が、Pythonで書かれてます。TypeScriptで統一したいですね。統一しちゃいましょうね。
ちょうどファイルを直接操作できるMCPを作ったところなので、これを使ってcloneしたPythonコードの読み取り → TypeScriptへの書き換え をやってもらいましょう。
$ cd ~/Documents
$ git clone https://github.com/modelcontextprotocol/servers.git
適当な場所にcloneし、Claude Desktopから指示を与えます。
すると以下を出力してくれました。
/**
* Git操作を可能にするModel Context Protocol(MCP)サーバーの実装
* このサーバーは、GitリポジトリのAPI機能を提供します
*/
import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js"
import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js"
import { z } from "zod"
import { exec } from "child_process"
import { promisify } from "util"
import { parseArgs } from "node:util"
// コマンドライン引数の解析
const { values } = parseArgs({
options: {
repository: {
type: "string",
short: "r",
help: "Git repository path"
},
verbose: {
type: "boolean",
short: "v",
count: true,
default: false,
help: "Enable verbose logging"
}
},
allowPositionals: true,
});
...
..
(省略)
リアル3分クッキングですね。
ファイル編集MCPのテストも兼ねられてちょうど良いです。
{
"mcpServers": {
"brave-search": {
"command": "/Users/<ホームdir>/.bun/bin/bun",
"args": [
"run",
"/Users/<ホームdir>/<プロジェクトdir>/src/brave-search.ts"
],
"env": {
"BRAVE_API_KEY": "ここにAPIキーをいれる"
}
},
"filesystem": {
"command": "/Users/<ホームdir>/.bun/bin/bun",
"args": [
"run",
"/Users/<ホームdir>/<プロジェクトdir>/src/filesystem.ts",
"/Users/<ホームdir>"
]
},
+ "git": {
+ "command": "/Users/<ホームdir>/.bun/bin/bun",
+ "args": [
+ "run",
+ "/Users/<ホームdir>/<プロジェクトdir>/src/git.ts"
+ ]
+ }
}
}
設定を追加しました。
さて、これと全く関係のない別のお仕事プロジェクトを少し手伝ってもらったチャット履歴がClaude内にあったので、代理でコミットしてもらえるか試してみましょう。
大丈夫そうですね。いつも雑なコメントしかしない自分にとっては大助かりです。
シェル操作もしてほしいよね
冒頭で紹介したMCPサーバーの一覧には見当たりませんでした。ここはせっかくなので1から生成してもらいましょう。
めちゃくちゃ書いてくれとるけど英語、そしてせっかく直接ファイル操作のMCP作ったんだからArtifactsを使うんじゃないよｗ
/**
* シェル操作を可能にするModel Context Protocol(MCP)サーバーの実装
* このサーバーは、シェルコマンド実行機能を提供します
*/
import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js"
import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js"
import { z } from "zod"
import { spawn, SpawnOptions, execSync } from 'child_process';
import * as path from 'path';
import * as fs from 'fs';
import * as os from 'os';
import { parseArgs } from "node:util"
// コマンドライン引数の解析
const { values } = parseArgs({
options: {
baseDir: {
type: "string",
short: "d",
help: "Base directory for command execution"
},
verbose: {
type: "boolean",
short: "v",
count: true,
default: false,
help: "Enable verbose logging"
}
},
allowPositionals: true,
});
...
..
(省略)
実行ユーザー（自分）と同じコマンド結果になるようにパスを通させたりといった細かい調整をするような指示と書き直しを行なったのち、こちらもMCPとしてちゃんと登録します。
{
"mcpServers": {
"brave-search": {
"command": "/Users/<ホームdir>/.bun/bin/bun",
"args": [
"run",
"/Users/<ホームdir>/<プロジェクトdir>/src/brave-search.ts"
],
"env": {
"BRAVE_API_KEY": "ここにAPIキーをいれる"
}
},
"filesystem": {
"command": "/Users/<ホームdir>/.bun/bin/bun",
"args": [
"run",
"/Users/<ホームdir>/<プロジェクトdir>/src/filesystem.ts",
"/Users/<ホームdir>"
]
},
"git": {
"command": "/Users/<ホームdir>/.bun/bin/bun",
"args": [
"run",
"/Users/<ホームdir>/<プロジェクトdir>/src/git.ts"
]
},
+ "shell": {
+ "command": "/Users/<ホームdir>/.bun/bin/bun",
+ "args": [
+ "run",
+ "/Users/<ホームdir>/<プロジェクトdir>/src/shell.ts"
+ ]
+ }
}
}
充実してきたぞ！
シェル操作のテストをしてみましょう。
ちゃんと効いているみたいですね。
実際どこまで開発と連動しながらシェル操作してくれるのかはわかりませんが、触りながら自分でカスタムしてゆけるのは良い点かなと思ってます。
ここまで作ったMCPサーバーはGitHubにあげておきました
- Web検索（テスト用だけど最新技術情報を調べるのに使える？かもしれない）
- ファイル操作（コードを直接編集させられる）
- Git操作（いい感じのコメントつけてコミットとかしてくれる）
- シェル操作（依存関係のインストールとかやってくれる）
一旦上記の4つのMCPサーバーをまとめて使ってみたところ、それなりにコード生成補完ツールとして実用的になることがわかったので、リポジトリにまとめて（READMEもいい感じに書かせて）以下にあげておきました。
Claude定額課金勢はcloneしていじって無双しよう！
良きオレオレMCP群が作れたらぜひ記事書いてメンションして教えてくださいね〜。
良し悪しはあると思いますが
コード生成・補完ツールとしての所感です。
特に今までAPI従量課金してきたClineで作業していたときと比較した点を主に書きます。
Pros(1) 従量課金じゃない
やはりここですね。
ClineがVSCodeで直接動いてコードを書き上げていくシームレスさは中々気持ちのよいものですが、課金量がｽﾙｽﾙｽﾙｽﾙと上昇していくのが視界に入るたびにずっと「人1人雇うより全然安いから……」と唱えていました。そんな辛さとは一旦ｵｻﾗﾊﾞ-できます。
Pros(2) 良い意味で任せっきりにならない
Clineの場合、コード編集後にdiffを表示してくれて承認か却下のボタンをクリックし、エラーを検知すれば自動で修正をし、とやってくれるので、あれよあれよという間にプロジェクトが完成していくので、良くも悪くも夢でも見てるんかという気分になります。いやあえて悪くいうと、内容をちゃんと理解してなくてもボタンポチポチでいつの間にか書き終わってしまうので、あとで自力で編集したり説明したりが必要になったときに「これなんだっけ？」となることが時々発生していました。
MCPサーバーを使うと、VSCodeとClaude Desktopの間での視線の行き来は発生するものの、コードそのものをコピペして持ち運ぶ動作はしなくてもよいので案外ストレスはないです。
Claude側で指示を出してある程度書き換えてもらったらVSCodeに移り、エディタ内でエラーが発生していないか確認、ターミナル実行してみてエラーが発生していないか確認、という流れになります。
エラーが出ているか、想定と異なる動作をしていた場合、エラーやデバッグ出力のコピペに加え、その状況の説明を自分で考えてClaudeに投げる必要がありますが、これが案外「人間自身が作っているそのモノの内容をちゃんと理解すること」につながっているように感じます。
Pros(3) エディタに依存しない
モダンな開発者ならVSCode使いが多そうなので、ここの拡張機能ばかりがどうしても充実していくんですが、事情や使い心地や慣れの点などで他のエディタを使っている方も断然いると思います。そういう方々にとってもLLM導入しやすい方法の1つなんじゃないでしょうか。
Cons(1) コンテキスト長の残りが不明
APIでは200kトークンが利用できることは明示されていて、Clineで利用する場合も現時点でどれぐらいまで使ったかがビジュアルでわかるのが良い点でした。
サブスクのClaude Proでも200kトークン以上が使えることは示されているものの、現状の残量がどれぐらいあるかわからないので、あまりに大きすぎるプロジェクトを操作しているとちょっと怖くなるかもしれません。とはいえ現状利用できるLLMとしては最長クラスなので、そうそう枯渇することもない気がします。
Cons(2) 定額で回数無制限なコード生成サービスは他にもある
- 例1: GitHub Copilot $10/月
- 例2: Cursor $20/月
- 例3: Gemini Code Assist 無料で実質無制限（18万回/月）
なんですが、個人的には色々試したうえで今のところClaudeのコード生成が一番しっくりきているので、この辺は好みかなあって気がしますね。
ClineはOpenAIその他のLLMもたくさん選べますし、なんならローカルホストしたモデルを使えばそれこそ真の無制限ですが、そこを実用的な落とし所としてる方はほとんど居ないんじゃないでしょうか。
Discussion