Context7 MCP

Context7 是由 Upstash 開發的 MCP Server，能夠動態取得最新的程式庫文件，解決 AI 訓練資料過時的問題。它是開發者最推薦的 MCP Server 之一，在 GitHub 有 12K+ stars。

為什麼需要 Context7？

AI 模型的訓練資料有截止日期（knowledge cutoff），可能不知道：

問題	影響
Next.js 16 的新功能	使用過時 API，程式碼無法運作
React 19 的 API 變更	產生已棄用的程式碼
最新的 shadcn/ui 元件	缺少新元件的用法
新版本的破壞性變更	產生有 bug 的程式碼

Context7 解決方案：即時從官方文件取得最新資訊，注入到 prompt 中。

沒有 Context7：
你：如何用 Next.js 16 建立 Server Component？
Claude：[根據訓練資料回答，可能是舊版語法]

有 Context7：
你：如何用 Next.js 16 建立 Server Component？- use context7
Claude：[從 Next.js 官方文件取得最新資訊]
       [回答正確的 Next.js 16 語法]

安裝方式

方法 1：CLI 指令（推薦）

bash

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

方法 2：HTTP Transport（更高 Rate Limit）

bash

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

如果需要更高的 rate limit，可以申請免費 API key：

bash

claude mcp add --transport http context7 https://mcp.context7.com/mcp --header "CONTEXT7_API_KEY: YOUR_API_KEY"

到 context7.com/dashboard 取得免費 API key。

方法 3：SSE Transport

bash

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

方法 4：手動 JSON 設定

在 ~/.claude.json 或 .mcp.json 中加入：

json

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

使用 HTTP Transport + API Key：

json

{
  "mcpServers": {
    "context7": {
      "type": "http",
      "url": "https://mcp.context7.com/mcp",
      "headers": {
        "CONTEXT7_API_KEY": "your-api-key"
      }
    }
  }
}

系統需求

Node.js >= v18.0.0

使用方式

安裝完成後，在 prompt 中加入 use context7 即可：

Create a Next.js 16 Server Component with the App Router - use context7

How to use shadcn/ui Button component - use context7

Implement Supabase authentication with Next.js - use context7

自動觸發

你也可以設定 Rules 讓 Claude 在特定情況下自動使用 Context7，不需要每次都輸入 use context7。

提供的工具

Context7 MCP 提供兩個主要工具：

1. resolve-library-id

將程式庫名稱轉換為 Context7 可識別的 ID：

輸入：next.js
輸出：/vercel/next.js

2. query-docs

查詢特定程式庫的文件：

輸入：{ libraryId: "/vercel/next.js", query: "Server Components" }
輸出：Next.js Server Components 的最新文件內容

支援的程式庫

Context7 支援大量的程式庫文件，包括但不限於：

前端框架

程式庫	Context7 ID
React	`/facebook/react`
Next.js	`/vercel/next.js`
Vue.js	`/vuejs/core`
Nuxt	`/nuxt/nuxt`
Svelte	`/sveltejs/svelte`
Remix	`/remix-run/remix`
Astro	`/withastro/astro`

UI 元件

程式庫	Context7 ID
shadcn/ui	`/shadcn-ui/ui`
Radix UI	`/radix-ui/primitives`
Tailwind CSS	`/tailwindlabs/tailwindcss`
Chakra UI	`/chakra-ui/chakra-ui`

後端與資料庫

程式庫	Context7 ID
Node.js	`/nodejs/node`
Express	`/expressjs/express`
NestJS	`/nestjs/nest`
Prisma	`/prisma/prisma`
Drizzle	`/drizzle-team/drizzle-orm`
Supabase	`/supabase/supabase`

測試與工具

程式庫	Context7 ID
Playwright	`/microsoft/playwright`
Vitest	`/vitest-dev/vitest`
TypeScript	`/microsoft/typescript`
Vite	`/vitejs/vite`

使用範例

取得 Next.js 16 的最新功能

Explain the new features in Next.js 16 - use context7

建立 React 19 的元件

Create a component using React 19's use() hook - use context7

查詢 shadcn/ui 用法

How to create a form with shadcn/ui and react-hook-form - use context7

整合 Supabase 認證

Implement email/password authentication with Supabase and Next.js - use context7

設定 Prisma

How to set up Prisma with PostgreSQL and generate types - use context7

進階用法

指定版本

How to use the App Router in Next.js 14 - use context7

Context7 會嘗試取得對應版本的文件。

組合多個程式庫

Create a form using shadcn/ui, react-hook-form, and zod validation - use context7

配合其他 MCP 使用

Use playwright mcp to test this form, referring to the latest playwright docs - use context7

驗證安裝

在 Claude Code 中執行：

/mcp

應該會看到 context7 顯示為 connected。

測試是否正常運作：

What's the latest version of Next.js? - use context7

故障排除

Context7 沒有回應

確認網路連線正常
檢查 Node.js 版本：
bash
```
node --version  # 需要 >= 18.0.0
```
重新啟動 Claude Code
檢查 MCP 狀態：
```
/mcp
```

Rate Limit 問題

免費用量有限制。解決方案：

前往 context7.com/dashboard
註冊並取得免費 API key
使用 HTTP transport 方式安裝（見上方說明）

找不到某個程式庫

Context7 持續新增程式庫支援。如果找不到：

直接在 prompt 中說明程式庫名稱
到 Context7 GitHub 提交 issue

最佳實踐

1. 明確指定程式庫和版本

❌ 不好：How to create a component?
✅ 好：How to create a Server Component in Next.js 16? - use context7

2. 描述具體需求

❌ 不好：How to use Prisma? - use context7
✅ 好：How to create a many-to-many relation in Prisma with PostgreSQL? - use context7

3. 組合使用 MCP

Context7 專注於文件查詢，搭配其他 MCP 效果更好：

Context7 + shadcn MCP：取得最新文件 + 正確的元件 API
Context7 + Playwright MCP：取得最新文件 + 實際測試

參考資源

下一步

Playwright MCP - 瀏覽器自動化
shadcn MCP - UI 元件查詢
Supabase MCP - 資料庫操作

Context7 MCP ​

為什麼需要 Context7？ ​

安裝方式 ​

方法 1：CLI 指令（推薦） ​

方法 2：HTTP Transport（更高 Rate Limit） ​

方法 3：SSE Transport ​

方法 4：手動 JSON 設定 ​

系統需求 ​

使用方式 ​

提供的工具 ​

1. resolve-library-id ​

2. query-docs ​

支援的程式庫 ​

前端框架 ​

UI 元件 ​

後端與資料庫 ​

測試與工具 ​

使用範例 ​

取得 Next.js 16 的最新功能 ​

建立 React 19 的元件 ​

查詢 shadcn/ui 用法 ​

整合 Supabase 認證 ​

設定 Prisma ​

進階用法 ​

指定版本 ​

組合多個程式庫 ​

配合其他 MCP 使用 ​

驗證安裝 ​

故障排除 ​

Context7 沒有回應 ​

Rate Limit 問題 ​

找不到某個程式庫 ​

最佳實踐 ​

1. 明確指定程式庫和版本 ​

2. 描述具體需求 ​

3. 組合使用 MCP ​

參考資源 ​

下一步 ​

Context7 MCP

為什麼需要 Context7？

安裝方式

方法 1：CLI 指令（推薦）

方法 2：HTTP Transport（更高 Rate Limit）

方法 3：SSE Transport

方法 4：手動 JSON 設定

系統需求

使用方式

提供的工具

1. resolve-library-id

2. query-docs

支援的程式庫

前端框架

UI 元件

後端與資料庫

測試與工具

使用範例

取得 Next.js 16 的最新功能

建立 React 19 的元件

查詢 shadcn/ui 用法

整合 Supabase 認證

設定 Prisma

進階用法

指定版本

組合多個程式庫

配合其他 MCP 使用

驗證安裝

故障排除

Context7 沒有回應

Rate Limit 問題

找不到某個程式庫

最佳實踐

1. 明確指定程式庫和版本

2. 描述具體需求

3. 組合使用 MCP

參考資源

下一步