使用 context7 让 Trae 变得更聪明!

0 阅读3分钟

我正在参加Trae「超级体验官」创意实践征文,本文所使用的 Trae 免费下载链接:www.trae.com.cn/?utm_source…

前言

在日常的开发中,文档的重要性不言而喻。

而大模型的训练周期一般比较久,很多知识可能是1年前的版本。

所以开发的时候,就经常遇到使用的库和AI给出的代码版本不对,导致各种报错。

Cursor之前倒是有一个Doc 功能,但非常难用。

正好现在MCP横空出世,各种MCP层出不穷。

Upstash 带着 Context7 这个MCP来给出了解决方案

关于 Context 7

Context 7是由Upstash团队开发的一个平台,旨在为大型语言模型(LLMs)、AI代码编辑器和开发者提供最新的、特定版本的文档。它能直接从官方文档中提取真实、可用的代码片段,按版本过滤,并准备好供Cursor、Claude或任何LLM使用。

图片.png

比起LLM自己编造的代码,Context7提供的都是官方文档认证过的真实代码片段

Context 7 的能力

  • 实时文档检索
    Context7能自动从3500+技术库的最新官方文档中提取代码片段和API说明(支持版本指定),并将其动态注入AI提示的上下文中,确保生成的代码基于最新实践。

  • 多库兼容与扩展性
    覆盖主流框架(如Next.js、React、Java等),且支持自定义私有知识库集成,未来计划扩展至企业内部文档场景。

  • 免费与轻量级集成
    个人用户每天可免费使用50次查询;通过MCP协议与编辑器无缝集成,仅需1分钟配置即可启用

在Trae 中使用 Context 7 MCP

刚好最近Trae 更新后,也支持了MCP。

更贴心的是还有一个MCP市场,一些常用的MCP直接添加即可,省得到处去找安装方法了。

图片.png

不过Context 7 不在市场里面,需要手动添加一下。

图片.png

点击手动配置

图片.png

将官方提供的这段安装命令填写进去即可:

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

图片.png

接下来回到mcp的首页,看到 可使用 就代表安装成功了

图片.png

输入这段 prompt

在当前目录,基于next.js创建一个全栈项目。

要求基于:next.js 15,tailwindCSS,Ant Design 来开发。

首先基于next.js 15 的最佳实践,创建好目录结构。

使用 ant-design/v5-patch-for-react-19 的兼容包来处理 React 19和Ant Design v5的兼容问题

使用 context 7

注意

  • 需要选择 @Builder with MCP 这个智能体
  • 在prompt 结尾带上 使用 context 7

图片.png

在代码生成的过程中可以看到它调用了 Context 7 来获取最新的文档

图片.png

最终生成的效果和项目结构,可以看到目录结构是符合推荐结构的。

图片.png

总结

Context 7 是一个非常强的拓展,帮助LLM 获取更准确、更优质的上下文。

推荐大家在都来尝试一下,多多交流使用的问题

github.com/upstash/con…