Agent-Manager

代理经理

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

它的作用

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

截图

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

项目结构

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//           # Local agent folders
│       │   ├── agent.json           # Agent config override
│       │   ├── skills/*/SKILL.md    # Agent skills (markdown)
│       │   └── knowledge/           # Knowledge files
│       └── mcp//              # 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终点

生产建设

npm run build
npm run preview

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

技术栈

许可证

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