AutoGen UI：给微软 AutoGen 框架造一个"看见思考"的聊天界面

从代码编辑器到 Agent 界面：为什么需要 AutoGen UI

想象一下，你写了一段让 AI 自主完成任务的代码——它真的在"思考"吗？你只能看到最终输出，中间过程完全是黑箱。对于开发者来说，这种透明度的缺失就像调试没有日志的函数：跑完了，不知对错，不知中间发生了什么。

AutoGen UI 解决的正是这个问题。它是微软 AutoGen 多 Agent 框架的可视化界面，由越南工程师 Victor Dibia（GitHub @victordibia）于 2023 年 10 月创建，定位是 AutoGen AgentChat API 的"hello world"入门级 UI 示例。项目目前已积累 999 颗 Star，是 AutoGen 生态中最受欢迎的 UI 扩展项目之一。

图1：AutoGen UI 主界面——实时展示 Agent 思考流

---

技术架构：前后端分离的流式通信设计

整体架构

项目采用经典的前后端分离架构，前后端通过 WebSocket 维持实时双向通信：

用户浏览器 (Next.js)
        ↕ WebSocket (ws://localhost:8081/api/ws/logs/{session_id})
        ↓
FastAPI 后端 (autogenui.web.app)
        ↕ asyncio 流式调用
AutoGen AgentChat Team (多 Agent 协作执行)

前端：Next.js + Ant Design + Tailwind CSS

前端基于 Next.js 13.5.6，使用以下核心技术栈：

• UI 框架：Ant Design 5 + Tailwind CSS，按需混用
• 聊天组件：ChatBoxView 负责消息渲染，react-markdown + react-syntax-highlighter 渲染代码片段
• 实时通信：前端先通过 /api/create_session 建立 session，再通过 WebSocket 连接到 /api/ws/logs/{session_id}
• 状态管理：Next.js 原生 React 状态，无 Redux/Zustand 等额外依赖

前端构建时会将产物复制到 autogenui/web/ui/ 目录，由 FastAPI 后端以静态文件方式托管。

后端：FastAPI + AutoGen AgentChat

后端核心文件为 autogenui/web/app.py，采用 FastAPI 框架实现：

• 路由层：/api/generate（POST）接收用户 prompt，通过 TeamManager 调用 AutoGen AgentChat Team，流式返回结果
• 通信层：ConnectionManager 管理 WebSocket 连接池，每个 session 独立，支持重连
• 会话管理：基于 UUID session ID，支持历史消息注入

关键代码片段（app.py 第 92 行附近）展示了流式传输逻辑：

async for message in team_manager.run_stream(task=req.prompt):
    if isinstance(message, (AgentMessage, ChatMessage)):
        await websocket.send_json({
            "type": "message",
            "content": message.content,
            "source": message.sender,
        })
    elif isinstance(message, TeamResult):
        await websocket.send_json({"type": "result", "content": ...})

Agent 编排层：Provider + Manager

项目将 AutoGen 的复杂 API 封装为两层：

1. TeamManager (manager.py)：入口类，提供 run_stream() 和 run() 两个方法，支持自定义 Team 配置文件路径，默认加载 notebooks/default_team.json
2. Provider (provider.py)：根据 JSON 配置动态创建 Agent、Team、Termination Condition，实现零代码配置多 Agent 协作

支持的 Agent 类型：

• AssistantAgent：通用助手（默认）
• CodingAssistantAgent：编程专用助手

支持的 Team 编排方式：

• RoundRobinGroupChat：轮询制，每个 Agent 依次发言
• SelectorGroupChat：基于 LLM 选择下一个发言者

数据模型

autogenui/datamodel/ 定义了完整的 Pydantic 数据模型：

@dataclass
class TeamConfig:
    name: str
    participants: List[AgentConfig]
    team_type: str  # RoundRobinGroupChat | SelectorGroupChat
    termination_condition: TerminationConfig

@dataclass
class AgentConfig:
    name: str
    agent_type: str
    model_client: ModelConfig
    tools: List[ToolConfig]  # 动态加载 Python 函数
    system_message: Optional[str]

---

部署方式：pip 一键安装，但有条件

安装流程

# 方式一：从 PyPI 安装
pip install autogenui

# 方式二：从源码安装
git clone git@github.com:victordibia/autogen-ui.git
cd autogenui && pip install -e .

# 启动（自动打开 http://localhost:8081）
autogenui  # 默认 127.0.0.1:8081

开发者分离启动

如果需要同时修改前后端：

# 后端（热重载）
autogenui --reload

# 前端（需要先设置环境变量）
cd frontend
export NEXT_PUBLIC_API_SERVER=http://localhost:8081/api
yarn dev

硬件与前置依赖

依赖项	说明
Python	≥ 3.9
OPENAI_API_KEY	必须，可替换为任何 OpenAI 兼容 API
Node.js/yarn	仅前端开发需要，构建产物已嵌入后端

当前限制

1. 无容器化支持：无 Dockerfile 和 docker-compose，无法一键容器部署
2. API Key 硬依赖：不提供本地模型后端选项，依赖 OpenAI 或兼容服务
3. session 临时存储：无数据库，后端重启后聊天记录丢失
4. CORS 限制：仅允许 http://localhost:3000，部署到非本地环境需修改 app.py 中的 allow_origins

---

项目启示：AutoGen 生态的 UI 探索

Victor Dibia 在 README 中明确写道：

[!TIP] AutoGen Studio 正在基于 AgentChat API 重写，功能更完整，有更完善的多 Agent 配置、持久化存储和 UI 界面。建议需要完整功能的用户直接使用 AutoGen Studio。

这说明 AutoGen UI 本质是一个学习示例，而非生产级产品。它的价值在于：

1. 最小化理解 AutoGen：通过一个完整可运行的例子，理解 Agent、Team、Tool、Termination 的配置方式
2. 流式 UI 模板：展示了如何用 WebSocket + FastAPI 实现 LLM 流式输出的前端展示
3. 动态配置加载：通过 JSON 配置文件而非硬编码的方式定义多 Agent 协作，降低了实验门槛

对于想要深入 AutoGen 的开发者，建议的学习路径是：AutoGen UI（理解架构）→ AutoGen Studio（完整功能）→ 自行扩展（生产落地）。

---

总结

维度	评估
项目定位	入门级示例，非生产级产品
技术栈	TypeScript (Next.js) + Python (FastAPI + AutoGen)
核心能力	多 Agent 协作的 Web 可视化、流式输出展示
部署难度	简单（pip 一键安装，但需要 API Key）
扩展性	高（Provider 模式支持动态配置任意 Agent 组合）
适用人群	学习 AutoGen 框架、了解 Agent UI 实现的开发者