React Docs MCP

React 文档 MCP 服务器

为Claude、Cursor及其他MCP客户端提供基于AI的React文档语义搜索功能。

🚀 安装（一条命令）

克劳德·科德

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

Claude Desktop（可译为“Claude桌面版”）

编辑： ~/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的问题。

______________________________________________________________________

特点/特性

• 🔍 语义搜索利用嵌入技术进行概念匹配的AI驱动搜索
• ⚡ 快速结果基于混合关键词+语义排序的内存向量搜索
• 📦 零配置与……配合使用 npx - 无需安装
• 🤖 本地人工智能在本地运行嵌入（无需API费用）
• 📝 简洁回答返回摘要而非完整文档
• 🔄 自动同步自动从 react.dev 拉取最新文档

配置

对于Claude Desktop

在您的Claude桌面配置文件中添加：

macOS（中文可译为“苹果电脑操作系统”或直接音译为“麦奥克斯”，但通常直接使用“macOS”这一名称）: ~/Library/Application Support/Claude/claude_desktop_config.json Windows： %APPDATA%\Claude\claude_desktop_config.json

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

为克劳德·科德（或根据具体语境，可译为“致克劳德·科德”）

在您的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/hooks/useState”）

示例：

Get the useState documentation

list_sections

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

示例：

What sections are available?

update_docs

从Git仓库中拉取最新的文档。

示例:

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是否已安装且可访问
• 检查防火墙/代理设置

技术细节

如需详细的技术信息，请参阅 \TECHNICAL_SPEC.md\ 翻译为中文是：“技术规范文档.md”。

许可证

麻省理工学院（MIT）

贡献；做出贡献

这是一个个人项目，旨在将React文档与AI编码助手连接起来。欢迎随意克隆并根据自己的需求进行修改。