💸
Cline任せでコード書いてたらAPIクレジットが爆散したのでClaude Desktop + MCPをいい感じにしてサブスクだけで無双する

2025/03/14に公開
208
TypeScript
Model Context Protocol
https://x.com/ukokq/status/1897214924088336695
タイトルは半分釣りです。課金額が気づいたらえらいことになってたのは本当です。
というわけで、VSCodeで直接使うのではなく、VSCodeに加えて定額サブスクのClaude ProとそのDesktopアプリからコード生成や編集をしてもらうことで、APIをなるべく使わずかつ楽に開発を助けてもらえないか試してみることにします。
!無料版Claudeでもできなくはないですが、コード生成やってるとコンテキストが一瞬で制限に達して使い物にならなくなります。

 MCPサーバーが使えるのは現状Desktopアプリのみ(3/15追記) claude.aiのWebでのチャットに対してDesktopアプリのみ、という意味です。プロトコルなので、LLMのAPIを用いてMCPクライアントを実装していれば何からでも使えます（ClineやCursorもそう）。
MCPサーバーについて特にここでは詳しく説明しません。

ClaudeのDesktopアプリと連携して、チャットだけじゃなく色々なサービスと連携できる機能だよ、ってところです。以下にいろいろ公開されているものがあり、連携のさせ方まで丁寧なREADMEがついてます。とてもありがたいですね。
https://modelcontextprotocol.io/examples
技術系以外のnoteなどの大抵の記事は、上記を特に編集せずnpxで実行させていることが多く、それだけでも全然十分なのですが、ここでは
自分でもちょっとカスタムしたい
TypeScriptで揃えたい
1つのディレクトリ（プロジェクト）としてまとめて管理したい
なんなら必要に応じてどんどん生成して追加したい
ということを考えると、やはり手元の1箇所にソースを集めて自前で起動させるほうが良さそうと思われたので、順番に実装（ほぼコピペか生成だけど）してみることにします。

 まずはテスト的にWeb検索できるMCPサーバーを建ててみるまず以下のページを参考にしてTypeScriptのプロジェクトを作ります。
https://modelcontextprotocol.io/quickstart/server
ただしこの記事ではnode/npm/npxの代わりにbunを利用します。tscしなくていいのでとても楽です。あとmacOS環境の前提です。

 Brave検索機能Brave検索を可能にするMCPサーバーのサンプルが以下に公開されています。index.tsのペライチでアレンジしやすそうなので、こちらをベースに使わせていただきます。
https://github.com/modelcontextprotocol/servers/tree/main/src/brave-search
自分の環境ではtype importを明確にするため冒頭は次のように書き換えました。
src/brave-search.ts
 import {
   CallToolRequestSchema,
   ListToolsRequestSchema,
-  Tool,
+  type Tool,
 } from "@modelcontextprotocol/sdk/types.js"
上記をsrc/brave-search.tsとして保存し、@modelcontextprotocol/sdkをbun addしておきます。

 APIキー取得以下からまずはアカウントを登録します。
https://brave.com/search/api/
Free AIのプランをSubscribeします。ボタンクリック後、無料プランではあるものの、クレジットカード情報が必要らしく、入力画面が出てくるので入力します。（1円決済とかされているのかもしれませんが未確認）
普通のAIじゃないFreeプランとの違いはよくわかってないですが、試したところではどちらでも大丈夫そうでした。
SubscribeしたのちAPIキーを生成してコピーしておきます。

 Claude Desktopから利用できるよう設定
Claude Desktopの設定画面からDeveloperを選択すると上記のようになります。Edit Configをクリックすると claude_desktop_config.json が開くので、次のように編集します。
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などを使っていれば意図しないバージョンで動作させられたりすることがあります。
!自分の環境では、上記 node だけの指定でログを出して確認して起動してみると、約40秒後にMCPサーバーだけが落ちるという謎の動作を繰り返してました。どうやらMCPは起動すれどもクライアントにレスポンスを返さずタイムアウト、という挙動だったようです。その場合はMCPからクライアント側に一切の情報が渡らないため、いわゆる以下の「トンカチマーク」が出ないことになります。

bun だけを指定してみたところではそもそもコマンドが見つからない（ENOENT）というエラーが出ました。
編集後Claude Desktopを再起動し、上記のような表示になっていればMCPサーバーが正常に認識されています。

 なかなか検索してくれないのを改善するカスタムこのbrave-search、デフォルトだとこんな感じです。
明示的に「検索して」というとちゃんと検索してくれるんですが、もっと軽率にMCP使ってほしいんですよねえ。というわけでちょっとだけプロンプトを調整してみます。
src/brave-search.ts
 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検索して」とわざわざ言わなくても、一発で検索してくれるようになりました。

 ローカルにあるソースコードファイルを編集してもらえるようにするさてここから本番です。
https://github.com/modelcontextprotocol/servers/tree/main/src/filesystem
こちらをsrc/filesystem.tsとして保存します。
$ bun add diff @types/diff minimatch
依存関係をインストールし、
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キーをいれる"
             }
         },
+        "filesystem": {
+            "command": "/Users/<ホームdir>/.bun/bin/bun",
+            "args": [
+                "run",
+                "/Users/<ホームdir>/<プロジェクトdir>/src/filesystem.ts",
+                "/Users/<ホームdir>"
+            ]
+        }
     }
 }
設定を追加、Claude Desktopを再起動しておきます。

 Git commitしてくれる機能もつけたいこちらを使います。
https://github.com/modelcontextprotocol/servers/tree/main/src/git
が、Pythonで書かれてます。TypeScriptで統一したいですね。統一しちゃいましょうね。
ちょうどファイルを直接操作できるMCPを作ったところなので、これを使ってcloneしたPythonコードの読み取り → TypeScriptへの書き換え をやってもらいましょう。
$ cd ~/Documents
$ git clone https://github.com/modelcontextprotocol/servers.git
適当な場所にcloneし、Claude Desktopから指示を与えます。
すると以下を出力してくれました。
src/git.ts
/**
 * 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のテストも兼ねられてちょうど良いです。
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キーをいれる"
             }
         },
         "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を使うんじゃないよｗ
src/shell.ts
/**
 * シェル操作を可能にする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としてちゃんと登録します。
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キーをいれる"
             }
         },
         "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もいい感じに書かせて）以下にあげておきました。
https://github.com/ukkz/claude-ts-mcps
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) プロジェクトを全自動で仕上げるのには不向き ※3/15追記これぞ良し悪しでPros(2)の裏返しなのですが、コンテキストが尽きるまで生成丸投げして見守りたいタイプのユーザーには不向きです。

もちろんClineのように、複数のファイルを見に行って、プロジェクト全体を把握した上でそれぞれ直接上書き編集してくれはするのですが、VSCodeが出力するProblems listの結果を自動で読んでくれて対応する機能はなく、コードを書き換えたあと自動でシェル実行して出力結果を見て改善…… も、今のところはしてくれません（後者はプロンプト調整してテストコード作ればできそうですが）。
指示の仕方にもよりますが、直接ファイルに書いてもらう場合はdiff画面も出ないまま変更と保存がされるので、Git管理は必須になります。
開発体験としては、Clineに書かせる場合がPM的な立場で眺めているような感覚だとすると、Claude Desktop + MCPはペアプログラミングのナビゲータ側に徹するというような感じです。両者それぞれ比べてやっていると、なんとなくですが、コントロールするにあたって自分が使う脳の部位が違っているような、そんな気がします。

 Cons(2) コンテキスト長の残りが不明APIでは200kトークンが利用できることは明示されていて、Clineで利用する場合も現時点でどれぐらいまで使ったかがビジュアルでわかるのが良い点でした。
サブスクのClaude Proでも200kトークン以上が使えることは示されているものの、現状の残量がどれぐらいあるかわからないので、あまりに大きすぎるプロジェクトを操作しているとちょっと怖くなるかもしれません。とはいえ現状利用できるLLMとしては最長クラスなので、そうそう枯渇することもない気がします。

 Cons(3) 定額で回数無制限なコード生成サービスは他にもある例1: GitHub Copilot $10/月
例2: Cursor $20/月
例3: Gemini Code Assist 無料で実質無制限（18万回/月）
なんですが、個人的には色々試したうえで今のところClaudeのコード生成が一番しっくりきているので、この辺は好みかなあって気がしますね。

ClineはOpenAIその他のLLMもたくさん選べますし、なんならローカルホストしたモデルを使えばそれこそ真の無制限ですが、そこを実用的な落とし所としてる方はほとんど居ないんじゃないでしょうか。