mcpGraph用户体验
Next.js应用程序为 mcpGraph npm模块。此应用程序允许您：
- 可视化图形：使用React Flow将mcpGraph配置作为交互式图形查看
- 列出工具：查看图形配置中定义的所有可用MCP工具
- 测试工具：使用自定义参数执行工具，并从退出节点查看结果
特性
- 🎨 图形可视化：使用React Flow进行交互式图形可视化，显示所有节点及其连接
- 🔧 工具测试：使用用户友好的表单界面测试每个MCP工具
- 📊 实时结果：直接在UI中查看执行结果
- 🎯 工具筛选：按所选工具筛选图形可视化
先决条件
- Node.js>=20.0.0
- mcpGraph模块（应位于
../mcpGraph相对于这个项目）
安装
- 安装依赖项：
npm install- 确保mcpGraph模块已构建并可在
../mcpGraph
用法
使用mcpGraph YAML配置文件的端口和路径启动服务器：
npm run server
例子
# Run on port 3000 with example config
npm run server 3000 ../mcpGraph/examples/count_files.yaml
# Run on port 8080 with custom config
npm run server 8080 /path/to/your/graph.yaml服务器将：
- 加载并验证mcpGraph配置
- 在指定端口上启动Next.js服务器
- 通过API路由提供配置
运行后，打开浏览器 http://localhost: 以访问UI。
发展
对于热重载开发：
npm run dev注意：在开发模式下，您需要设置 MCPGRAPH_CONFIG_PATH 环境变量：
MCPGRAPH_CONFIG_PATH=/path/to/config.yaml npm run dev项目结构
.
├── app/ # Next.js app directory
│ ├── api/ # API routes
│ │ ├── tools/ # Tool listing and execution endpoints
│ │ └── graph/ # Graph data endpoint
│ ├── layout.tsx # Root layout
│ ├── page.tsx # Main page
│ └── globals.css # Global styles
├── components/ # React components
│ ├── GraphVisualization.tsx # React Flow graph component
│ ├── ToolList.tsx # Tool sidebar component
│ └── ToolTester.tsx # Tool testing form component
├── server.ts # Custom server entry point
└── package.json # Dependencies and scriptsAPI终点
GET /api/tools-列出所有可用工具GET /api/tools/[toolName]-获取特定工具的信息POST /api/tools/[toolName]-使用提供的参数执行工具GET /api/graph-获取图形结构（节点和边）以进行可视化
设计
此应用程序遵循mcpGraph项目的设计建议：
- 反应流 用于图形可视化（如设计文档中所推荐）
- Next.js 对于web框架
- TypeScript 用于类型安全
许可证
麻省理工学院
TODO
验证运行图（处理cwd问题，以便我们可以运行file_utils）
如果能够检查图中的节点就好了