Antigravity × Context7 MCP — ライブラリの最新ドキュメントをAIに自動注入する方法

取り組みの背景：「このコード、動きません」の原因はAIの古い知識かもしれない

AntigravityなどのAI IDEを使って開発していると、次のような経験はないでしょうか。

「Next.jsのルーティングコードを生成してもらったけど、App RouterではなくPages Routerの書き方が出てきた」「Supabaseの認証コードが公式ドキュメントと違う」「生成されたコードをそのまま実行するとエラーが出る」

これらの問題の多くは、AIのトレーニングデータのカットオフ日に起因しています。ライブラリは日々進化しており、AIは学習時点のドキュメントしか知りません。この根本的な課題を解決するのが、Context7 MCPです。

Context7は、Upstashが開発したオープンソースのMCPサーバーです。AIがコードを生成する際に、対象ライブラリの最新ドキュメントをリアルタイムで取得・注入することで、常に最新のAPIに基づいたコードを生成できるようになります。

ここではContext7 MCPのAntigravityへの導入から実際の活用まで、ステップバイステップで解説します。

Context7 MCPとは何か

Context7は、シンプルなコンセプトで動作します。AIが「このライブラリのドキュメントが必要です」と判断した時に、MCPプロトコルを通じてContext7サーバーに問い合わせ、最新のドキュメントコンテキストをプロンプトに自動追加します。

従来の問題と解決策

従来のAI IDEでは、ライブラリに関するコード生成は以下の流れでしました。

ユーザーが「ReactのuseEffectを使って〜を実装して」と指示
AIが学習済みのデータ（古い可能性がある）から回答を生成
生成されたコードが最新のReact仕様と合わない場合がある

Context7を使うと流れが変わります。

ユーザーが「ReactのuseEffectを使って〜を実装して use context7」と指示
Context7がReact最新バージョンのドキュメントを取得
そのドキュメントをコンテキストとしてAIに渡す
最新仕様に基づいたコードが生成される

対応ライブラリ

Context7は主要なオープンソースライブラリに幅広く対応しています。

フロントエンド: React、Next.js、Vue.js、Nuxt、Svelte、Remix、Astro
バックエンド: Express、Fastify、Hono、NestJS、Django
データベース: Prisma、Drizzle ORM、Supabase、Firebase
UIライブラリ: Tailwind CSS、shadcn/ui、Radix UI
テスト: Vitest、Jest、Playwright、Cypress
その他: Zod、tRPC、Zustand、Jotai

AntigravityへのContext7 MCP導入手順

前提条件

Antigravity IDE（最新版）がインストール済み
Node.js 18以上がインストール済み
Antigravityのエージェントモードが利用可能

Step 1: Antigravityの設定ファイルを開く

AntigravityでMCPサーバーを追加するには、設定ファイル（mcp.json）を編集します。

Antigravityの設定パネルを開き、Settings → MCP Servers → Edit JSON を選択するか、プロジェクトルートの .antigravity/mcp.json を直接編集します。

Step 2: Context7の設定を追加する

mcp.json に以下の設定を追加します。

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

設定を保存するとAntigravityが自動的にContext7サーバーを起動します。初回起動時はnpxが @upstash/context7-mcp パッケージをインストールします（インターネット接続が必要）。

Step 3: 動作確認

設定が完了したら、エージェントに以下のように話しかけてみてください。

Next.jsのApp RouterでAPIルートを作成する方法を教えて use context7

use context7 というキーワードをプロンプトに含めることで、Context7が自動的に対象ライブラリのドキュメントを取得してAIに渡します。

実際の使い方：Context7で精度の高いコード生成

基本的な使い方

Context7を有効化する方法はとてもシンプルです。プロンプトの末尾か適切な場所に use context7 と記載するだけです。

# 例1：Next.js App Router の Server Actions
Next.js 15のServer Actionsを使って、フォームのバリデーションと
データベースへの保存を実装して use context7

# 例2：Supabase Authの実装
Supabaseでメール認証とGoogleOAuthを組み合わせた
認証システムを実装して use context7

# 例3：Vitest の設定
React + TypeScriptプロジェクトでVitestのセットアップを
完了させて use context7

ライブラリバージョンを指定する方法

特定のバージョンに対応させたい場合は、明示的にバージョンを指定できます。

React 19のuseフックを使った非同期データ取得の
実装方法を教えて use context7

Context7はバージョン情報を解釈し、該当バージョンのドキュメントを取得します。

AGENTS.md や Rules ファイルへの組み込み

プロジェクト全体でContext7を活用したい場合は、AGENTS.md やルールファイルに明記することをおすすめします。

# AGENTS.md
 
## ドキュメント参照ポリシー
- ライブラリ関連のコード生成・調査には必ず use context7 を使用すること
- バージョン固有の機能については明示的にバージョンを指定すること
- Next.js・React・Supabase・Prismaのコードは必ず最新仕様を確認すること

こうすることで、エージェントが自動的にContext7を参照するようになります。

Context7活用の実践例

例1：Next.js 15 でのデータ取得

Context7なしで生成されると、古いPages Routerスタイルのコードが出てくることがあります。Context7ありでは、App Routerのベストプラクティスに沿ったコードが生成されます。

// Context7が最新ドキュメントを参照して生成するコード例
// Next.js 15 App Router + React Server Components
 
// app/users/page.tsx
import { Suspense } from 'react'
import { UserList } from '@/components/user-list'
 
export default function UsersPage() {
  return (
    <Suspense fallback={<div>読み込み中...</div>}>
      <UserList />
    </Suspense>
  )
}
 
// app/users/actions.ts
'use server'
 
import { revalidatePath } from 'next/cache'
 
export async function createUser(formData: FormData) {
  const name = formData.get('name') as string
 
  // データベース処理（省略）
 
  revalidatePath('/users')
}

例2：Supabase v2 の認証実装

Supabaseは頻繁にAPIが更新されるため、Context7の恩恵が特に大きいライブラリです。

// Context7参照で生成されるSupabase v2準拠のコード
import { createClient } from '@supabase/supabase-js'
 
const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
)
 
// メール・パスワード認証（最新API）
const { data, error } = await supabase.auth.signInWithPassword({
  email: 'user@example.com',
  password: 'password',
})
 
// セッション取得（v2形式）
const { data: { session } } = await supabase.auth.getSession()
// 期待する出力: session.user.id, session.access_token が取得できる

まとめ

Context7 MCPはAntigravityの開発体験を大きく向上させるシンプルで強力なツールです。設定は mcp.json への数行の追加だけで完了し、プロンプトに use context7 を加えるだけで最新ドキュメントを参照したコード生成が可能になります。

特にNext.js・React・Supabaseなど、アップデートの激しいライブラリを使った開発では、コードの精度向上に大きく貢献します。ぜひ今日から導入してみてください。

AntigravityでMCPサーバーをさらに活用したい方には、Antigravity MCP Store 完全ガイドもおすすめです。MCP Storeを使えば、Context7以外にも便利なMCPサーバーをワンクリックで導入できます。

MCPの仕組みをより深く理解したい方や自作したい方は、Antigravity カスタムMCPサーバー自作完全ガイドで実装の詳細を学べます。

MCPを活用したAI駆動開発のノウハウをさらに体系的に