AIコーディングの「知識カットオフ」を埋める Context7 MCP Server

Next.jsやReactで、もう互換性のない前バージョンの書き方でコードが生成され、書き直しになったことがあります。

AIコーディングアシスタントに最新のドキュメントを直接渡す方法がないか、気になって調べました。

この記事は、Context7 MCP ServerをCursor・Claude Desktop・Claude Codeの3つに入れて動かすところまでの手順です。

忙しい人のための要約

導入するかを決めるだけなら、次の3点で足ります。

• Cursor・Claude Desktop・Claude CodeはいずれもJSON数行かコマンド1つでMCPサーバーを追加できる
• プロンプト末尾に「use context7」と書くと、そのライブラリの最新ドキュメントを踏まえたコードが生成される
• 「use context7」は明示しないと発動しないので、書き忘れると効果がない

Context7 MCP Serverの役割

簡単に言うと、AIアシスタントに最新のドキュメントを教えてあげるツールです。

図書館で例えるなら、古い参考書しか置いていない図書館から、常に最新版が揃っている図書館に変わるようなもの。
ただし司書は自動では動かず、「最新版を出して」と頼んだときだけ動きます。

Context7は、サーバーレスのRedisなどを手がけるUpstashが開発したMCPサーバーです。
2026年8月時点で、15,000以上のライブラリの公式ドキュメントに対応しています。

使い方はシンプルで、プロンプトに「use context7」を追加するだけで動作します。

Context7が解決する問題

AIコーディングアシスタントは学習時点の知識で止まっています。
Next.js 15が出てもTypeScript 5.5の新機能が追加されても、古いバージョンの書き方をそのまま提案してきます。

Context7を使えば、プロンプトに一言添えるだけでAIが最新ドキュメントを取得し、バージョン固有の正確なコード例を提示してくれます。

得られるメリットは次のとおりです。

• エラーが減る
• デバッグ時間が短縮される
• 最新のベストプラクティスに従ったコードが書ける

しかも完全無料のOSSです。

各ツールでの設定

Context7の導入に必要なのは、Node.jsがインストールされた環境でnpxコマンドが動くことだけです。
CursorとClaude Desktopは設定ファイルにJSONを数行追加、Claude Codeはコマンドを1つ実行するだけで済みます。

設定値の最新版は公式リポジトリで確認できます。

Cursorでの設定

Cursorユーザーは以下の手順で設定します。

まず、設定画面を開きます。
「Cursor設定」→「MCP」→「新しいグローバルMCPサーバーを追加」へ進みます。

次に、以下の設定を追加します。

{
  "mcpServers": {
    "context7": {
      "command": "npx",
      "args": ["-y", "@upstash/context7-mcp@latest"]
    }
  }
}

直接ファイルを編集する場合は、~/.cursor/mcp.jsonを開いて同じ内容を追加します。

Claude Desktopでの設定

claude_desktop_config.jsonの場所はOSによって違います。

macOSなら~/Library/Application Support/Claude/claude_desktop_config.jsonです。
Windowsなら%APPDATA%\Claude\claude_desktop_config.jsonです。

このファイルに以下を追加します。

{
  "mcpServers": {
    "Context7": {
      "command": "npx",
      "args": ["-y", "@upstash/context7-mcp@latest"]
    }
  }
}

Claude Codeでの設定

Claude Codeなら、コマンド一発で設定完了です。
まずはローカル実行のこちらを使います。

claude mcp add context7 -- npx -y @upstash/context7-mcp

npxの実行に失敗する、あるいは社内ネットワークなどでローカルプロセスの起動が制限されている場合は、HTTP接続に切り替えます。

claude mcp add --transport http context7 https://mcp.context7.com/mcp

2026年8月時点では、いずれもAPIキーなしで動作します。

利用量が多くレート制限に達しやすい場合は、context7.com/dashboardで無料のAPIキーを取得してください。
コマンドに--api-key引数を足すと、上限が緩和されます。

CursorやClaude Codeなど対応ツールでは、npx ctx7 setupを実行すると、認証・APIキー発行・セットアップを一括で済ませられます。

動作確認

設定を追加したら、次の状態を確認します。

• Claude Codeなら/mcpコマンドの一覧にcontext7が表示される
• Cursor・Claude Desktopなら、新しいチャットで「use context7」を含むプロンプトを送り、応答にライブラリのドキュメント参照が現れる
• いずれのツールでも反応がない場合は、設定ファイルの保存後にアプリやセッションを再起動する

実際の使い方

設定が済んだら、あとはプロンプトの書き方だけです。
通常のプロンプトの末尾に「use context7」を追加すると、そのやり取りの中でAIが最新ドキュメントを参照します。

「use context7」を付け忘れると、Context7の存在に気付かずライブラリの情報を取りに行ってくれなかったことがあります。
ごくまれに付けなくても参照してくれた場合もありましたが、あくまで例外的な挙動です。
確実に使わせたいなら「use context7」と明記するか、「context7で最新情報を調べてから」という一文をプロンプトに入れると安定します。

基本的な使用例

Next.jsのプロジェクトを作る場合。

基本的なNext.jsプロジェクトをappルーターで作成してください。use context7

データベース操作のスクリプトを作る場合。

PostgreSQLの認証情報を使って、cityが空白の行を削除するスクリプトを作成してください。use context7

より実践的な活用法

React 19の新機能を使いたいとき。

React 19の新しいuse()フックを使用して、非同期データフェッチングを実装してください。use context7

TypeScript 5.5の新機能を活用したいとき。

TypeScript 5.5の新機能を使用して、型安全なAPIクライアントを作成してください。use context7

こうすることで、最新仕様に準拠したコードが生成されます。

ここまでMCPサーバーを1つ扱いましたが、複数のMCPサーバーを組み合わせて使う場面も増えています。

拙著『Claude Codeで作って学ぶ AI駆動アプリ開発入門』（技術評論社、2026年9月8日発売）の第7章では、MCPの仕組みや追加・管理の基本に加えて、Context7 MCPの活用も扱っています。

他にも、Playwright MCPを使ったブラウザ自動化やSupabase MCPを使ったデータベース連携など、実践的なMCP活用をハンズオンで進める構成です。

まとめ

Context7 MCP Serverは、プロンプト末尾に「use context7」と一言添えるだけで、最新のライブラリドキュメントを踏まえたコードを生成できるツールです。
設定もCursor・Claude Desktop・Claude Codeのいずれも、JSON数行かコマンド1つで済みます。

「use context7」を明示しないと発動しない点は手間ですが、そのぶんのトークン消費増よりも、古いAPIで書かれたコードを書き直す手間の方がずっと大きいというのが実感です。
まだ試していない方は、まず1つのプロジェクトで使ってみてください。

Xをフォローいただけると嬉しいです！

AI駆動開発（特に Claude Code）のノウハウや Tips をよく発信しています！