便利なMCP 2025年4月版 (もう古いコードの提案はしなくなるMCP他)

Last updated at 2025-04-11Posted at 2025-04-07

※立ち上げるごとにMCPの起動が必要です。
settings.jsonなどで、起動ボタンを押します。

有料や回数制限があるMCPがあるから仕方がないか。

GitHub Copilotシリーズ

VSCodeでのMCP設定

VSCodeの左下の歯車アイコンから「設定」を開きます。

設定の検索から mcp で検索します。

👇MCP関連の設定画面が表示されます。
ユーザーもしくはワークスペースを選択します。

次でも変更されています(ワークスペース)
モデル コンテキスト プロトコル サーバー構成
settings.jsonで編集

ユーザーだとVSCode本体のsettings.jsonが開きます。
ワークスペースだとワークスペースのルートに .vscode フォルダが作成され、そこに settings.json が作成されます。
※ワークスペースはワークスペースファイル内([ワークスペース名].code-workspace)でも設定できます。

VSCode設定の優先順位はワークスペース＞ユーザー＞デフォルトです。

「settings.jsonで編集」を開きます。

.vscode\settings.json

👆(ワークスペースの場合)設定ファイルが作成されます。

mcpのサンプルが表示されます。
このサンプルはGitHub Copilotが日時を取得するためのサンプルです。

settings.json

...
	"mcp": {
		"inputs": [],
		"servers": {
			"mcp-server-time": {
				"command": "[PythonのPath]",
				"args": ["-m", "mcp_server_time", "--local-timezone=Asia/Tokyo"],
				"env": {
					"PATH": "${env:PATH}"
				}
			}
		}
	}

※このmcp-server-timeのMCPはPythonをインストールしておく必要があります。

👇VSCodeでMCPを有効にするための設定を行います。

settings.json

...
"chat.mcp.enabled": true

MCPを最大限に活用した次世代のWebアプリ開発

Next.js、Honoは Context7 MCP 最新のコードやスニペット
デザインを v0やReaddy、same.new(=AIデザイン生成Webサービス)で作成。
フロントエンドを Figma MCP 画面デザイン等
バックエンドを Supabase MCP DB操作等
資料を filesystem MCP 指定したフォルダに資料や1ファイル化したファイルの読み込み
テストをPlaywright MCP 自然言語でのテストコードの自動生成
Git管理を GitHub MCP GitHubの自動操作等
保守運用を Raygun MCP でエラーの自動追跡
サブスクライブを Stripe MCP Stripeでの実装
多様なAIモデルを GitHub Copilot Agent mode、Claude Sonnet 3.5 3.7、GPT-4oでコード生成追加が可能
AI搭載エディタを VSCode、Cursor、Windsurf 他で利用できます。
AI搭載エディタのエージェント化を AIの自律サポートを Cline、Roo codeで行います。

👆これで開発が出来ます。開発に役立つMCPは他にも数多く公表されています。

readdy

same.new

詳細: MCPを最大限に活用した次世代のWebアプリ開発

Next.js、Honoなどのフレームワークと、様々なツールやサービスを組み合わせることで、開発効率を飛躍的に向上します。

MCP (Model Context Protocol) とは

MCPは、AIモデルが外部の情報源（ドキュメント、コードなど）にアクセスし、それらを活用するための標準化されたプロトコルです。これにより、AIはより正確で最新の情報に基づいてコード生成や提案を行うことが可能になります。

開発環境

以下は、記事で紹介されている開発環境の概要です。

エージェント化とは

AIの進化は、大きく以下の段階に分けられます。

AIによるコード生成、会話: 開発者の指示に基づいてコードを生成したり、会話を行う段階。Copilot（副操縦士）がこの段階に相当し、開発者をサポートします。
エージェント化: 👈️今ココ AIが開発者の代理として、「与えられた目標」 に対しより自律的にタスクを実行する段階。
自律型AI: AI自身が考え、判断し、行動する段階。

「エージェント化」とは、AIが単に指示を待つだけでなく、自らの判断で行動し、与えられた目標を達成するために必要なタスクを自律的に実行できる段階を指します。従来のAIが「ツール」として開発者をサポートする役割だったのに対し、エージェント化されたAIは「共同作業者」あるいは「代理人」として、より主体的な役割を担います。

エージェント化されたAIの特徴

自律性: 「与えられた目標」 に対し、必要なタスクを自ら計画し、実行します。
適応性: 状況の変化に応じて行動を調整し、予期せぬ事態にも対応できます。
推論能力: 過去の経験や知識に基づいて、最適な行動を選択します。
持続性: 長期的な目標に向けて、継続的に行動し、学習します。
インタラクション: 外部環境や他のエージェントとインタラクティブに（相互作用）、協調して作業を進めることができます。

エージェント化のメリット

生産性の向上: 開発者はより高度なタスクに集中でき、AIエージェントがルーチンワークや複雑な作業を代行することで、開発プロセス全体の効率が向上します。
開発期間の短縮: AIエージェントがコード生成、テスト、デプロイなどの作業を自動化することで、開発期間を大幅に短縮できます。
品質の向上: AIエージェントがコードの品質をチェックしたり、テストを自動化することで、バグの少ない高品質なソフトウェアを開発できます。
24時間稼働: AIエージェントは、人間の開発者のように休憩や休日を必要とせず、24時間体制で開発作業を続けることができます。

各ツールの詳細

開発フレームワーク・ライブラリ

Next.js: Reactをベースとしたフレームワークで、サーバーサイドレンダリング（SSR）や静的サイト生成（SSG）などの機能を提供し、高速でSEOに強いWebアプリケーションの開発を可能にします。
- コンポーネントベースの開発: Reactのコンポーネントを組み合わせてUIを構築します。
- ルーティング機能: ページ間の遷移を容易に実装できます。
- APIルート: バックエンドのAPIをNext.js内で作成できます。
- 豊富なエコシステム: 多くのライブラリやツールが利用可能です。
Hono: 軽量で高速なWebフレームワークで、特にAPI開発に適しています。
- 高速なパフォーマンス: 独自のHTTPエンジンにより、非常に高速な処理を実現します。
- シンプルな設計: 学習コストが低く、簡単に使い始めることができます。
- 豊富なミドルウェア: 様々な機能を提供するミドルウェアが用意されています。
- TypeScriptファースト: TypeScriptでの開発を強力にサポートします。

AIを活用したデザインツール

v0: AIを活用したデザイン生成Webサービスで、Next.js、Tailwind CSS、Supabaseなどの技術を組み合わせて、コンポーネントを自動生成します。
- プロンプトによるデザイン生成: テキストによる指示（プロンプト）に基づいて、UIコンポーネントを生成します。
- カスタマイズ可能: 生成されたコンポーネントは、Tailwind CSSを使って自由にカスタマイズできます。
- コード生成: 生成されたコンポーネントのコード（React）を直接取得できます。
Readdy: AIとのチャットを通じて画面デザインを生成するWebサービスです。ドラッグ&ドロップ操作は不要で、AIとの対話によってWebサイトの見た目を構築できます。HTML、Vue、Reactなどの形式でエクスポート可能です。
- チャットベースのUIデザイン: テキストベースの指示でUIをデザインできます。
- 多様な出力形式: 生成されたデザインをHTML、Vue、Reactなどの形式でエクスポートできます。
- 迅速なプロトタイピング: 短時間でWebサイトのプロトタイプを作成できます。
Figma: Webベースのデザインツールで、UIデザインやプロトタイピングに広く利用されています。
- 共同作業: 複数人で同時にデザインを編集できます。
- 豊富なプラグイン: 様々な機能拡張を提供するプラグインが利用可能です。
- プロトタイピング機能: デザインした画面遷移をインタラクティブに確認できます。
- デザインシステム: デザインの一貫性を保つための仕組みを構築できます。

バックエンドプラットフォーム

Supabase: オープンソースのFirebase代替となるプラットフォームで、データベース、認証、ストレージなどの機能を提供します。
- PostgreSQLデータベース: 高性能なデータベースを利用できます。
- 認証機能: ユーザー認証機能を簡単に実装できます。
- ストレージ機能: ファイルのアップロードやダウンロードを管理できます。
- リアルタイム機能: データの変更をリアルタイムに取得できます。

MCP (Model Context Protocol)

filesystem MCP: 指定したフォルダ内のドキュメントやファイルを読み込み、AIが利用できるようにするMCPです。
- ローカルファイルアクセス: ローカル環境にあるファイルの内容をAIが理解し、利用できます。
- ドキュメント解析: テキストファイル、PDFファイルなど、様々な形式のドキュメントを解析できます。
- 情報検索: ファイルの内容に基づいて、関連する情報を検索できます。
Playwright MCP: Playwrightは、E2Eテストを自動化するためのフレームワークです。Playwright MCPを使うことで、自然言語による指示からテストコードを自動生成できます。
- E2Eテスト自動化: ユーザーの操作をシミュレートして、Webアプリケーションのテストを自動化します。
- クロスブラウザ対応: 主要なブラウザ（Chrome、Firefox、Safariなど）でテストを実行できます。
- 自然言語によるテスト記述: 日本語などの自然言語でテストのシナリオを記述できます。
- テストコード生成: 自然言語の記述から、Playwrightのテストコードを自動生成します。
GitHub MCP: GitHubとの連携を自動化するMCPです。
- コード管理自動化: GitHubのリポジトリ作成、プッシュ、プルリクエストなどの操作を自動化できます。
- CI/CD連携: GitHub Actionsと連携して、継続的インテグレーション/継続的デリバリー（CI/CD）のプロセスを自動化できます。
- Issue管理: GitHubのIssueの作成、更新、クローズなどの操作を自動化できます。
Raygun MCP: Raygunは、アプリケーションのエラーやパフォーマンスを監視するツールです。Raygun MCPを使うことで、エラーの自動追跡などが可能になります。
- エラー追跡: アプリケーションで発生したエラーを自動的に検知し、詳細な情報を提供します。
- パフォーマンストラッキング: アプリケーションのパフォーマンスを監視し、ボトルネックを特定します。
- ユーザー行動分析: ユーザーの行動を分析し、問題の原因を特定します。
Stripe MCP: Stripeは、オンライン決済プラットフォームです。Stripe MCPを使うことで、Stripeの機能をWebアプリケーションに組み込むことができます。
- 決済処理: クレジットカード決済、定期購読決済など、様々な決済処理を実装できます。
- 顧客管理: 顧客情報、支払い履歴などを管理できます。
- サブスクリプション管理: 定期購読のプラン作成、管理などを行えます。

AIモデル

GitHub Copilot Agent mode、Claude Sonnet 3.5 3.7、GPT-4o: コード生成に利用できる様々なAIモデルです。これらのモデルを組み合わせることで、より高度なコード生成が可能になります。
- コード補完: 開発者がコードを入力する際に、次の候補を提示します。
- コード生成: 自然言語による指示から、コードを自動生成します。
- 多言語対応: JavaScript、Python、TypeScriptなど、様々なプログラミング言語に対応しています。
- 文脈理解: コードの文脈を理解し、より適切な候補やコードを生成します。

AI搭載コードエディタ

VSCode、Cursor、Windsurf: AI機能を搭載したコードエディタです。
- AIによるコード補完: 高度なAIモデルによる、より正確なコード補完。
- 自然言語によるコード生成: 日本語などの自然言語で指示を記述し、コードを生成。
- コードレビュー支援: AIがコードの問題点を指摘し、改善案を提案。
- デバッグ支援: AIがエラーの原因を特定し、修正方法を提案。

AIエディタのエージェント化ツール

Cline、Roo code: AIエディタをエージェント化するためのツールです。AIがより自律的に開発をサポートできるようになります。
- タスク自動実行: 開発者からの指示に基づいて、複数のタスクを自動的に実行します。
- 自律的な問題解決: 開発中に発生した問題を、AIが自律的に解決しようと試みます。
- 継続的な学習: 開発者の行動やコードを学習し、より高度な支援を提供できるようになります。

これらのツールや技術を組み合わせることで、AIが開発者の指示を待つだけでなく、自律的にタスクを実行し、開発プロセスを効率化することが可能になります。

便利なMCP紹介

Context7

Context7 MCP Server

upstash/context7: Instant LLM Context for Agents and Developers

GitHub Copilotを使っていると、時々古い情報のコードが提案されることがあります。
これは、カットオフ（＝ある特定期間までの情報）されているので最新情報に追いついていないからです。

その弱点を補うのがこの Context7です。
Context7を使用することで、常に最新バージョンのドキュメントやコード例が提案されるようになります。
そしてスニペットと呼ばれる、具体的なコード例も使用することが出来ます。

このスニペットとは、最新バージョンに対応しているコードでの動作確認がされているミニコードです。

Cursorの@Doc機能と似ていますが、@Docはユーザーがドキュメントの場所を毎回指定する必要があります。
Context7を設定すれば、必要なドキュメントへのアクセスが自動化され、常に最新の情報と動作確認済みのスニペットが得られます。

2025年4月現在、Context7は446のサイトに対応しています。

主な対応ドキュメント、スニペット

Next.js
Supabase
Hono
Elasticsearch
Laravel
Clerk
MongoDB
FastAPI
その他

主な特徴

最新のバージョン固有ドキュメントを自動で提供
ソースコードから実際に動作するコード例
無駄な情報がなく、関連性の高い情報を提供
VSCodeやCursor、ClaudeなどのAIツールへの簡単な統合
MCP (Model Context Protocol) サーバーとの連携
個人利用は1日あたり最大 50 クエリまで無料

インストール

npm install -g c7-mcp-server

settings.json

...
	"context7": {
		"command": "c7-mcp-server", // インストールまたはリンクされたコマンド名
		"args": [] // デフォルトでは引数は不要（stdioトランスポート用）
		// "env": {} // 必要に応じて環境変数を追加
	}

Supabase

Model context protocol (MCP) | Supabase Docs

alexander-zuev/supabase-mcp-server

MCPはつなげるだけの役割で、実際に動かすのはGitHub Copilotです。
GitHub Copilotに指示してDBの情報を取得できないときがありますが、
それは人間の指示が悪い場合が多いと思います。

ダイレクトにQueryを発行してデータを取ってきてくれと指示を出すと。
GitHub Copilotはその通りに動いてくれます。

曖昧な指示、「データを取ってきて」とか曖昧だと素直に動かないと思います。

Supabaseへのアクセスが便利になるMCP

主な特徴

Supabaseへのアクセスを効率化
最新ドキュメントやコードスニペットを提供
開発者が簡単にリアルタイムアプリケーションや認証機能を構築可能
複雑なSQLクエリを簡単な言葉で実行
レポート作成や洞察の抽出が容易

ローカル用のSupabase MCPの設定

Docker Desktopをインストールして、ローカルのSupabaseを立ち上げます。

SupabaseのMCPをローカルのSupabaseで動かすための設定ファイルを作成します。

"mcpServers": {
	"supabase": {
		"command": "cmd",
		"args": [
			"/c",
			"npx",
			"-y",
			"@modelcontextprotocol/server-postgres",
			"postgresql://postgres:postgres@127.0.0.1:54322/postgres"
		]
	}
}

※デフォルト値はローカルのSupabase用に設定されています。
サーバーのSupabaseプロジェクトでは、SUPABASE_PROJECT_REFとSUPABASE_DB_PASSWORDに値を指定する必要があります。

環境変数の設定

優先順位

環境変数: 環境内で直接設定される値
ローカル.envファイル:.env現在の作業ディレクトリ内のファイル (ソースから実行している場合にのみ機能します)
グローバル設定ファイル:
ウィンドウズ:%APPDATA%\supabase-mcp.env
macOS/Linux:~/.config/supabase-mcp/.env
デフォルト設定: ローカル開発のデフォルト (他の設定が見つからない場合) 👈今回の設定

サーバーのSupabase MCPの設定 (未設定)

This Supabase MCP Server Will 10X Your Productivity

サーバーのSupabaseプロジェクトでは次の形式を使用します。

postgresql://postgres.[project_ref]:[password]@aws-0-[region].pooler.supabase.com:6543/postgres

[region]
ap-northeast-1 北東アジア（東京）

$env:APPDATA\supabase-mcp
Supabase MCPフォルダを作成します。

echo $env:APPDATA

# Create config directory
# On macOS/Linux
mkdir -p ~/.config/supabase-mcp
# On Windows (PowerShell)
mkdir -Force "$env:APPDATA\supabase-mcp"

# Create and edit .env file
# On macOS/Linux
nano ~/.config/supabase-mcp/.env
# On Windows (PowerShell)
notepad "$env:APPDATA\supabase-mcp\.env"

QUERY_API_KEY=your-api-key
SUPABASE_PROJECT_REF=your-project-ref
SUPABASE_DB_PASSWORD=your-db-password
SUPABASE_REGION=us-east-1
SUPABASE_ACCESS_TOKEN=your-access-token
SUPABASE_SERVICE_ROLE_KEY=your-service-role-key

pipx install supabase-mcp-server

👇️動作未確認 (開発、分析はローカルで行うため)

{
  "mcpServers": {
    "supabase": {
      "command": "/full/path/to/supabase-mcp-server",  // Replace with the actual path from step 1
      "env": {
        "QUERY_API_KEY": "your-api-key",  // Required - get your API key at thequery.dev
        "SUPABASE_PROJECT_REF": "your-project-ref",
        "SUPABASE_DB_PASSWORD": "your-db-password",
        "SUPABASE_REGION": "us-east-1",  // optional, defaults to us-east-1
        "SUPABASE_ACCESS_TOKEN": "your-access-token",  // optional, for management API
        "SUPABASE_SERVICE_ROLE_KEY": "your-service-role-key"  // optional, for Auth Admin SDK
      }
    }
  }
}

※詳細はドキュメントを見てください。

MCPを複数設定

jsonの構造を利用して複数のMCPを設定することができます。
settings.jsonの適当な場所に挿入してください。

設定後起動させてください。

settings.json

...
	//////////////////////////////////////////////////////////
	// MCP
	//////////////////////////////////////////////////////////
	"mcp": {
		"inputs": [],
		"servers": {
			"supabase": {
				"command": "cmd",
				"args": [
					"/c",
					"npx",
					"-y",
					"@modelcontextprotocol/server-postgres",
					"postgresql://postgres:postgres@127.0.0.1:54322/postgres"
				]
			},
			"mcp-server-time": {
				"command": "[pythonのPath]",
				"args": ["-m", "mcp_server_time", "--local-timezone=Asia/Tokyo"],
				"env": {
					"PATH": "${env:PATH}"
				}
			},
			"context7": {
				"command": "c7-mcp-server", // インストールまたはリンクされたコマンド名
				"args": [] // デフォルトでは引数は不要（stdioトランスポート用）
				// "env": {} // 必要に応じて環境変数を追加
			}
		}
	}

※👆このローカルのSupabaseはDocker Desktop等で立ち上げておいてください。

SupabaseのMCPをローカルで動かすための設定ファイルを作成します。

supabase-community/supabase-mcp: Connect Supabase to your AI assistants

Playwright

Playwrightは、テストを自然言語で記述できるようにするMCPです。
AIと連携することで、高品質なテストコードの生成をサポートします。

主な特徴

自然言語によるテスト記述
ドキュメントからコードスニペットと例を自動抽出
LLMを活用した説明とメタデータの強化
セマンティック検索のためのベクトル化機能
関連性に基づくカスタムアルゴリズムでの結果スコアリング
高速なパフォーマンスのためのRedisキャッシュ

Figma

Figmaの図をダイレクトにコード化等してくれます。

GLips/Figma-Context-MCP: MCP server to provide Figma layout information to AI coding agents like Cursor

Figmaのアクセストークンが必要です。

無料ユーザーでもアクセストークンは作れます。
Figmaのサイトで、
左上の自分のアイコンから
設定＞セキュリティのタブ＞個人アクセストークン
で「新規トークンを作成」ボタンを押します。
許可の項目を自分で選び、(期限は無期限、わからなかったら全部下)FigmaのAPIキーを生成します。
1回だけ表示されるので適当な場所にメモしておきます。

主な特徴

Figmaデザイン情報の提供
Figmaコメント操作
React等のコードを自動生成
デザインに関する質疑応答

Figma MCPで出来ること

デザイン情報とAIの連携を円滑にし、開発効率を向上させます。
Figmaのデザイン情報を構造化してAIに提供します。
活用例はコード自動生成、デザインに関する質問応答、コメント操作等。
デザインと開発者間のギャップを埋め、より効率的で精度の高い開発を行います。

Figmaデザイン情報のAI提供

レイアウト情報: 要素の位置、サイズ、親子関係などをAIに構造的に提供。
スタイル情報: 色、フォント、ボーダー、シャドウなどのデザイン属性をAIに提供。
テキスト情報: 要素内のテキストコンテンツをAIに提供。

AIによるデザインの理解と活用

コード生成: 提供されたデザイン情報を基に、HTML/CSS、Reactなどのコードを自動生成。
質問応答: Figmaデザインに関する質問（例：「このボタンの色は？」）に対して、正確な情報を基に回答。
デザイン分析: （将来的に）AIがデザインの構造やスタイルを分析し、改善提案などを行う可能性。

Figmaとのインタラクション

コメント操作: Figma上のコメントを読み取ったり、AIがコメントを書き込んだりすることが可能です。

...
{
	"mcpServers": {
		"Framelink Figma MCP": {
			"command": "cmd",
			"args": [
				"/c",
				"npx",
				"-y",
				"figma-developer-mcp",
				"--figma-api-key=FIGMA-API-KEY(figd_XXXXX)",
				"--stdio"
			]
		}
	}
}

動作確認

デザイン系のMCPなので気軽な動作確認がしづらいです。
ですので、MCP起動後、手動確認をしてみました。
👇のコマンドを実行します。

npx -y figma-developer-mcp --figma-api-key="FIGMA-API-KEY" --stdio

{"method":"notifications/message","params":{"level":"info","data":["Server connected and ready to process requests"]},"jsonrpc":"2.0"}

👆接続に成功したら、このようなメッセージが出ました。
準備が出来ているようです。

GitHub Copilot Agent mode(エージェントに切り替えます)で使えるようになりました。

Stripe

Stripe - MCP Server | Cursor Directory

CursorでStripe MCPを使ってサブスクリプションの実装をやらせてみる

GitHub

GitHubが発表した新技術「github-mcp-server」がなぜ便利なのか、従来との比較と使い方を徹底解説｜D × MirAI

主な特徴

GitHubワークフローとプロセスを自動化します。
プルリクエストやイシューの追跡が自動化します。
GitHubリポジトリからデータを抽出して分析します。
GitHub のエコシステムとやり取りする AI 搭載のツールとアプリケーションを構築します。

github/github-mcp-server: GitHub's official MCP Server
https://github.com/github/github-mcp-server

Introduction - Model Context Protocol

コンテナ内でサーバーを実行するには、Dockerをインストールする必要があります。

GitHub のアクセストークンが必要です。
アクセストークンを作成するには、GitHubの設定ページにアクセスし、[Developer settings] > [Personal access tokens] > [Tokens (classic)]を選択します。
次に、[Generate new token (classic)]をクリックし、必要なスコープを選択してトークンを生成します。

Create a GitHub Personal Access Token.

👆認証必須

GitHub - MCP Server | Cursor Directory

mcp.json

...
	"mcp": {
		"inputs": [],
		"servers": {
			"mcp-server-time": {
				"command": "python",
				"args": [
					"-m",
					"mcp_server_time",
					"--local-timezone=America/Los_Angeles"
				],
				"env": {}
			},
			"github": {
				"command": "cmd",
				"args": ["/c", "npx", "-y", "@modelcontextprotocol/server-github"],
				"env": {
					"GITHUB_PERSONAL_ACCESS_TOKEN": "<YOUR_TOKEN>"
				}
			}
		}
	}

Raygun

主な特徴

エラー追跡・分析
リアルタイムモニタリング
ユーザーが気づく前にクラッシュを検出
実用的な洞察が可能
アプリケーションの安定稼働をサポート

MindscapeHQ/mcp-server-raygun

mcp.json

...
	"mcpServers": {
		"raygun": {
			"command": "npx",
			"args": ["-y", "@raygun.io/mcp-server-raygun"],
			"env": {
				"RAYGUN_PAT_TOKEN": "your-pat-token-here"
			}
		}
	}

Brave Search

GitHub Copilotがネット検索をしてくれます

modelcontextprotocol/servers: Model Context Protocol Servers

👆この🌟 Reference Servers に登録されているので比較的安全だと思われるサイトです。

🌟 Reference Servers
Anthropic自身が実装したMCPサーバー

Anthropic はMCPを開発した会社であり、MCPの開発に関与しています。

前提条件

一応無料
Stripe経由でカード情報と住所が必要
サブスクライブ0$でのカード支払い登録が必要

出来ること

サブスクライブ0$で出来ること

画像検索
ビデオ検索
ニュース検索
提案
スペルチェック
他

導入

アカウント作成します。
サブスクライブに入会します。
Stripe経由でカードの情報を登録します
👆自己責任で！
メールでやり取りをしてアカウントを作成します。

サイトからAPIキーを生成します。
適当な場所に保存しておきます。

settings.json

...
	"brave-search": {
		"command": "npx",
		"args": ["-y", "@modelcontextprotocol/server-brave-search"],
		"env": {
			"BRAVE_API_KEY": "[BRAVE_API_KEY]"
		}
	}

インストール

npx -y @modelcontextprotocol/server-brave-search

Error: BRAVE_API_KEY environment variable is required
is required

👆と出てきますが、このErrorは無視してよいようです。
起動ボタンを押して起動を確認します。
起動できれば、実行中と出ます。

使用例

設定ファイル(settings.json)で、Brave-searchを起動させます。
GitHub Copilotをエージェントモードにします。

※GitHub Copilotの「質問する」、「編集」モードでは検索しません。

エージェントモードに切り替えて指示をします。

例

Brave Searchで Brave Search について検索し、その概要を `Brave Search-summary.md` というファイル名で保存してください。

このように👆具体的に指示することが大切です。
使用するMCPと目的と、出力先等の詳細な情報をはっきり書いてください。

「*****について教えてください」と指示が曖昧ではGitHub Copilotは使ったり使わなかったりします。
GitHub Copilotは空気を読みません、行間を読みません。
前後の文脈から連想して回答しているだけです。

青い「続行」ボタンが表示されるので、押します。

続行ボタンのドロップダウンメニューで「常に許可」を選ぶと、毎回確認しなくなります。

実行の許可が求められるので
自分の責任で良いと思えれば
実行してもらいます。

青い「保持」ボタンを押します。

出力されたファイルを確認して、検索データが取れていればOKです。

使い終わったら有料、回数制限があるので、settings.jsonで停止させておきます。

filesystem

指定した範囲のローカルファイルにアクセスが出来るようになります。

modelcontextprotocol/servers: Model Context Protocol Servers

インストール

npm install -g @modelcontextprotocol/server-filesystem

設定例

settings.json

...
	"file-system": {
		"command": "npx",
		"args": [
			"-y",
			"@modelcontextprotocol/server-filesystem",
			"[アクセスしたいローカルファイルのフォルダ、パス]"
		]
	}

[アクセスしたいローカルファイルのフォルダ、パス]

	👇このように置き換えます。

"C:\\2025_src"

必要な資料を入れたフォルダを指定したりします。
複数のプロジェクトのパスが設定できます。

起動

起動ボタンを押して、エラーが出なければ成功です。

MCP 関連URL

探す

Smithery - Model Context Protocol Registry

VeyraX

MCP Servers for Cursor

modelcontextprotocol/servers: Model Context Protocol Servers

🌟 Reference Servers
Anthropic自身が実装したMCPサーバー

🤝 Third-Party Servers
Anthropic以外が実装したMCPサーバー

VSCodeのMCP Issues

Issues · microsoft/vscode

MCP

Introduction - Model Context Protocol

Gemini API キー

VSCode のGitHub CopilotでGemini系を使うのに登録が必要になりました。

無料で簡単に取得できます。

Geminiを使用するには、GeminiのAPIキーが必要です。
キーは Google AI Studio で数回のクリックで作成できます。

Gemini API キーを取得する | Google AI for Developers

Get API key | Google AI Studio

2025年4月10日現在
gemini 2.5 pro exp 3-25
gemini 2.0 flash
などが使えます。

GitHub Copilotに最新の情報を取得させ、認識させる方法

GitHub Copilotは、使用する基盤モデルによって提案内容が左右されます。
最新モデルであっても、常に最新のライブラリやフレームワークに対応しているとは限りません。
そのため、GitHub Copilotに最新情報を認識させるには、以下の方法があります。

人力
1ファイル化してGitHub Copilotに認識させる
RAGに最新の情報を取得させ、認識させる
MCPを使用する
エージェントモードでLLMが自分で調べる

※下に行くほど人間が楽になります。
※5のエージェントモードはGitHub Copilot Agent modeのことではありません。
LLMが自律行動した場合のことを指します。

1 人力 (とてもたいへん)

ドキュメントを参照する: 使用しているライブラリやフレームワークの公式ドキュメントを確認し、最新の情報を把握します。
最新のバージョンの情報を追いかけます。
学習して使い方を覚えて組み込めるようにします。
GitHubリポジトリを確認する: 使用しているライブラリやフレームワークのGitHubリポジトリを確認し、最新のコードや変更履歴を把握します。

AIが流行る前の一般常識でした。

AIが流行った後は、ある程度最新の情報は仕方ないと自分で調べて1の方法を採用していました。
数カ月後にはいろいろな手法が生み出され、👇2. 以降の技術が出てきました。

2 1ファイル化してGitHub Copilotに認識させる

関連する情報を1つのファイルにまとめ、GitHub Copilotにそのファイルを読み込ませて、コードを提案するように指示します（チャットやプロンプト、指示書を使用）。
GitHubリポジトリを1ファイル化するツール
uithub GitHubのサイトのリポジトリを1ファイル化
repomix CLIのコマンド一つで1ファイル化

その他多数

MCPクライアントアプリ、AI搭載IDE

VSCode
Cursor
Windsurf

1ファイル化したものをMCPクライアントアプリに読み込ませることで、GitHub Copilotが最新の情報を認識しやすくなります。

3 RAGに最新の情報を取得させ、認識させる方法

RAG（Retrieval-Augmented Generation）を使用して、最新の情報を取得し、LLMに認識させる方法です。
RAGは、LLMが情報を生成する際に、外部の情報源から取得した情報を組み合わせて生成する手法です。
共通の規格など無く、各開発者が自由に開発していました。

4 MCPを使用する

共通の規格が採用され、GitHub Copilotに取り込むのが非常に楽になりました。それがMCPと呼ばれるAIコネクト共通規格です。これがUSBコネクターと言われる所以です。
Context7 ＜＜今回のBlogで紹介したMCP

事前準備された最新バージョンの情報等を用意しておき、LLMが自律的に最新の情報、コード、スニペットを収集できるようにします。

5 エージェントモードでLLMに自律的に調べさせる

エージェントモードを搭載したエディタなどを使用し、LLMが自律的に情報を収集し、それに基づいてコードを生成する環境が実現しつつあります。

※このエージェントモードはGitHub Copilot Agent modeとは別です。

最後に

👆 5に関して、
現在のところ、エージェントという言葉のとおり代理人になるのが限界です。
自律タイプのAIはまだ出てきていません。

AIには、弱いAIと強いAIという分類があります。

弱いAI 人からの指示に基づいて動作するAI
強いAI 自律的に行動し、自分で情報を収集や判断できるAI

もし強いAIが現れれば、6. 自律調査ができる。が可能になれば、技術的特異点（シンギュラリティ）が起こったと言えるかもしれません。
擬似的に自律的に動いているように見せることは出来ます。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

便利なMCP 2025年4月版 (もう古いコードの提案はしなくなるMCP他)

GitHub Copilotシリーズ

VSCodeでのMCP設定

MCPを最大限に活用した次世代のWebアプリ開発

MCP (Model Context Protocol) とは

開発環境

エージェント化とは

エージェント化されたAIの特徴

エージェント化のメリット

各ツールの詳細

開発フレームワーク・ライブラリ

AIを活用したデザインツール

バックエンドプラットフォーム

MCP (Model Context Protocol)

AIモデル

AI搭載コードエディタ

AIエディタのエージェント化ツール

便利なMCP紹介

Context7

主な対応ドキュメント、スニペット

主な特徴

インストール

最新コード

Next.js

TypeScript

TailwindCSS

Hono

Drizzle

Zod

Supabase

主な特徴

ローカル用のSupabase MCPの設定

環境変数の設定

サーバーのSupabase MCPの設定 (未設定)

MCPを複数設定

Playwright

主な特徴

Figma

主な特徴

Figma MCPで出来ること

動作確認

Stripe

GitHub

主な特徴

Raygun

主な特徴

Brave Search

前提条件

出来ること

導入

インストール

使用例

filesystem

インストール

設定例

起動

MCP 関連URL

探す

VSCodeのMCP Issues

MCP

Gemini API キー

GitHub Copilotに最新の情報を取得させ、認識させる方法

1 人力 (とてもたいへん)

2 1ファイル化してGitHub Copilotに認識させる

3 RAGに最新の情報を取得させ、認識させる方法

4 MCPを使用する

5 エージェントモードでLLMに自律的に調べさせる

最後に