MCP Router ✖️ Claude Desktopでコーディングしてみる
こんにちは！
先週MCP Routerを公開する予告記事を公開しましたが、ついに2日前にアプリを一般公開できたので、以下ではアプリの使い方について、たくさんスクショを使ってご紹介します。
前回の記事↓
リリースのツイート↓
この記事を読み終える頃には、あなたも「MCP管理ますたー」（？）になるはずです。
この記事ではClaude DesktopからMCP Routerを使って、コーディングを行ってみたいと思います。
この記事では以下のMCPサーバを利用します。
MCP Routerの設定
MCP Routerのアプリをダウンロードして、起動します。
「探索」をクリックすると、MCPサーバ一覧が表示されます。
そこでFile SystemとGitHubのMCPサーバが登録されているので、ダウンロードします。
数秒でダウンロードが完了します。
サイドバーのサーバ詳細をクリックし、設定を編集をクリックし、各サーバの設定を行います。
GitHubのMCPサーバでは、GitHubのアクセストークンを環境変数で設定します。
GitHubのアクセストークンはこちら取得できます。
FileSystemも同様にして、自分が使いたいディレクトリのパスを引数に指定します。
セットした後、「開始」ボタンで起動します（この時npxコマンドを利用するため、事前にnpxのパスを通しておきます）。
次に、「トークン」ページへ行き、新規トークンを作成します。今回はClaudeのアプリから利用するため、claude desktopと入力し、GitHubとFileSystemの利用を許可してます。アクセス制限のスコープは、後から変更可能です。
生成をすると、mcprから始まるトークンが作成されるので、これをメモしておきます。
以上でセットアップは完了です！
Claude Desktopの設定
以下のようなconfigファイルを書いて、保存します。
{
"mcpServers": {
"mcpr-cli": {
"command": "npx",
"args": [
"-y",
"mcpr-cli",
"connect"
],
"env": {
"MCPR_TOKEN": "mcpr_eefc51bd"
}
}
}
}
ここでのmcpr_eefc51bdは先ほど発行したトークンです。
利用するMCPサーバーに変更があったとしても、上記のClaudeの設定ファイルは変える必要がありません。MCP Router側で管理できます。もしClaudeやCursorといった複数のアプリを使う場合、MCP Router側で設定を変更するだけなので、とてもシンプルです。
また、アプリがアクセス可能なMCPサーバを変更したい場合は、MCP Router側で以下のように権限を更新するだけです。
つまり、もし追加でMCPサーバを使いたい場合、MCP RouterからMCPサーバを立ち上げて、トークンの権限を更新するだけです。
さて、ここまででセットアップは終了です。
MCP RouterとClaudeを使った、バイブコーディング
実際にコーディングして、遊んでみましょう！
Claudeを開いて、「ローカルのディレクトリに簡単なReactアプリを作成し、GitHubにアップロードしてください」と指示します。
何度かツールの許可ポップアップが表示されるので、許可します。
Claude内でMCPを立ち上げる場合と同じように動作しているのが分かります。
出来上がったリポジトリがこちらです。
今回はGitHubにアップロードするまで行いましたが、例えばCloudFlareやGoogle CloudなどのMCPサーバを使うことで、デプロイまで出来てしまいます。
ログを見てみる
上記では何度もツール呼び出しをしていますが、どのツールが何回使われたか、あまり分かりません。でも心配無用です。MCP Routerではログの保存と表示ができ、以下のようにモニタリングできます。
最後に
恐るべし、MCPです。
その一方で現状のMCPでは、（Cursor、Cline、Claudeといった）アプリケーション毎にMCPサーバをインストールして、立ち上げて、どのように使われているのかも管理できていないまま使っているという現状があります。
MCPが、もっと便利に安全に、広く使われてしてほしいなぁと思いながらMCP Routerを開発しています。また、日本から世界で使われるソフトウェアを開発したいと思っています。
MCP Routerは、こちらからダウンロードできます。
皆さん、いつも応援ありがとうございます。
Twitterもフォローお願い致します（ぺこり）
日々の開発を発信しようと思ってます。
Discussion