概要

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

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

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

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

なぜ必要か？

💥 具体例

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

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

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

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

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

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

Context7 の有無の違い

🔄 仕組み

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

1
2
3
4
5
6
7
8
9

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

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

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

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

2つの使い方：

コア機能

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

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 からダウンロードしてインストールしてください。

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

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

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 を追加します：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

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

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

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 は「グローバルインストール」を意味します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

# 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 が古い知識でごまかす心配はもうありません。