AI编程 – 第 3 页

项目地址：https://github.com/upstash/context7

什么是 Context7

Context7 是一个基于 Model Context Protocol（MCP）的“文档拉取”服务。它能在你给 LLM（如 Claude、Cursor Copilot、Windsurf 等）的提示（prompt）中，动态地注入从源头获取的、与你所用库版本完全对应的官方文档和代码示例，从而避免：

过时的示例、基于老旧训练数据的答案
LLM 幻觉（hallucination）出不存在的 API
通用但与当前版本不符的代码片段 citeturn1view0

使用方式非常简单：在你的自然语言提示末尾加上 use context7，例如：

Create a basic Next.js project with app router. use context7

此后，Context7 会拦截该提示，解析出所请求的库，拉取对应版本的文档，再把最新的内容注入到 LLM 上下文中。

安装与配置

2.1 前置要求

Node.js ≥ v18.0.0
支持 MCP 的客户端：Cursor、Windsurf、Claude Desktop/Code 等

2.2 各类客户端安装示例

1）Cursor

在 ~/.cursor/mcp.json 中添加：

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

替代方案：用 Bun（bunx）或 Deno citeturn3view0

2）Windsurf

在 Windsurf 的 MCP 配置文件中同样加入：

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

3）VS Code

在 VS Code MCP 配置（如 settings.json 或 MCP 插件配置）中添加：

{
  "servers": {
    "Context7": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@upstash/context7-mcp@latest"]
    }
  }
}

4）Claude Code & Desktop

Claude Code：

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

Claude Desktop：在 claude_desktop_config.json 中对应地添加 context7-mcp 的启动命令 citeturn1view0

5）通过 Smithery（针对 Claude Desktop）

npx -y @smithery/cli install @upstash/context7-mcp --client claude

6）Docker

1. Dockerfile（示例）：

FROM node:18-alpine
WORKDIR /app
RUN npm install -g @upstash/context7-mcp@latest
CMD ["context7-mcp"]

2. 构建并在 MCP 客户端中将启动命令换成：

docker run -i --rm context7-mcp

如何在 Prompt 中使用 Context7

1. 正常撰写你的需求，比如 “Show me how to use Prisma Migrate to create a new table.”
2. 在末尾加上关键词 use context7，让 MCP 客户端触发 Context7 服务：

Show me how to use Prisma Migrate to create a new table. use context7

3. LLM 会得到最新、与你项目依赖版本一致的官方文档片段和示例代码，无需手动切换标签或查阅官网

4. 可用的 MCP 工具接口

Context7 MCP 暴露了两个主要命令，可在任何支持 MCP 的客户端中以 JSON-RPC 形式调用：

命令	参数	功能说明
resolve-library-id	{ “libraryName”: “<通用库名>” }	将库名（如 react、@prisma/client）解析为 Context7 可识别的内部 ID。
get-library-docs	{ “context7CompatibleLibraryID”: “<上步返回的 ID>”,<br> “topic”?: “<子主题，如 routing>”，<br> “tokens”?: 5000 }	根据库 ID 抓取官方文档，返回指定 token 数量内的内容。可选 topic 聚焦某个子主题（如 Hooks、CLI）。 citeturn1view0

下面我列出几个实际的使用场景，让你清晰地理解如何在日常开发工作中利用 Context7 获得最精准的技术支持。

🌟 实际使用场景示例

🚀 场景一：快速生成符合最新 React 版本的 Hook 用法

假设你正在学习或快速使用 React Hook，比如最新版本的useTransition：

你在 Cursor 或 Claude 中输入提示词：

Show me an example of using useTransition hook in React 18. use context7

结果：
- Context7 会实时拉取最新官方 React 文档，自动提供 React 18 最新的useTransition示例代码片段，让你立即获得最新的、完全可用的代码。

🚀 场景二：Next.js 新版的路由配置

你想知道如何在 Next.js 最新版的 App Router 中定义动态路由和嵌套路由：

Give me a clear example on how to set up dynamic routes and nested routes using the latest Next.js App Router. use context7

结果：
- Context7 会拉取 Next.js 最新官方文档，LLM 将基于实际存在的最新路由结构给出精准的示例代码，包括文件夹结构与动态参数配置。

🚀 场景三：Tailwind CSS 最新配置或功能

如果你刚刚升级了 Tailwind 到最新版，想知道 Tailwind 最新支持的主题扩展：

Show me how to extend the default theme colors and spacing in the latest Tailwind CSS version. use context7

结果：
- 你能立刻获得最新版 Tailwind 官方给出的扩展主题颜色和间距（spacing）的标准配置代码示例，无需自己再打开官方文档手动查找。

🚀 场景四：使用 Prisma 最新的迁移功能

当你在使用 Prisma 进行数据库迁移，想确保你的命令和脚本与当前最新版本相匹配：

How do I perform database migrations with Prisma's latest migrate command? Provide step-by-step instructions. use context7

结果：
- Context7 自动注入最新版本 Prisma 的 Migrate 命令详细步骤，保证你按最新的命令实践，避免旧文档带来的误差或废弃功能。

🚀 场景五：新版本的 Zustand 状态管理最佳实践

你想知道如何在 Zustand 最新版本中正确组织你的 Store 和 Actions：

Provide a best-practice example of managing global state using Zustand's latest version. use context7

结果：
- 你会获得当前最新版 Zustand 推荐的最佳实践示例，减少使用过时或废弃的 API 带来的麻烦。

🚀 场景六：Vercel 最新部署指南（Next.js）

你想确认最新 Next.js 项目部署到 Vercel 上的步骤是否有变化：

Show me step-by-step how to deploy a Next.js application to Vercel according to the latest documentation. use context7

结果：
- Context7 拉取最新 Vercel + Next.js 官方部署文档，确保你部署时用的是最新、最准确的操作步骤。

🚀 场景七：使用最新的 React Query（TanStack Query）缓存策略

你想快速使用 React Query 最新版的缓存（Cache）策略：

Demonstrate how to set cache invalidation policies with the latest version of React Query. use context7

结果：
- Context7 获取最新 React Query 官方缓存管理说明，自动生成精准代码实例，确保你的缓存策略正确、高效。

✅ 如何进一步优化你的提示（Prompt）

明确说明“最新版本”或特定版本：

Show an example of Server Actions in Next.js 14.3. use context7

明确指出你关注的子主题：

Explain how to use error boundaries with React 18. use context7

如果需要长一点或详细的回答：

Give a detailed explanation and examples for middleware usage in Next.js latest version. use context7

通过上述实际案例，你能在开发工作流中真正发挥 Context7 的强大优势，避免过时信息、API 幻觉，并始终与官方最新标准保持同步。