Context7をVSCodeで利用する方法について

Context7は、AIコーディングアシスタントに対して、ライブラリやフレームワークの最新かつバージョン別のドキュメントやコード例を提供するためのサービスです。

AIにプログラミングについて質問すると、モデルが持つ学習済み知識だけでは、古いAPIや過去の設定方法が回答に含まれることがあります。

Context7を利用すると、AIが必要に応じて対象ライブラリのドキュメントを参照できるため、現在の仕様に近いコードや説明を生成しやすくなります。

特に、Next.js、React、Supabase、Prisma、Tailwind CSSなど、アップデートが頻繁な技術を利用するときに便利です。

VSCodeでは、MCP（Model Context Protocol）を通じてContext7をAI機能と連携できます。

VSCodeでContext7を使う仕組み

VSCodeでContext7を利用する場合、Context7そのものに質問するわけではありません。

GitHub Copilot ChatなどのAI機能がMCPを通じてContext7へアクセスし、必要なドキュメントを取得して回答へ利用します。

構成を簡単に表すと、次のようになります。

ユーザー
  ↓
VSCode
  ↓
GitHub Copilot Chatなど
  ↓
MCP
  ↓
Context7
  ↓
ライブラリのドキュメント

そのため、Context7はAIアシスタントを置き換えるものではなく、AIへ追加のドキュメント情報を与えるための仕組みと考えると分かりやすいでしょう。

VSCodeでContext7を利用するために必要なもの

VSCode 1.101以降

Context7公式のVSCode拡張機能を利用する場合は、VSCode 1.101以降が必要です。

古いVSCodeを使用している場合は、先にアップデートしておきましょう。

WindowsやLinuxでは、VSCode上部のメニューからアップデートを確認できます。

macOSでも同様に、VSCodeのアップデート機能から最新版へ更新できます。

MCPを利用できるAI機能

Context7はMCPサーバーとして動作するため、MCPツールを利用できるAI機能が必要です。

VSCodeでは、GitHub Copilot ChatのAgentモードなどから利用できます。

通常の質問応答だけではなく、AIエージェントが外部ツールを呼び出せる状態になっていることが重要です。

Context7公式VSCode拡張機能を利用する方法

Context7 MCP Serverをインストールする

VSCodeを起動し、左側のExtensionsを開きます。

WindowsやLinuxでは、次のショートカットでも開けます。

Ctrl + Shift + X

macOSでは、次のショートカットです。

Cmd + Shift + X

検索欄に、次の文字列を入力します。

Context7

または、

Upstash.context7-mcp

と検索します。

「Context7 MCP Server」を見つけたら、インストールしてください。

Context7公式ドキュメントでも、VSCodeで利用する場合は公式拡張機能を使う方法が簡単な手段として案内されています。

MCPサーバーが登録されたか確認する

Context7 MCP Serverをインストールすると、Context7のMCPサーバーがVSCodeへ自動登録されます。

正常に登録されているか確認するには、コマンドパレットを開きます。

WindowsやLinuxでは、

Ctrl + Shift + P

macOSでは、

Cmd + Shift + P

を押します。

続いて、次のコマンドを検索して実行します。

MCP: List Servers

一覧にContext7が表示されていれば、基本的な接続設定は完了です。

GitHub Copilot ChatからContext7を利用する方法

Agentモードを利用する

Context7をMCP経由で利用する場合は、MCPツールを呼び出せるモードを使います。

GitHub Copilot Chatでは、Agentモードから利用できます。

VSCodeのバージョンやCopilotのUIによって名称や表示位置が変わる場合がありますが、ツールを利用できるエージェント型のモードを選択してください。

「use context7」を付けて質問する

Context7公式では、プロンプト内に、

use context7

と記述する方法が案内されています。

例えば、Next.jsについて質問する場合は、次のように入力できます。

Next.jsのApp RouterでAPIを作成する現在の方法を教えて。
use context7

Reactについて質問する場合は、次のように入力できます。

ReactのuseEffectの現在の推奨される使い方を教えて。
use context7

Supabaseであれば、次のような質問もできます。

Supabaseで認証機能を実装する方法を教えて。
use context7

Context7を指定することで、AIがContext7のMCPツールを利用して関連ドキュメントを参照しやすくなります。

Context7ではどのようにドキュメントを取得するのか

Context7では、ライブラリを特定したうえで、そのライブラリに関連するドキュメントを検索します。

例えば、Next.jsについて質問した場合は、概念的には次のような流れになります。

Next.jsについて質問
  ↓
対象ライブラリを特定
  ↓
Context7ライブラリIDを取得
  ↓
関連ドキュメントを検索
  ↓
AIへコンテキストとして渡す
  ↓
回答を生成

現在の公式VSCodeドキュメントでは、主に次のMCPツールが案内されています。

resolve-library-id
query-docs

resolve-library-idは、ライブラリ名からContext7上のライブラリIDを特定するために利用されます。

query-docsは、特定されたライブラリについてドキュメントを検索するために利用されます。

なお、古いドキュメントや一部のREADMEではget-library-docsという表記が見られる場合もあります。

記事や設定例を確認するときは、最新のContext7公式ドキュメントを基準にするとよいでしょう。

Context7のライブラリIDを直接指定する方法

ライブラリIDを指定すると対象を明確にできる

Context7では、ライブラリ名だけではなく、Context7上のライブラリIDを直接指定することもできます。

例えば、Supabaseであれば、

/supabase/supabase

Next.jsであれば、

/vercel/next.js

のように指定できます。

プロンプトでは、例えば次のように入力します。

use context7 with /supabase/supabase for authentication docs

または、

use context7 with /vercel/next.js for app router setup

のように指定できます。

同じ名前や似た名前のライブラリが複数存在する場合は、ライブラリIDを直接指定すると対象を明確にできます。

毎回「use context7」と入力しない方法

copilot-instructions.mdを利用する

Context7を頻繁に利用する場合は、毎回プロンプトへuse context7と入力するのが手間になることがあります。

その場合は、GitHub Copilotのカスタム指示を利用できます。

プロジェクト内に、次のファイルを作成します。

.github/copilot-instructions.md

例えば、次のような指示を書きます。

ライブラリ、フレームワーク、APIに関する質問や、
外部ライブラリを利用したコードを生成するときは、
可能な場合はContext7を利用して現在のドキュメントを確認してください。

英語では、次のような書き方もできます。

Use Context7 for library documentation and code generation.

このように設定しておくと、AIに対して継続的にContext7を利用するよう指示できます。

ただし、必ずすべての質問でContext7が呼び出されるとは限りません。

最終的にツールを利用するかどうかは、AIエージェント側の判断や設定にも依存します。

Context7のAPIキーは必要なのか

APIキーは必須ではない

Context7公式VSCode拡張機能を利用する場合、APIキーは必須ではありません。

APIキーなしでもContext7を利用できます。

APIキーを設定すると、主に次のメリットがあります。

・より高いレート制限
・private repositoriesへのアクセス

そのため、まずはAPIキーなしで利用し、必要になったら設定する方法でも問題ありません。

VSCode拡張機能でAPIキーを設定する方法

APIキーを設定する場合は、VSCodeの設定画面から、

Context7: Api Key

を検索します。

また、settings.jsonへ次のように設定することもできます。

{
  "context7.apiKey": "YOUR_API_KEY"
}

APIキーは秘密情報なので、公開リポジトリへ含めないよう注意が必要です。

特に、.vscode/settings.jsonをGitで管理している場合は、APIキーを書き込んだ状態でコミットしないようにしましょう。

APIキーは、可能であればユーザー設定として保存するほうが安全です。

mcp.jsonを使ってContext7を手動設定する方法

Remote HTTPで接続する

公式拡張機能を利用せず、VSCodeのMCP設定からContext7へ接続することもできます。

プロジェクト内に、次のファイルを作成します。

.vscode/mcp.json

Remote HTTP方式では、例えば次のように設定します。

{
  "servers": {
    "context7": {
      "type": "http",
      "url": "https://mcp.context7.com/mcp",
      "headers": {
        "Authorization": "Bearer YOUR_API_KEY"
      }
    }
  }
}

この方法では、VSCodeからContext7のリモートMCPサーバーへ直接接続します。

構成は次のようになります。

VSCode
  ↓
HTTPS
  ↓
Context7 MCP

ローカルでContext7のMCPプロセスを起動する必要がないため、比較的シンプルです。

APIキーの管理に注意する

mcp.jsonへAPIキーを直接書く場合は、Gitへのコミットに注意してください。

例えば、

.vscode/mcp.json

をリポジトリで管理していると、APIキーがGitHubなどへ公開される可能性があります。

秘密情報を含む設定ファイルは、必要に応じて.gitignoreへ追加するなどの対策を行いましょう。

npxを使ってContext7をローカル起動する方法

stdio方式で接続する

Context7 MCPは、npxを利用してローカルで起動することもできます。

.vscode/mcp.jsonへ、例えば次のように設定します。

{
  "servers": {
    "context7": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "@upstash/context7-mcp",
        "--api-key",
        "YOUR_API_KEY"
      ]
    }
  }
}

この場合の構成は、次のようになります。

VSCode
  ↓
npx
  ↓
@upstash/context7-mcp
  ↓
Context7

Remote HTTPとは異なり、ローカル環境でNode.jsを利用してMCPサーバーを起動します。

Context7のローカル実行に必要なNode.js

Node.js 20以降を利用するのが安全

npx @upstash/context7-mcpを利用する場合は、Node.jsが必要です。

現在のContext7関連ドキュメントやMCPパッケージでは、Node.js 20系以上を前提とする情報が示されています。

そのため、ローカル方式を利用する場合はNode.js 20以降を使用するのが安全です。

Node.jsが利用できるかどうかは、VSCodeのターミナルで次のコマンドを実行して確認できます。

node --version

npmのバージョンも確認できます。

npm --version

npxについては、次のコマンドです。

npx --version

Remote HTTP方式ならNode.jsは不要

Context7のRemote HTTP方式を利用する場合は、ローカルでNode.jsを実行する必要はありません。

そのため、

Node.jsをインストールしたくない

という場合は、公式VSCode拡張機能やRemote HTTP方式を利用するほうが簡単です。

Context7 CLIを利用する方法

VSCodeのターミナルからContext7を使える

Context7にはMCPだけではなく、CLIも用意されています。

VSCodeの統合ターミナルから利用することもできます。

ヘルプを表示する場合は、例えば次のように実行します。

npx ctx7 --help

ライブラリを検索する場合は、次のようなコマンドを利用できます。

npx ctx7 library react

グローバルインストールする場合は、次のように実行します。

npm install -g ctx7

インストール後は、次のコマンドでバージョンを確認できます。

ctx7 --version

MCPとは別に、ターミナルからContext7の機能を利用したい場合に便利です。

Context7を使うと効果的な質問

最新仕様が重要なライブラリについて質問する

Context7は、外部ライブラリやフレームワークの現在の仕様が重要な質問で特に効果を発揮します。

例えば、次のような質問が向いています。

Next.jsのApp Routerで認証を実装する現在の方法を教えて。
use context7

現在のPrismaでPostgreSQLへ接続するコードを書いて。
use context7

Supabase AuthをNext.jsで利用する現在の推奨構成を教えて。
use context7

ReactでuseEffectを使うべきケースを説明して。
use context7

Tailwind CSSの現在の設定方法を教えて。
use context7

特にバージョンアップによる変更が多い技術では、Context7を利用するメリットが大きくなります。

Context7を利用するメリット

古いコードが生成される可能性を減らせる

AIコーディングで起こりやすい問題の一つが、古いAPIや廃止済みの設定方法を生成してしまうことです。

例えば、

そのAPIは現在非推奨になっている

その設定方法は旧バージョン向けである

といったケースがあります。

Context7を利用すると、モデルの学習済み知識だけではなく、現在のライブラリドキュメントを参照しやすくなるため、このような問題を減らせます。

ハルシネーションを抑えやすい

AIは、ときどき実際には存在しないメソッドや設定項目を生成することがあります。

Context7を利用すると、実際のライブラリドキュメントをコンテキストとして利用できるため、誤ったAPIを生成する可能性を抑えやすくなります。

ただし、Context7を利用すれば誤りが完全になくなるわけではありません。

重要なコードについては、公式ドキュメントやテスト結果も確認することが大切です。

バージョン変化の激しい技術と相性がよい

Context7は、特に次のような技術と相性がよいでしょう。

Next.js
React
Supabase
Prisma
Tailwind CSS
Vite
Astro
Nuxt
FastAPI
LangChain

これらのライブラリやフレームワークでは、メジャーバージョンの更新によって設定方法やAPIが大きく変わることがあります。

Context7を利用すると、モデルが古い知識だけをもとに回答するリスクを減らせます。

Context7が動かない場合の確認ポイント

MCPサーバーが登録されているか確認する

最初に確認したいのは、Context7 MCPサーバーがVSCodeへ登録されているかどうかです。

コマンドパレットから、

MCP: List Servers

を実行します。

一覧にContext7が表示されるか確認してください。

VSCodeのバージョンを確認する

Context7公式VSCode拡張機能を利用する場合は、VSCode 1.101以降が必要です。

古いバージョンの場合は、最新版へアップデートしてください。

Agentモードになっているか確認する

Context7を登録していても、AI側がMCPツールを利用できないモードではContext7が呼び出されないことがあります。

GitHub Copilot Chatを利用する場合は、MCPツールを利用できるAgentモードなどになっているか確認しましょう。

npxが認識されない場合

ローカル方式を利用していて、

npx is not recognized

などのエラーが表示される場合は、Node.jsが正しくインストールされているか確認します。

VSCodeのターミナルで、

node --version

npm --version

npx --version

を実行して、正常にバージョンが表示されるか確認してください。

APIキーを確認する

APIキーを設定している場合は、設定内容が正しいか確認します。

例えば、

YOUR_API_KEY

という文字列をそのまま残していないか確認してください。

また、APIキーをGitHubなどへ公開しないよう注意が必要です。

Context7をVSCodeで利用するときのおすすめ構成

初めて使うなら公式VSCode拡張機能がおすすめ

初めてContext7を利用する場合は、公式VSCode拡張機能を利用する方法が最も分かりやすいでしょう。

構成は次のようになります。

VSCode
  │
  ├─ GitHub Copilot Chat
  │      │
  │      └─ Agent Mode
  │             │
  │             └─ MCP
  │                   │
  │                   └─ Context7
  │                          │
  │                          ├─ Next.js
  │                          ├─ React
  │                          ├─ Supabase
  │                          ├─ Prisma
  │                          └─ その他のライブラリ
  │
  └─ Context7 MCP Server

設定手順をまとめると、次の流れになります。

1. VSCodeを1.101以降へ更新
        ↓
2. GitHub Copilot Chatを利用可能にする
        ↓
3. Context7 MCP Serverをインストール
        ↓
4. MCP: List Serversを実行
        ↓
5. Context7が表示されることを確認
        ↓
6. Copilot ChatをAgentモードで開く
        ↓
7. 「use context7」を付けて質問する

Context7をVSCodeで使うときのポイント

Context7をVSCodeで利用すると、AIがモデル内部の知識だけではなく、ライブラリの現在のドキュメントを参照しながら回答しやすくなります。

特に、Next.jsやReact、Supabase、Prismaなど、アップデートの頻度が高い技術についてAIへ質問するときに有効です。

初心者であれば、まずは公式の「Context7 MCP Server」VSCode拡張機能をインストールし、GitHub Copilot ChatのAgentモードから利用する方法が分かりやすいでしょう。

より細かく接続方法を管理したい場合は、.vscode/mcp.jsonによるRemote HTTP接続や、npx @upstash/context7-mcpを使ったローカル接続も選択できます。

なお、Context7はAIの回答を必ず正しくする仕組みではありません。

重要な設定や本番環境で利用するコードについては、Context7の回答だけに依存せず、対象ライブラリの公式ドキュメントや実際の動作確認と組み合わせて利用することが重要です。

以上、Context7をVSCodeで利用する方法についてでした。

最後までお読みいただき、ありがとうございました。