AI导哈

AI代理管理界面

一个全栈管理界面，用于管理和可视化AI代理及其MCP服务器绑定关系，适用于观察和操作团队。

  • by avisratmp-stack
  • JavaScript
  • 本地部署
  • 更新于
在 GitHub 查看 avisratmp-stack/Agent-Manager

使用说明

代理经理

一个完整的堆栈管理UI AI智能体 和 MCP（模型上下文协议）服务器，专为可观察性和操作团队而构建。创建、配置和可视化代理、它们的MCP绑定、消费者和工具之间的关系——所有这些都可以从一个界面完成。

它的作用

  • 代理注册表 --使用技能、工具、MCP绑定和元数据管理30多个代理（本地和外部）
  • MCP服务器注册表 --跟踪外部和本地MCP服务器，每个服务器都有自己的工具和配置
  • 作战地图 --显示消费者的交互式SVG可视化→ 代理→ 带实时连接突出显示的MCP服务器
  • MCP矩阵代理 --对照表，显示哪些代理绑定到哪些MCP服务器
  • 测试和跟踪 --向任何代理提交请求并查看完整的执行跟踪（代理→ 子代理→ MCP呼叫）具有Stub模式，用于在没有实时后端的情况下进行测试
  • 交通记录仪 --每个代理的请求日志，包含请求/响应/推理细节
  • 导入/导出 --进口代理来自 .zip 文件或Excel电子表格

截图

UI按照以下方式组织 可观测性 侧边栏有以下视图：

查看 描述
代理商和本地MCP 可排序的数据网格，可按标签、搜索、阶段和来源进行过滤
作战地图 互动图：消费者→ 公共代理人→ 私人代理人→ MCP
外部MCP 基于卡的MCP服务器注册表，带有内联工具列表
MCP代理 结合基质显示剂↔ MCP关系
测试 使用可选的存根模式执行跟踪，该模式将所有MCP调用路由到通用存根

项目结构

Agent-Manager/
├── server.js                        # Express API server (port 3001)
├── index.html                       # Vite entry point
├── vite.config.js                   # Vite config with /api proxy to :3001
├── package.json
│
├── src/
│   ├── main.jsx                     # React entry
│   ├── App.jsx                      # Root component
│   ├── api.js                       # API client (all fetch calls)
│   │
│   ├── components/AgentConfig/
│   │   ├── AgentConfig.jsx          # Main shell: sidebar, toolbar, routing
│   │   ├── AgentConfig.css          # All styles
│   │   ├── AgentFormDialog.jsx      # Create/edit agent dialog
│   │   ├── AgentDetailPanel.jsx     # Side panel with agent details
│   │   ├── AgentMapPanel.jsx        # Horizontal operation map (SVG)
│   │   ├── AgentMapVerticalPanel.jsx# Vertical operation map variant
│   │   ├── AgentCardsPanel.jsx      # Card-based view
│   │   ├── AgentTestPanel.jsx       # Test trace execution UI
│   │   ├── AgentMcpMatrixPanel.jsx  # Agent ↔ MCP binding matrix
│   │   ├── AgentLogViewer.jsx       # Per-agent traffic log viewer
│   │   ├── McpServersPanel.jsx      # MCP server registry & editor
│   │   ├── McpBindingsPanel.jsx     # MCP binding editor (in agent dialog)
│   │   ├── SkillsPanel.jsx          # Skills management panel
│   │   ├── SkillEditorDialog.jsx    # Skill markdown editor
│   │   ├── KnowledgePanel.jsx       # Knowledge file management
│   │   └── KnowledgeUploadDialog.jsx# Knowledge file upload
│   │
│   └── data/
│       ├── common/
│       │   ├── agents.json          # Central agent registry (31 agents, 3 consumers)
│       │   └── mcp-servers.json     # Central MCP server registry (31 servers)
│       ├── agents/<slug>/           # Local agent folders
│       │   ├── agent.json           # Agent config override
│       │   ├── skills/*/SKILL.md    # Agent skills (markdown)
│       │   └── knowledge/           # Knowledge files
│       └── mcp/<slug>/              # Local MCP folders
│           ├── config/server.json   # MCP server config
│           └── README.md
│
├── logger/                          # Per-agent traffic logs (JSON)
│   ├── log-agent.json
│   └── apm-agent.json
│
└── public/
    └── data-model.html              # Mermaid entity diagram

数据模型

在Mermaid Live上查看完整的实体关系图

每 代理 有：

  • type （本地/外部）， role （公共/子代理/私人）， stage （设计/开发/发布）
  • 嵌套 agent 对象：名称、描述、url、版本、功能、工具、处理程序
  • mcpBindings[] --使用选定的工具和目的链接到MCP服务器
  • calls[] --此代理调用的子代理的片段
  • tags[] --可过滤标签

每 MCP 服务器 有：

  • type （本地/外部）， role （公共/私人）， stage, enabled
  • tools[] --可用工具定义
  • url 和 transport （仅限外部）

消费者 直接呼叫代理，并显示在操作图的入口点。

先决条件

  • Node.js 18+（建议使用LTS）
  • npm 9+

入门指南

1.克隆存储库

git clone https://github.com/avisratmp-stack/Agent-Manager.git
cd Agent-Manager

2.安装依赖项

npm install

3.启动后端API服务器

npm run dev:server

这将启动Express服务器 http://localhost:3001.它为REST API提供服务，并将数据持久化到下的JSON文件 src/data/.

4.启动前端开发服务器

打开第二个终端：

npm run dev

这开始Vite on http://localhost:5173 使用转发的代理 /api/* 请求后端。

5.打开应用程序

导航至 http://localhost:5173 在您的浏览器中。

API终点

方法 端点 描述
GET /api/agents 列出所有代理人（具备技能和知识）
POST /api/agents 创建新代理
PUT /api/agents/:id 更新代理
DELETE /api/agents/:id 删除代理
PATCH /api/agents/:id/enabled 切换代理启用/禁用
PUT /api/agents/:id/mcp-bindings 更新代理MCP绑定
GET /api/agents/:slug/logs 获取代理的流量日志
GET /api/mcp-servers 列出所有MCP服务器
POST /api/mcp-servers 创建新的MCP服务器
PUT /api/mcp-servers/:id 更新MCP服务器
DELETE /api/mcp-servers/:id 删除MCP服务器
PATCH /api/mcp-servers/:id/enabled 切换启用/禁用MCP服务器
POST /api/agents/import 进口代理来自 .zip 文件
POST /api/test/execute 执行测试跟踪（支持 stubMode)

生产建设

npm run build
npm run preview

这 build 命令输出到 dist/.服务 dist/ 使用任何静态文件服务器并运行 server.js 单独作为API后端。

技术栈

层 技术
前端 React 18、Vite 5、Lucide React图标
后端 Node.js，Express 5
存储 文件系统JSON（不需要数据库）
实用程序 adm zip（导入）、xlsx（Excel解析）、multer（文件上传）

许可证

本项目按原样提供，供内部和教育使用。

相关 MCP