AutoGen UI

[!IMPORTANT]
本仓库已更新，现基于新的 AutoGen 0.4x AgentChat API 使用 AutoGen AgentChat 接口。此外，API 可能会发生变化，因此未来可能会出现一些破坏性变更。

这是使用 AutoGen AgentChat API 构建 UI 界面的“Hello World”示例。

一个演示如何利用 AutoGen AgentChat API 构建界面的示例 UI。该 UI 使用 Next.js 构建，并通过 FastApi 提供后端 Web API。

应用程序的功能是什么？

• autogenui.manager - 提供一个简单的运行方法，接收提示并从预定义的 代理团队 获取响应。请查看 代理团队 的 JSON 配置文件，了解代理的配置方式，以及支持的代理类型等信息。有关如何使用提供的类加载团队规范的示例，请参阅 教程笔记本。

• autogenui.web.app.py - FastApi 后端，提供一个简单的 /generate 端点，接收提示并从预定义的 代理团队 获取响应。

  • 创建管理器以执行任务
  • 将任务执行结果流式传输到客户端 UI

• frontend - Next.js 前端，提供一个简单的聊天界面，用于与后端交互。

下一步计划是什么？

显然，这个应用只是一个起点。以下是一些扩展它的思路：

• 扩展管理器，使其能够通过 UI 支持多种团队配置。
• 将交互历史存储并加载到数据库中。
• 安全性方面——为应用程序添加身份验证和授权机制。

[!TIP] 注意 AutoGen Studio 正在基于 AgentChat API 进行重写，以解决上述大多数问题。可以参考其实现，获取更完整的示例。

快速开始

请注意，您需要设置 OPENAI_API_KEY 才能运行此应用。

export OPENAI_API_KEY=<your key>

安装依赖项。需要 Python 3.9 或更高版本。您可以使用 pip 从 PyPI 安装：

pip install autogenui

或者从源代码安装：

git clone git@github.com:victordibia/autogen-ui.git
cd autogenui
pip install -e .

运行 UI 服务器。

设置环境变量 OPENAI_API_KEY：

export OPENAI_API_KEY=<your_key>

autogenui # 或者使用 --port 8081

在浏览器中打开 http://localhost:8081。

要修改源文件，请在前端源文件中进行更改，然后运行 npm run build 重新构建前端。

开发模式

要在开发模式下运行应用程序，您需要分别运行后端和前端。

后端——支持热重载

autogenui --reload

[!TIP] 提示 此 CLI 加载的 UI 是预先编译好的版本，通过运行下面的前端构建命令生成。这意味着，如果您更改了前端代码，或更改了后端运行的主机名或端口，则需要重新构建前端代码，才能通过此命令加载更新后的前端。

前端

cd frontend

安装依赖项：

yarn install

以开发模式运行——支持热重载。

在命令行中设置 NEXT_PUBLIC_API_SERVER：

export NEXT_PUBLIC_API_SERVER=http://<your_backend_hostname>/api

或者在前端目录中创建一个 .env 文件，内容如下：

NEXT_PUBLIC_API_SERVER=http://<your_backend_hostname>/api

其中 your_backend_hostname 是 autogenui 运行的主机名，例如 localhost:8081。

yarn dev

（重新）构建

请记住，在构建之前先安装依赖项并设置 NEXT_PUBLIC_API_SERVER：

yarn build

路线图

该项目并没有明确的路线图。它旨在作为一个简单的示例，帮助您快速入门 AutoGen AgentChat API。如需更完整的示例，请参阅 AutoGen Studio 项目。

参考文献

• AutoGen Studio。

@inproceedings{dibia2024autogen,
  title={AutoGen Studio: A No-Code Developer Tool for Building and Debugging Multi-Agent Systems},
  author={Dibia, Victor and Chen, Jingya and Bansal, Gagan and Syed, Suff and Fourney, Adam and Zhu, Erkang and Wang, Chi and Amershi, Saleema},
  journal={EMNLP 2024},
  year={2024}
}

• AutoGen。

@inproceedings{wu2023autogen,
      title={AutoGen: Enabling Next-Gen LLM Applications via Multi-Agent Conversation Framework},
      author={Qingyun Wu and Gagan Bansal and Jieyu Zhang and Yiran Wu and Shaokun Zhang and Erkang Zhu and Beibin Li and Li Jiang and Xiaoyun Zhang and Chi Wang},
      year={2023},
      eprint={2308.08155},
      archivePrefix={arXiv},
      primaryClass={cs.AI}
}

AutoGen UI 快速上手指南

AutoGen UI 是一个基于 Next.js 前端和 FastAPI 后端的示例应用，旨在演示如何使用 AutoGen AgentChat API（v0.4x+）构建多智能体交互界面。

环境准备

在开始之前，请确保满足以下系统要求和前置条件：

• 操作系统：Linux, macOS 或 Windows (WSL 推荐)
• Python 版本：3.9 或更高版本
• API 密钥：必须拥有有效的 OPENAI_API_KEY
• 包管理工具：
  • Python: pip
  • 前端开发（可选）: yarn 或 npm

安装步骤

你可以选择通过 PyPI 直接安装，或者从源码安装以便进行修改。

方式一：通过 PyPI 安装（推荐）

pip install autogenui

方式二：从源码安装

git clone git@github.com:victordibia/autogen-ui.git
cd autogen-ui
pip install -e .

提示：国内用户若遇到 pip 下载缓慢，可添加清华或阿里镜像源加速： pip install autogenui -i https://pypi.tuna.tsinghua.edu.cn/simple

基本使用

安装完成后，按照以下步骤启动服务并访问界面。

1. 配置环境变量

设置你的 OpenAI API 密钥。

Linux/macOS:

export OPENAI_API_KEY=<your_key>

Windows (PowerShell):

$env:OPENAI_API_KEY="<your_key>"

2. 启动 UI 服务器

运行以下命令启动应用（默认端口为 8081）：

autogenui

如需指定端口，可使用：

autogenui --port 8081

3. 访问界面

打开浏览器，访问以下地址即可开始与预定义的代理团队进行对话：

http://localhost:8081

该应用加载了默认的代理团队配置（位于 notebooks/default_team.json），你只需在聊天框输入提示词（Prompt），后端将流式返回多智能体的协作结果。

---

开发者模式（可选）

如果你需要修改前端代码或进行热重载开发，需分别启动后端和前端：

1. 启动后端（热重载）:

   autogenui --reload
   

2. 启动前端:

   cd frontend
   yarn install
   export NEXT_PUBLIC_API_SERVER=http://localhost:8081/api
   yarn dev