React Flow MCP服务器
模型上下文协议（MCP）服务器 反应流 图书馆。该服务器为AI助手提供了对React Flow组件、钩子、类型、实用程序、示例和文档的全面访问。
特性
- 组件信息：获取所有React Flow组件的详细文档(`
,,`等等） - 挂钩参考：访问有关所有React Flow钩子的信息(
useReactFlow,useNodes,useEdges等等） - 类型定义：探索React Flow类型(
Node,Edge,Viewport等等） - 实用函数：了解辅助函数(
addEdge,applyNodeChanges,getBezierPath等等） - 代码示例：获取常见用例的完整工作代码示例
- 文档：入门、性能、状态管理和TypeScript等主题的访问指南
安装
npm install @yeshsurya/react-flow-mcp-server或者直接使用npx运行：
npx @yeshsurya/react-flow-mcp-server用法
克劳德桌面/克劳德代码
使用Claude CLI添加MCP服务器：
claude mcp add react-flow -- npx -y @yeshsurya/react-flow-mcp-server或者手动添加到MCP客户端配置文件中：
{
"mcpServers": {
"react-flow": {
"command": "npx",
"args": ["-y", "@yeshsurya/react-flow-mcp-server"]
}
}
}微软复制品工作室
MCP现在 通常在Microsoft Copilot Studio中可用。要添加此服务器，请执行以下操作：
- 导航到您的代理 工具 Copilot Studio中的页面
- 选择 添加工具 → 新工具 → 模型上下文协议
- 配置服务器：
- 服务器名称: react-flow-mcp-server - 服务器描述: Provides React Flow components, hooks, types, utilities, examples, and documentation - 服务器URL：使用HTTP传输将服务器部署到托管服务（Azure、AWS等）
- 选择身份验证类型（无、API密钥或OAuth 2.0）
- 创建连接并添加到您的代理
备注：Copilot工作室需要 可流式HTTP传输对于本地开发，考虑使用隧道服务或部署到云端点。看 微软的MCP文档 有关详细的设置说明。
VS代码/GitHub副本
MCP在VS Code和GitHub Copilot中得到了支持。添加到您的VS代码设置中：
{
"mcp.servers": {
"react-flow": {
"command": "npx",
"args": ["-y", "@yeshsurya/react-flow-mcp-server"]
}
}
}命令行选项
npx @yeshsurya/react-flow-mcp-server --help # Show help
npx @yeshsurya/react-flow-mcp-server --version # Show version环境变量
LOG_LEVEL：设置日志记录级别(debug,info,warn,error).违约：info
可用工具
组件工具
| 工具 | 说明 |
|---|---|
get_react_flow_component | 获取特定组件的详细信息 |
list_react_flow_components | 列出所有可用组件（可按类别筛选） |
挂钩工具
| 工具 | 说明 |
|---|---|
get_react_flow_hook | 获取特定钩子的详细信息 |
list_react_flow_hooks | 列出所有可用挂钩（可按类别筛选） |
类型工具
| 工具 | 说明 |
|---|---|
get_react_flow_type | 获取特定类型的详细信息 |
list_react_flow_types | 列出所有可用类型（可按类别筛选） |
实用工具
| 工具 | 说明 |
|---|---|
get_react_flow_utility | 获取实用函数的详细信息 |
list_react_flow_utilities | 列出所有可用的实用程序功能 |
示例工具
| 工具 | 说明 |
|---|---|
get_react_flow_example | 获取特定示例的完整代码 |
search_react_flow_examples | 按关键字搜索示例 |
文档工具
| 工具 | 说明 |
|---|---|
get_react_flow_docs | 获取特定主题的文档 |
交互示例
获取组件信息
Tool: get_react_flow_component
Arguments: { "componentName": "Handle" }按类别列出挂钩
Tool: list_react_flow_hooks
Arguments: { "category": "state" }搜索示例
Tool: search_react_flow_examples
Arguments: { "query": "drag drop" }获取文档
Tool: get_react_flow_docs
Arguments: { "topic": "getting-started" }可用示例
basic-flow-简单的React Flow设置custom-node-创建自定义节点组件custom-edge-创建自定义边缘组件drag-and-drop-通过拖放添加节点sub-flows-具有父子关系的嵌套节点validation-连接验证save-restore-持续和加载流状态resizable-node-具有调整大小控制柄的节点toolbar-node-带有选择工具栏的节点layout-elk-使用ELK.js自动布局
文档主题
getting-started-安装和基本设置concepts-核心概念（节点、边、控制柄、视口）custom-nodes-创建自定义节点组件custom-edges-创建自定义边缘组件performance-性能优化提示state-management-状态管理模式typescript-TypeScript使用指南accessibility-无障碍最佳实践
发展
从源头构建
git clone https://github.com/your-repo/react-flow-mcp-server.git
cd react-flow-mcp-server
npm install
npm run build在发展中奔跑
npm run dev项目结构
react-flow-mcp-server/
├── src/
│ ├── index.ts # Entry point
│ ├── handler.ts # MCP request handlers
│ ├── resources.ts # Static resources
│ ├── prompts.ts # Prompt definitions
│ ├── resource-templates.ts # Dynamic resource templates
│ ├── tools/
│ │ ├── index.ts # Tool registry
│ │ ├── components/ # Component tools
│ │ ├── hooks/ # Hook tools
│ │ ├── types/ # Type tools
│ │ ├── utilities/ # Utility tools
│ │ ├── examples/ # Example tools
│ │ └── docs/ # Documentation tools
│ └── utils/
│ ├── logger.ts # Winston logging
│ ├── cache.ts # In-memory cache
│ ├── validation.ts # Zod validation
│ └── circuit-breaker.ts # Resilience pattern
├── build/ # Compiled JavaScript
├── package.json
└── tsconfig.json许可证
麻省理工学院