Context7 ガイド：AIコーディングアシスタントに最新ドキュメントを理解させる

Sat, 02 May 2026 19:51:00 +0800

概要

こんな経験はありませんか？AI にコードを書かせたら、たくさん出力したのに実行するとエラーになる。または、ドキュメントに明らかに存在する API なのに、AI が「存在しません」と言う。

AI がバカなのではありません。学習データには賞味期限があるのです。数ヶ月前や一年前のデータで学習している間に、フレームワークは何度もアップデートされています。

Context7 はこの問題を解決します。Upstash チームが開発したもので、質問時に最新の公式ドキュメントを取得し、AI のコンテキストに注入して、現在のバージョンに基づいて回答させます。

使い方は簡単で、プロンプトの末尾に use context7 を追加するだけです。AI に「推測するな、まず最新ドキュメントを確認してから答えて」と伝えるようなものです。

なぜ必要か？

💥 具体例

個人サイトに「トップに戻る」ボタンを追加したいとします。ページをスクロールすると右下にボタンが表示され、クリックすると一番上に戻る、というものです。

AI が古い知識で書いたコード： 数十 KB のサードパーティライブラリを読み込み、それを呼び出すためのコードを大量に書く。機能は実現できますが、たった一つのボタンのためにページが遅くなり、コードが冗長になります。

実際には今はもっと簡単です： モダンブラウザにはスムーズスクロールとスクロール検出が組み込まれています。数行のコードで済み、追加ライブラリは不要です。

AI はこれを知りません。なぜなら数年前の教材で学習したからです。

use context7 を追加すると、Context7 が最新ドキュメントを確認し、ネイティブ機能で十分だと判断します。AI は古いやり方ではなく、より軽量な方法を選びます。

これは、友達にスマホの修理を頼んだとき、3年前の手順を記憶だけで分解しようとするようなものです。ネジの位置は変わっています。最新のチュートリアルを先に見ておけば、壊さずに済みます。

Context7 の有無の違い

	なし	あり
情報源	AI の古い知識（時代遅れの可能性）	公式ドキュメントからリアルタイム取得
API の正確性	よく間違える、または既に存在しない API を使う	現在のバージョンの API を保証
コード品質	数年前の古い書き方の可能性	最新の推奨される書き方
バージョン対応	バージョンを無視して推測	指定したバージョンを検索

🔄 仕組み

数ステップで完了します：

質問する（末尾に use context7 を追加）
    ↓
Context7 が質問対象のコードパッケージを特定
    ↓
GitHub と公式ドキュメントサイトから最新情報を取得
    ↓
最も関連性の高い部分をフィルタリングして AI の「コンテキスト」に注入
    ↓
AI が最新ドキュメントをもとに回答

「コンテキスト」とは、AI が現在の会話で「見える」内容のことです。ドキュメントを注入するのは、テーブルに参考書を広げるようなもので、AI はそれを見ながら回答します。

ドキュメントの出所は？GitHub リポジトリ、公式ドキュメントサイト、そしてプロジェクトメンテナーが作成した llms.txt（AI 向けのドキュメントインデックスファイル）です。

結果を取得した後、Context7 は LLM を使ってインテリジェントに並べ替え、最も関連性の高い部分だけを選び出します。

2つの使い方：

方法	説明
MCP モード（推奨）	一度インストールすれば、AI コーディングアシスタントが自動的に呼び出す。MCP は AI にプラグインを追加するようなもの
CLI 手動モード	ターミナルでコマンドを打って手動でドキュメントを検索

コア機能

スマートマッチング：名前を言えば、探しに行く

AI にあるツールの使い方を尋ねると、Context7 はそのツールの最新マニュアルをネット上で見つける必要があります。しかし、同じ名前のものが複数存在することもあります。

一般的な名前なら自動で認識できます。名前が曖昧で混乱しやすい場合は、誰/何 の形式で正確に指定します：

`1`	`/tailwindlabs/tailwindcss を使って私のウェブページにナビゲーションバーを追加してください。use context7`

tailwindlabs は作者名、tailwindcss はプロジェクト名です。「Apple」を検索するのと同じで、果物なのか携帯なのか——はっきり言えば間違えません。

対応ライブラリ

人気のあるものはすべて収録：React、Next.js、Vue、Tailwind CSS、Express、Prisma、Supabase、TypeScript……完全なリストは context7.com/rankings をご覧ください。

バージョン認識

バージョンによって API は大きく異なることがあります。バージョン番号を直接指定すれば、Context7 が対応するバージョンのドキュメントを検索します：

1
2
3

Vue 3 でカウンターを書いて。use context7
Next.js 14 の Pages Router で API ルートを書いて。use context7
Tailwind CSS v4 でダークモードを設定して。use context7

iPhone 12 の分解チュートリアルを頼めば、誰も iPhone 15 のものを渡しません。

インストール

ワンクリックインストール

`1`	`npx ctx7 setup`

npx は Node.js に付属しているコマンドで、追加インストールは不要です。Node.js をまだインストールしていない場合は、nodejs.org からダウンロードしてインストールしてください。

実行すると以下の処理が行われます：

ブラウザが開いてログイン認証（OAuth）
API Key の生成（あなたの「身分証明書」）
エディタの自動設定

3ステップで完了です。

エディタを指定する場合はパラメータを追加：

1
2
3

npx ctx7 setup --claude      # Claude Code
npx ctx7 setup --cursor      # Cursor
npx ctx7 setup --opencode    # OpenCode

アンインストール：npx ctx7 remove

手動設定

自動インストールが機能しない場合は、手動で MCP Server を追加します：

{
  "mcpServers": {
    "context7": {
      "url": "https://mcp.context7.com/mcp",
      "headers": {
        "CONTEXT7_API_KEY": "あなたのAPIキー"
      }
    }
  }
}

各ツールの設定ファイルの場所（~ はユーザーディレクトリ、Windows なら C:\Users\ユーザー名）：

ツール	設定場所
Cursor	Settings → MCP、または `~/.cursor/mcp.json`
Claude Code	`~/.claude/settings.json`（グローバル）または `.claude/settings.json`（プロジェクト）
Windsurf	Settings → Cascade → MCP servers
Cline	VS Code 拡張内 MCP Servers → Configure
OpenCode	プロジェクトルート `opencode.json`

API Key は context7.com/dashboard で取得。形式は ctx7sk... で、無料ユーザーにも割り当てがあります。

✅ 動作確認

テストメッセージを送信：

`1`	`ボタン付きのカウンターウェブページを書いて。use context7`

AI がクリーンでモダンなコードを出力し、余分なライブラリを読み込まなければ、正常に動作しています。

使用方法

基本の使い方

プロンプトの末尾に use context7 を追加：

1
2

シンプルな履歴書ウェブページを書いて。use context7
秒数を入力してカウントダウンするツールを書いて。use context7

ライブラリの正確な指定

/owner/repo 形式で名前のマッチングをスキップ：

`1`	`/tailwindlabs/tailwindcss を使って私のページにナビゲーションバーを追加して。use context7`

ライブラリ名に曖昧さがある場合に推奨。

バージョン指定

1
2

Bootstrap 5 ではなく Bootstrap 4 の書き方でカードレイアウトを書いて。use context7
Vue 3 の Composition API で TODO リストを書いて。use context7

複数ライブラリの組み合わせ

`1`	`Bootstrap + Font Awesome でアイコンギャラリーページを作って。use context7`

自動トリガーの設定

毎回 use context7 と手入力したくない場合は、ルールファイルに設定：

→ Cursor .cursorrules に記述：

`1`	`ユーザーの質問がサードパーティのフレームワークやライブラリの API 使用方法に関する場合、自動的に Context7 で最新ドキュメントを検索する。`

→ Claude Code CLAUDE.md に記述：

1
2
3

## ドキュメント検索ルール
- サードパーティのライブラリやフレームワークに関する場合、最初に Context7 で最新ドキュメントを検索する
- Context7 が返した内容に基づいてコードを生成することを優先する

CLI コマンド

AI との会話でしか Context7 を使わないなら、この部分はスキップしても構いません。CLI はターミナルでコマンドを打つのが好きな人向けです。

npm は Node.js に付属のパッケージマネージャー、-g は「グローバルインストール」を意味します。

# CLI のインストール
npm install -g ctx7

# ライブラリの検索
ctx7 library react
ctx7 library nextjs "middleware"

# ドキュメントの取得
ctx7 docs /facebook/react "hooks state management"
ctx7 docs /vercel/next.js "middleware authentication"

# Skills 管理
ctx7 skills search        # Skill を検索
ctx7 skills install       # Skill をインストール
ctx7 skills list          # インストール済みを表示
ctx7 skills remove        # アンインストール

# 認証
ctx7 login                # ログイン
ctx7 whoami               # 状態を確認
ctx7 logout               # ログアウト

❓ よくある質問

AI の内蔵ウェブ検索との違いは？

ウェブ検索ではブログやフォーラムの投稿がヒットしますが、品質はまちまちで、自分で信頼性を判断する必要があります。Context7 は公式ドキュメントのみから情報を取得し、LLM で最も関連性の高い断片をフィルタリングして、AI に直接渡します。

💰 `use context7` でコストが増えますか？

いいえ。ドキュメント検索のステップが増えますが、AI が正確な情報を得られるため、推測や修正の繰り返し、長くて間違ったコードを書くことがなくなります。総合的なトークン消費量はむしろ減ります。

使っているライブラリが未収録の場合は？

context7.com で “Add Docs” をクリックして申請するか、use context7 を付けずに AI を自分の知識だけで回答させます。

インストールしたのに効果がない？

以下を一つずつ確認：

npx ctx7 setup でエラーが出なかったか
MCP 設定ファイルの JSON 形式が正しいか（カンマ一つで失敗します）
API Key が有効か（ctx7sk... で始まります）
エディタを完全に閉じてから開き直したか
MCP リストのステータスが緑色か
質問時に use context7 を書いたか

応答速度に影響しますか？

1〜2秒の待ち時間が増えますが、正確な回答が得られるので修正のやりとりが減ります。エラーが起きてから修正する時間に比べれば、この1〜2秒ははるかに短いです。

まとめ

項目	内容
概要	AI コーディングアシスタントにリアルタイムの最新ドキュメントを提供するプラットフォーム
解決する問題	学習データの古さによる AI の誤ったコード出力
コア原理	公式ドキュメントをリアルタイムに取得し、AI コンテキストに注入
インストール	`npx ctx7 setup` の一行で完了
使用方法	プロンプト末尾に `use context7` を追加
価格	無料枠あり、個人利用に十分
公式サイト	context7.com
GitHub	github.com/upstash/context7

インストールすれば、AI が古い知識でごまかす心配はもうありません。

Context7 on Yanmu