2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

MCPサーバーをかんたん追加! npx add-mcpの紹介

2
Last updated at Posted at 2026-04-18

Gemini_Generated_Image_q1ibaeq1ibaeq1ib_1200w.png

AIツール・AIエージェントに他のツールや外部APIを連携させる手段として、MCP(Model Context Protocol)を利用するケースが増えてきました。

ですが、新しいMCPサーバーを試そうとするたび 「いちいち設定ファイルのJSONを開いて、手書きで追記する作業」 にうんざりしていませんか?
MCPサーバーのREADMEを読んで、それを参考に mcp.jsonconfig.toml へMCPサーバーの設定を追記(しかも設定ファイルのパスや形式はAIエージェントごとに異なる)。いざ起動しようとしたらカンマが抜けててエラーになったり……地味にストレスですよね。

そんな面倒な作業をコマンド一発で終わらせてくれる、便利なツールを見つけたので紹介します。
Neonが公開している add-mcp です。

「追加」ではなくMCPサーバーを探したい方は、以下の記事の方を読んでみてください。

「find-mcp-server」スキルで公開MCPサーバーを探そう
https://qiita.com/tetradice/items/e212bbb011916d799ed9

必要環境

npxで動くツールのため、事前に Node.js のインストールが必要です。

使い方

# npxで動く、ローカルMCPサーバー (stdio形式) を追加する
% npx add-mcp [npxで実行するパッケージ名]

# npx以外のコマンドで動く、ローカルMCPサーバー (stdio 形式) を追加する
% npx add-mcp "[コマンド文字列]"

# URLで動く、リモートMCPサーバー (HTTP形式) を追加する
% npx add-mcp [サーバーURL]

これだけでMCPサーバーが追加され、AIエージェントから利用可能になります!

コマンド例:

% npx add-mcp @primevue/mcp
% npx add-mcp "npx -y @primevue/mcp"
% npx add-mcp https://api.githubcopilot.com/mcp/

ただし、実際に使用するときには -n (--name) オプションも併用して、MCPサーバーの登録名も明示したほうがよいでしょう。
-n (--name) オプションなしの場合、MCPサーバーの登録名はパッケージ名やURLから自動推論されます

% npx add-mcp -n primevue @primevue/mcp
% npx add-mcp -n primevue "npx -y @primevue/mcp"
% npx add-mcp -n github https://api.githubcopilot.com/mcp/

add-mcp の利点

1. 圧倒的な手軽さと対話型プロンプト

たとえば、PrimeVueドキュメントのMCPサーバーをVisual Studio Codeに追加したいとします。
今までなら、 .vscode/mcp.json を直接編集して、以下のような記載を追加する必要がある……というように、使っているAIエージェント(ツール)に応じて異なる設定を行う必要がありました。

{
    "servers": {
        "primevue": {
            "command": "npx",
            "args": ["-y", "@primevue/mcp"]
        }
    }
}

add-mcp を使えば、どのAIエージェントを使っていても以下で1発です。

% npx add-mcp @primevue/mcp

裏側のJSONの更新まで勝手にやってくれます。マジで楽です。

2. 対応しているツールが多い

2026年4月現時点、以下の14ツールに対応しており、今どきのAIコーディング環境ならほぼ網羅されているのではないかと思います。

  • Antigravity
  • Cline (Visual Studio Code拡張)
  • Cline CLI
  • Claude Code
  • Claude Desktop
  • Codex
  • Cursor
  • Gemini CLI
  • Goose
  • VSCode (GitHub Copilot Chat)
  • GitHub Copilot CLI
  • MCPorter
  • OpenCode
  • Zed

3. 「プロジェクトごと」か「グローバル」かを選べる

デフォルトでは、実行したディレクトリのプロジェクト設定(例: .cursor/mcp.json.vscode/mcp.json)に追加されます。チーム開発でMCP設定をリポジトリに共有したい時に便利です。

逆に「自分のPC全体で使いたい!」という場合は、-g--global)オプションをつければ、グローバル設定に書き込んでくれます。

npx add-mcp [パッケージ名] -g

注意
AntiGravity, Cline, Cline CLI, Claude Desktopの4つについては、ツール側がプロジェクトごとのMCPサーバー追加に対応していないため、この -g--global) オプションをつけないとMCPサーバーが登録されません。(2026年4月現在)

4. 環境変数やヘッダーもコマンドで渡せる

「APIキーが必要なサーバーはどうするの?」という疑問もあると思いますが、ちゃんとオプションが用意されています。

# ローカルサーバーに環境変数を渡す場合
npx add-mcp @modelcontextprotocol/server-filesystem --env "API_KEY=secret"

# リモートサーバーに認証ヘッダーを渡す場合
npx add-mcp https://mcp.example.com/mcp --header "Authorization: Bearer SECRETTOKEN1234"

対話プロンプト内でも入力を求められるので、設定漏れをしっかり防げます。

5. サーバーの「検索」と「インストール」が同時にできる

地味に便利なのが npx add-mcp find コマンドです。
Anthropicの公式レジストリやNeonの厳選レジストリから、使いたいMCPサーバーを検索してそのままインストールできます。

# 「vercel」に関連するMCPサーバーを探してインストール
npx add-mcp find vercel

いちいちブラウザでnpmやGitHubを検索しに行く手間すら省けます。

実際のMCP追加例

1) HTTP形式のリモートMCPサーバーを追加する

たとえば、Visual Studio CodeにGitHubのMCPサーバー (github/github-mcp-server) を追加しようとした場合は、以下のような流れになります。

スクリーンショット 2026-04-15 082242.png

npx add-mcp https://api.githubcopilot.com/mcp/ と打ち込むことで、add-mcpの対話型プロンプトが起動します。

今回は「どのAIエージェントを使っているのか」を特定できなかったため、以下の選択肢が表示されています。

  • Same as last time (VS Code, GitHub Copilot CLI)
    • → 最後のインストールと同じAIエージェントを対象にします。私の環境の場合はGitHub Copilot CLI, VS Codeの2つです。
  • All available agents
    • → 対応エージェントすべてで有効化されるようにインストールします。
  • Select specific agents
    • → インストール対象のエージェントを選択します。

試しに Select specific agents を選択してみましょう。

image.png

どのAIエージェント向けにインストールするのかを選択できます。↑↓キーでカーソルを移動し、Spaceキーで選択をON/OFFします。
選択を完了したら、Enterキーを押すと……

スクリーンショット 2026-04-15 082301.png

インストールしてもよいですか? と確認されるので、そのままEnterキーを押してください。

image.png

スクリーンショット 2026-04-15 082312.png

インストールが成功し、JSONファイルに設定が書き込まれました!

実際にMCPサーバーが認識されているかどうかも確認してみましょう。
Visual Studio Codeであれば、Ctrl + Shift + Pで開けるコマンドパレットから、 「チャット: カスタマイズを開く」 でMCPサーバーの一覧を確認することができます。

image.png

image.png

確かにgithubのMCPサーバーが追加されています!

-n (--name) オプションを指定しなかったため、サーバー名は「githubcopilot」になってしまっていますが、実動作には支障はありません。

そのあと、クリックして「サーバーの起動」を実行すれば、MCPサーバーが起動します。

image.png

image.png

今回はGitHubへの認証が必要なので、認証情報を求められました。「許可」ボタンを押して認証します。

image.png

無事にMCPサーバーが「実行中」となりました!

通常は、ユーザーが明示的に起動しなくても、AIエージェントは必要になったら自分でMCPサーバーを立ち上げてくれます。

ですが、MCPサーバーの起動時には今回のようにユーザー認証を求められることもありますし、そもそも必要なソフトウェアが足りず起動に失敗する場合もあります。
このため、基本的には登録直後に1度MCPサーバーを起動するクセをつけておいた方がよいでしょう。

GitHub Copilot Chatのツール選択欄からも、MCPサーバーが起動し、その中のツールを利用可能になっていることを確認できます。

image.png

image.png

この状態で、以下のようにGitHub Copilotに問い合わせると、GitHub MCPサーバーに問い合わせて、最新リリースの情報を取得してくれることを確認できます。

以下GitHubレポジトリの、最新リリースの情報を取得して教えてください。
https://github.com/github/github-mcp-server

スクリーンショット 2026-04-15 082758.png

使用しているAIツールとモデルの組み合わせによっては、MCPサーバーが起動しているにもかかわらず、そのMCPサーバーのツールを使用してくれない場合があります。
その場合は、以下のように「MCPサーバーの機能を使ってほしい」と明示してみてください。

GitHub MCPの機能を使用して、以下GitHubレポジトリの最新リリースの情報を取得して教えてください。
https://github.com/github/github-mcp-server

2) npmパッケージのローカルMCPサーバーを追加する

併せて、npmパッケージのMCPサーバー追加も試してみましょう。
基本的な流れは先ほどと同じです。

image.png

今度はすでにVSCode / GitHub Copilot CLI向けの設定ファイル( .vscode/mcp.json ) が存在するため、「すでにVSCodeかGitHub Copilot CLIを使っている」ことを認識してくれており、自動でインストール対象も選択してくれています。

image.png
image.png
image.png

主要なコマンドラインオプション一覧

add-mcp には、環境構築をさらに便利にするオプションが用意されています。
実務でよく使うものをピックアップして表にまとめました。

オプション (省略形) 役割・説明 使用例
-g, --global グローバル設定への追加
現在のプロジェクトディレクトリではなく、PC全体(システム)のMCP設定ファイルに追加します。
npx add-mcp [パッケージ] -g
--env 環境変数の指定(ローカル用)
ローカルで動かすサーバーに環境変数を渡します。APIキーなどを設定する際に必須です。複数指定も可能です。
--env "API_KEY=secret"
--header HTTPヘッダーの指定(リモート用)
リモートのMCPサーバーにアクセスする際のヘッダーを指定します。認証トークンなどを渡す際に使います。
--header "Authorization: Bearer SECRETTOKEN1234"
-a, --agent クライアントの明示的な指定
追加先のクライアント(cursorclaude-codeなど)を直接指定します。
-a cursor
-n, --name サーバー名の明示的な指定
追加するMCPサーバーの設定上の名前を自分で決めたい場合に使います。(指定しない場合は自動で推測・設定されます)
-n my-postgres
-y, --yes 対話プロンプトのスキップ
インストールの確認など、途中で聞かれる質問をすべてスキップして自動で進めます。
npx add-mcp [パッケージ] -y
--gitignore 設定ファイルのGit管理除外
プロジェクト単位で設定を追加した際、生成されたファイル(.cursor/mcp.jsonなど)を自動で .gitignore に追記してくれます。チーム開発で誤コミットを防ぐのに便利です。
npx add-mcp [パッケージ] --gitignore

※この他にも --transport(通信方式の明示的な指定)などのオプションがありますが、基本的にはコマンド側で自動判定してくれるため、普段は上記を覚えておけば十分です。

まとめ

今まで「面白そうなMCPサーバー見つけたけど、設定が面倒だな……」と後回しにしていた方は、ぜひ npx add-mcp を試してみてください!

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?