AI导哈

React文档语义搜索服务

AI驱动的React文档语义搜索服务，支持Claude、Cursor等MCP客户端，提供离线、无API密钥的本地化文档搜索功能。

  • by Sannnao
  • TypeScript
  • 本地部署
  • 8 星标
  • 更新于
在 GitHub 查看 Sannnao/react-docs-mcp

使用说明

React Docs MCP服务器

人工智能为Claude、Cursor和其他MCP客户端在React文档上提供语义搜索。

也可用——相同的引擎，其他文档： 📱 react本地文档mcp (仓库)--官方React Native文档（reactnative.dev），每个版本都固定 📋 react钩子表单文档mcp (仓库)--官方React Hook Form文档（React Hook Form.com）

所有软件包共享一个搜索引擎（在此monorepo中开发 packages/)因此，所有这些地方都得到了改善。

🚀 安装（一个命令）

克劳德代码

claude mcp add --transport stdio react-docs -- npx react-docs-mcp

克劳德桌面版

编辑： ~/Library/Application Support/Claude/claude_desktop_config.json （macOS）或 %APPDATA%\Claude\claude_desktop_config.json （Windows）

{
  "mcpServers": {
    "react-docs": {
      "command": "npx",
      "args": ["-y", "react-docs-mcp"]
    }
  }
}

光标

设置 → 光标设置 → 工具和MCP → 添加服务器：

{
  "mcpServers": {
    "react-docs": {
      "command": "npx",
      "args": ["-y", "react-docs-mcp"]
    }
  }
}

就是这样！ 重新启动编辑器并询问React。

特性

  • 🔑 没有API密钥：与托管文档服务（Context7、GitMCP）不同，所有内容都在您的计算机上运行——没有帐户、没有密钥、没有速率限制
  • 🔌 离线工作：克隆官方react.dev文档仓库一次，然后在本地搜索——查询时没有网络调用
  • 🔍 语义搜索：使用嵌入进行概念匹配的人工智能搜索
  • ⚡ 快速结果：混合关键字+语义排名的内存向量搜索
  • 📦 零配置：与合作 npx -无需安装
  • 🤖 本地AI：本地运行嵌入（无API成本）
  • 📝 简明回答：返回摘要而不是完整文档
  • 🔄 自动同步：自动从react.dev中提取最新文档

配置

适用于克劳德桌面

添加到您的Claude Desktop配置文件中：

macOS: ~/Library/Application Support/Claude/claude_desktop_config.json 视窗: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "react-docs": {
      "command": "node",
      "args": ["/absolute/path/to/reactDocsMcp/dist/index.js"]
    }
  }
}

给Claude代码

添加到MCP设置配置中：

{
  "mcpServers": {
    "react-docs": {
      "command": "node",
      "args": ["/absolute/path/to/reactDocsMcp/dist/index.js"]
    }
  }
}

用法

配置后，服务器为AI代理提供以下功能：

工具

search_react_docs

在React文档中搜索。

参数:

  • query （必填）：搜索查询字符串
  • section （可选）：按部分筛选（学习、参考、博客、社区）
  • limit （可选）：最大结果数（默认值：10，最大值：50）

示例:

Search for "useState hook" in the learn section

get_doc

获取特定的文档页面。

参数:

  • path （必填）：文档路径（例如，“learn/hocks/useState”）
  • full （可选）：返回完整的原始页面，而不是~1500个字符的摘要（默认值：false）

示例:

Get the useState documentation

为什么 full? 对于大多数API引用来说，默认的~1500个字符的摘要已经足够了，但它可以截断较长页面的中途——迁移指南、升级演练或任何具有许多顺序步骤的内容。如果总结似乎半途而废，或者你需要指南的每一步，请索取整页：

Get the full content of the React 19 upgrade guide, not just the summary

这叫 get_doc 随着 { "path": "learn/upgrading-to-react-19", "full": true } 并返回完整的原始页面，而不是截断的摘要。

list_sections

列出所有可用的文档部分。

示例:

What sections are available?

update_docs

从Git仓库中提取最新文档。

命令行界面

npx react-docs-mcp --version   # print the installed package version and exit

（版本固定通过 --docs-version 是一个 react本地文档mcp 特性--react.dev没有版本化文档。)

示例:

Update the React documentation

资源

服务器使用URI模式将文档作为资源公开：

react-docs://{section}/{path}

例子:

  • react-docs://learn -列出所有学习部分文档
  • react-docs://learn/hooks/useState -获取useState文档
  • react-docs://reference/react/Component -获取组件API引用

发展

以开发模式运行

npm run dev

构建

npm run build

项目结构

reactDocsMcp/
├── src/
│   ├── index.ts              # MCP server entry point
│   ├── docsManager.ts        # Git & file operations
│   ├── markdownParser.ts     # Markdown parsing
│   ├── searchEngine.ts       # Search implementation
│   ├── types.ts              # TypeScript types
│   └── config.ts             # Configuration
├── dist/                     # Compiled output
└── TECHNICAL_SPEC.md         # Technical documentation

运作原理

  1. 初始化：首次运行时，克隆官方React文档库
  2. 索引：解析所有markdown文件并构建内存中的搜索索引
  3. 搜索：提供基于关键字的搜索和相关性评分
  4. 更新：可以从存储库中提取最新更改并重新索引

故障排除

服务器无法启动

  • 确保已安装Node.js 18+
  • 检查构建是否成功完成(npm run build)
  • 验证MCP配置中的路径是否绝对正确

无搜索结果

  • 存储库可能仍在克隆中（检查控制台输出）
  • 试着跑步 update_docs 刷新索引的工具

Git克隆失败

  • 检查互联网连接
  • 验证Git是否已安装且可访问
  • 检查防火墙/代理设置

技术细节

有关详细的技术信息，请参阅 技术规格.md.

许可证

麻省理工学院

贡献

这是一个将React文档连接到AI编码代理的个人项目。请随意分叉和修改以供自己使用。

相关 MCP