Context7 指南：讓 AI 程式設計助手讀懂最新文件

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

概述

有沒有這種經歷：讓 AI 寫一段程式碼，它霹靂啪啦寫完了，一執行就報錯。或者呼叫的 API，文件裡明明寫著有，AI 卻說「不存在」。

不是 AI 笨，是它學的東西有保質期——訓練資料可能是幾個月甚至一年前的，框架早就更新了好幾版。

Context7 就是幹這個的。它由 Upstash 團隊開發，你提問時它去拉最新的官方文件，塞進 AI 的上下文裡，讓 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（大型語言模型）再做一次智慧排序，把最相關的那幾段挑出來給你。

兩種用法：

方式	說明
MCP 模式（推薦）	裝一次，AI 程式設計助手自動呼叫。MCP 相當於給 AI 裝了個外掛程式，裝好了不用管
CLI 手動模式	在終端機敲命令手動查文件，適合喜歡折騰的人

核心能力

智慧匹配：你說名字，它去找地方

你要問 AI 某個工具怎麼用，Context7 得先去網上找到這個工具的最新說明書。但網上叫同一個名字的東西可能有好幾個，它得知道你到底說哪個。

一般的名字它能自己認出來。萬一名字太常見、容易搞混，就用 誰/什麼 的格式精確告訴它：

`1`	`用 /tailwindlabs/tailwindcss 給我的網頁加一個導覽列。use context7`

這裡的 tailwindlabs 是作者名，tailwindcss 是專案名。就像你搜「蘋果」，可能是水果也可能是手機——說清楚就錯不了。

支援哪些函式庫

熱門的都收錄了：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 下載安裝，裝完就有 npx 了。

執行後它會：

彈出瀏覽器讓你登入授權（OAuth）
生成一串 API Key（相當於你的「身分憑證」）
自動設定好對應編輯器

三步走完，搞定。

想指定編輯器就加個參數：

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 4 而不是 5 的寫法，寫一個卡片佈局。use context7
用 Vue 3 的 Composition API 寫一個待辦事項列表。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 拿到的資訊準了，就不用瞎猜、反覆改、寫又長又錯的程式碼。整體算下來花的錢（Token 消耗，AI 的計價單位）反而更少。

沒收錄我用的函式庫怎麼辦？

去 context7.com 點 “Add Docs” 提交，或者不加 use context7，AI 會退回用自己的知識回答。

裝好了但沒效果？

逐項排查：

npx ctx7 setup 有沒有報錯
MCP 設定檔 JSON 格式對不對（多一個逗號都不行）
API Key 是不是有效的（ctx7sk... 開頭）
編輯器有沒有完全關掉再打開
MCP 列表狀態亮綠燈了嗎
提問時有沒有寫 use context7

會影響回答速度嗎？

會多等一兩秒，但換來答案準了、不用反覆改。跑一次報錯再修的時間，可比這一兩秒長多了。

總結

項目	內容
是什麼	為 AI 程式設計助手提供即時最新文件的平臺
解決什麼	AI 因訓練資料過時而給出錯誤程式碼
核心原理	即時擷取官方文件，注入 AI 上下文
安裝	`npx ctx7 setup` 一行命令搞定
使用	提示詞末尾加 `use context7`
價格	有免費層級，個人夠用
官方網站	context7.com
GitHub	github.com/upstash/context7

裝好之後，再也不用擔心 AI 拿舊版知識來糊弄你了。

Context7 on Yanmu