Agent 协作平台 — 多 AI Agent 可视化调度与协同

一个基于 React + OpenClaw 构建的多 Agent 协作演示平台。支持多个异构 AI Agent（GLM、Claude、Gemini 等）在同一界面中实时通信、任务指派与协同工作，所有 Agent 状态可视化呈现。

项目架构

agent-demo/
├── agent-platform/        # 前端（React + Vite + TailwindCSS + Zustand）
│   └── src/
│       ├── components/    # UI 组件
│       ├── pages/         # 页面
│       ├── lib/
│       │   ├── connectors/    # Agent 连接器（OpenClaw / OpenAI / Claude Code）
│       │   ├── AgentConnectionManager.ts  # 核心调度管理器
│       │   └── AgentLogger.ts             # 前端日志系统
│       ├── store/         # Zustand 状态管理
│       └── types/         # TypeScript 类型定义
├── agent-bridge/          # Bridge 服务器（Express + TypeScript）
│   └── src/
│       ├── index.ts       # HTTP SSE 服务
│       ├── cli-runner.ts  # Claude Code / Codex 进程管理
│       └── sessions.ts    # 会话持久化
├── docs/                  # 设计文档与原型图
├── dev.sh                 # 一键开发环境管理脚本
└── start-agents.sh        # OpenClaw 多实例启动脚本

支持的 Agent 类型

类型	连接方式	说明
openclaw	WebSocket	通过 OpenClaw Gateway 接入，支持 Ed25519 认证
openai	HTTP SSE	兼容 OpenAI API 的任意服务（Ollama、LM Studio 等）
claude-code	Bridge → CLI	通过 Bridge 服务器调用本地 Claude Code CLI
codex	Bridge → CLI	通过 Bridge 服务器调用本地 Codex CLI

核心功能

• 可视化面板：实时展示 Agent 头像、昵称、在线/工作中/离线状态
• Dispatcher 调度：指定一个 Agent 作为调度中心，自动拆解任务分发给其他 Agent
• 多 Agent 并行：支持同时向多个 Agent 派发任务，并行执行后汇总结果
• Agent 间通信：Agent 可通过 @mention 互相交流、汇报结果
• 流式输出：实时显示 Agent 的思考和回复过程
• 任务追踪：每个任务有完整的生命周期（创建/运行中/完成/失败）
• 日志系统：前端埋点 + Bridge 日志 + OpenClaw 日志三级日志体系

快速开始

环境要求

• Node.js >= 18
• npm 或 pnpm
• OpenClaw CLI（用于 OpenClaw 类型 Agent）
• Claude Code CLI（可选，用于 claude-code 类型 Agent）

1. 克隆项目并安装依赖

git clone <repo-url>
cd agent-demo

# 安装前端依赖
cd agent-platform && npm install && cd ..

# 安装 Bridge 依赖
cd agent-bridge && npm install && cd ..

2. 一键启动（推荐）

chmod +x dev.sh
./dev.sh start

dev.sh 提供以下命令：

命令	说明
./dev.sh	交互式菜单
./dev.sh start	启动所有服务
./dev.sh stop	停止所有服务
./dev.sh status	查看服务状态
./dev.sh logs	tmux 多窗口查看日志
./dev.sh bridge	仅启动 Bridge
./dev.sh platform	仅启动前端
./dev.sh openclaw	仅启动 OpenClaw

3. 手动启动

# 终端 1：启动前端
cd agent-platform && npm run dev

# 终端 2：启动 Bridge
cd agent-bridge && npm start

# 终端 3+：启动 OpenClaw 实例（见下方配置章节）

4. 访问界面

打开浏览器访问 http://localhost:5174

配置 OpenClaw Agent

安装 OpenClaw

npm install -g openclaw
openclaw configure   # 首次运行进行引导配置

单个 Agent 配置

每个 OpenClaw 实例需要一个独立的 profile（状态目录隔离）：

# 默认实例（灵光）
openclaw configure
# 按提示设置名称、模型等

# 第二个实例（小灵）
openclaw --profile xiling configure

# 第三个实例（小蓝）
openclaw --profile xiaolan configure

配置完成后，每个 profile 的数据存放在：

Profile	配置目录	端口
默认	~/.openclaw/	18789
xiling	~/.openclaw-xiling/	18790
xiaolan	~/.openclaw-xiaolan/	18791

启动 OpenClaw 实例

# 启动三个实例
openclaw gateway --port 18789 --force &
openclaw --profile xiling gateway --port 18790 --force &
openclaw --profile xiaolan gateway --port 18791 --force &

或使用启动脚本：

chmod +x start-agents.sh
./start-agents.sh

配置模型

编辑各实例的配置文件 ~/.openclaw[ -<profile>]/openclaw.json：

{
  "models": {
    "providers": {
      "zai": {
        "baseUrl": "https://open.bigmodel.cn/api/coding/paas/v4",
        "api": "openai-completions",
        "models": [
          {
            "id": "glm-4.7",
            "name": "GLM-4.7",
            "reasoning": true,
            "input": ["text"],
            "contextWindow": 204800,
            "maxTokens": 131072,
            "cost": {"input": 0, "output": 0, "cacheRead": 0, "cacheWrite": 0}
          }
        ]
      }
    }
  },
  "agents": {
    "defaults": {
      "model": {
        "primary": "zai/glm-4.7"
      }
    }
  }
}

同时在 ~/.openclaw[ -<profile>]/agents/main/agent/auth-profiles.json 中配置 API Key：

{
  "profiles": {
    "zai:default": {
      "type": "api_key",
      "provider": "zai",
      "key": "<your-api-key>"
    }
  }
}

以及在 ~/.openclaw[ -<profile>]/agents/main/agent/models.json 中：

{
  "providers": {
    "zai": {
      "baseUrl": "https://open.bigmodel.cn/api/coding/paas/v4",
      "api": "openai-completions",
      "apiKey": "<your-api-key>",
      "models": [
        {
          "id": "glm-4.7",
          "name": "GLM-4.7",
          "reasoning": true,
          "input": ["text"],
          "contextWindow": 204800,
          "maxTokens": 131072,
          "cost": {"input": 0, "output": 0, "cacheRead": 0, "cacheWrite": 0}
        }
      ]
    }
  }
}

兼容的模型提供商

任何兼容 OpenAI API 格式的服务都可以使用，只需修改 baseUrl、apiKey 和模型 ID：

提供商	baseUrl	模型示例
智谱 (ZAI)	https://open.bigmodel.cn/api/coding/paas/v4	glm-4.7, glm-5
ModelVerse	https://api.modelverse.cn/v1	claude-opus-4-6, gemini-3-flash-preview
Ollama (本地)	http://127.0.0.1:11434/v1	qwen2.5, llama3

在前端界面中接入 Agent

启动所有服务后，在浏览器界面中操作：

1. 添加 OpenClaw Agent：点击「添加 Agent」，选择类型 openclaw，填写名称、端口（如 18789）、Token
2. 指定 Dispatcher：将某个 Agent 设为调度中心（如「灵光」）
3. 直接对话：@mention 任意 Agent 进行对话
4. 调度模式：向 Dispatcher 发送任务，它会自动拆解并分发给其他 Agent

获取 OpenClaw Gateway Token

Token 在 ~/.openclaw/openclaw.json 的 gateway.auth.token 字段中：

cat ~/.openclaw/openclaw.json | python3 -c "import sys,json; print(json.load(sys.stdin)['gateway']['auth']['token'])"

接入 Claude Code / Codex

1. 确保本地已安装对应 CLI（claude --version / codex --version）
2. 确保 Bridge 服务已启动（http://localhost:3001）
3. 在界面中添加 Agent，类型选择 claude-code 或 codex，endpoint 填 http://localhost:3001

接入 OpenAI 兼容 API

1. 在界面中添加 Agent，类型选择 openai
2. 填写 endpoint（如 http://localhost:11434）、模型名、API Key

局域网多机部署

要让多台机器上的 Agent 互相协作：

1. 修改 OpenClaw Gateway 绑定模式

编辑每台机器的 openclaw.json：

{
  "gateway": {
    "bind": "lan",
    "port": 18789
  }
}

bind: "lan" 让 Gateway 监听局域网 IP（默认仅监听 127.0.0.1）。

2. 在前端添加远程 Agent

添加 Agent 时，endpoint 填写远程机器的局域网地址：

ws://192.168.1.100:18789
ws://192.168.1.101:18789

3. 确保网络互通

• 所有机器在同一局域网内
• 对应端口（默认 18789）防火墙放行
• 可以通过 openclaw gateway discover 发现局域网内的 OpenClaw 实例

项目截图

技术栈

• 前端：React 19 + TypeScript + Vite + TailwindCSS 4 + Zustand
• Bridge：Express + TypeScript + @anthropic-ai/sdk
• Agent 后端：OpenClaw Gateway（WebSocket）
• CLI 集成：Claude Code、Codex（通过 Bridge 中转）

License

MIT