VSCodeの左下の歯車アイコンから「設定」を開きます。
設定の検索から 「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
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
MCPはつなげるだけの役割で、実際に動かすのはGitHub Copilotです。
GitHub Copilotに指示してDBの情報を取得できないときがありますが、
それは人間の指示が悪い場合が多いと思います。
ダイレクトにQueryを発行してデータを取ってきてくれと指示を出すと。
GitHub Copilotはその通りに動いてくれます。
曖昧な指示、「データを取ってきて」とか曖昧だと素直に動かないと思います。
Supabaseへのアクセスが便利になるMCP
主な特徴
- Supabaseへのアクセスを効率化
- 最新ドキュメントやコードスニペットを提供
- 開発者が簡単にリアルタイムアプリケーションや認証機能を構築可能
- 複雑なSQLクエリを簡単な言葉で実行
- レポート作成や洞察の抽出が容易
ローカル用のSupabase MCPの設定
Docker Desktopをインストールして、ローカルのSupabaseを立ち上げます。
SupabaseのMCPをローカルのSupabaseで動かすための設定ファイルを作成します。
"servers": {
"supabase": {
"command": "cmd",
"args": [
"/c",
"npx",
"-y",
"@modelcontextprotocol/server-postgres",
"postgresql://postgres:[email protected]:54322/postgres"
]
}
}
複数設定
MCPを複数設定することができます。settings.jsonの適当な場所に挿入してください。
設定後 起動させてください。
settings.json
...
//////////////////////////////////////////////////////////
// MCP
//////////////////////////////////////////////////////////
"mcp": {
"inputs": [],
"servers": {
"supabase": {
"command": "cmd",
"args": [
"/c",
"npx",
"-y",
"@modelcontextprotocol/server-postgres",
"postgresql://postgres:[email protected]: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": {} // 必要に応じて環境変数を追加
}
}
},
settings.json
...
"mcp": {
"inputs": [],
"servers": {
"mcp-server-time": {
"command": "[pythonのPath]",
"args": [
"-m",
"mcp_server_time",
"--local-timezone=Asia/Tokyo"
],
"env": {
"PATH": "${env:PATH}"
}
},
"supabase": {
"command": "cmd",
"args": [
"/c",
"npx",
"-y",
"@modelcontextprotocol/server-postgres",
"postgresql://postgres:[email protected]:54322/postgres"
]
}
}
}
※👆このローカルのSupabaseはDocker Desktop等で立ち上げておいてください。
SupabaseのMCPをローカルで動かすための設定ファイルを作成します。
supabase-community/supabase-mcp: Connect Supabase to your AI assistants
Playwright
Playwrightは、テストを自然言語で記述できるようにするMCPです。
AIと連携することで、高品質なテストコードの生成をサポートします。
主な特徴
- 自然言語によるテスト記述
- ドキュメントからコードスニペットと例を自動抽出
- LLMを活用した説明とメタデータの強化
- セマンティック検索のためのベクトル化機能
- 関連性に基づくカスタムアルゴリズムでの結果スコアリング
- 高速なパフォーマンスのためのRedisキャッシュ
Figma
Figmaの図をダイレクトにコード化
主な特徴
？
Stripe
Stripe – MCP Server | Cursor Directory
CursorでStripe MCPを使ってサブスクリプションの実装をやらせてみる
GitHub
主な特徴
- 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": ""
}
}
}
}
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"
}
}
}
}
探す
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
GitHub Copilotは、使用する基盤モデルによって提案内容が左右されます。
最新モデルであっても、常に最新のライブラリやフレームワークに対応しているとは限りません。
そのため、GitHub Copilotに最新情報を認識させるには、以下の方法があります。
- 人力
- 1ファイル化してGitHub Copilotに認識させる
- RAGに最新の情報を取得させ、認識させる方法
- MCPを使用する
- エージェントモードでLLMが自分で調べる
※下に行くほど人間が楽になります。
※5のエージェントモードはGitHub Copilot Agent modeのことではない。LLMが自律行動する場合のこと
- 人力 (とてもたいへん)
-
ドキュメントを参照する: 使用しているライブラリやフレームワークの公式ドキュメントを確認し、最新の情報を把握します。
最新のバージョンの情報を追いかけます。
学習して使い方を覚えて組み込めるようにします。 -
GitHubリポジトリを確認する: 使用しているライブラリやフレームワークのGitHubリポジトリを確認し、最新のコードや変更履歴を把握します。
- 1ファイル化してGitHub Copilotに認識させる
-
関連する情報を1つのファイルにまとめ、GitHub Copilotにそのファイルを読み込ませて、コードを提案するように指示します（チャットやプロンプト、指示書を使用）。
-
GitHubリポジトリを1ファイル化するツール
-
uithub GitHubのサイトのリポジトリを1ファイル化
-
repomix CLIのコマンド一つで1ファイル化
その他多数
- MCPクライアントアプリ、AI搭載IDE
VSCode
Cursor
Windsurf
1ファイル化したものをMCPクライアントアプリに読み込ませることで、GitHub Copilotが最新の情報を認識しやすくなります。
- RAGに最新の情報を取得させ、認識させる方法
- RAG（Retrieval-Augmented Generation）を使用して、最新の情報を取得し、LLMに認識させる方法です。
- RAGは、LLMが情報を生成する際に、外部の情報源から取得した情報を組み合わせて生成する手法です。
- MCPを使用する
- Context7 ＜＜今回のBlog
事前準備された最新バージョンの情報等を用意しておき、LLMが自律的に最新の情報、コード、スニペットを収集できるようにします。
- エージェントモードでLLMに自律的に調べさせる
- エージェントモードを搭載したエディタなどを使用し、LLMが自律的に情報を収集し、それに基づいてコードを生成する環境が実現しつつあります。
※このエージェントモードはGitHub Copilot Agent modeとは別です。
AIには、弱いAIと強いAIという分類があります。
- 弱いAI 人からの指示に基づいて動作するAI
- 強いAI 自律的に行動し、自分で情報を収集や判断できるAI
もし強いAIが現れれば、技術的特異点（シンギュラリティ）が起こったと言えるかもしれません。
Views: 0
