Agent UI

这是一个基于 Next.js、Tailwind CSS 和 TypeScript 构建的 AgentOS 现代化聊天界面。该模板提供了一个开箱即用的 UI，用于通过 Agno 平台连接并与您的 AgentOS 实例进行交互。

功能特点

• 🔗 AgentOS 集成：无缝连接本地及远程的 AgentOS 实例
• 💬 现代化聊天界面：简洁的设计，支持实时流式传输
• 🧩 支持 Tool Calls：可视化呈现 Agent 的工具调用及其执行结果
• 🧠 推理步骤展示：显示 Agent 的推理过程（如果可用）
• 📚 支持引用来源：展示 Agent 使用的参考资料
• 🖼️ 支持多模态：处理包括图像、视频和音频在内的多种内容类型
• 🎨 可定制 UI：基于 Tailwind CSS 构建，易于修改样式
• 🧰 现代技术栈：使用 Next.js、TypeScript、shadcn/ui、Framer Motion 等构建

版本支持

• Main 分支：支持 Agno v2.x（推荐）
• v1 分支：支持 Agno v1.x，用于旧版本兼容

快速入门

前置条件

在设置 Agent UI 之前，您需要一个正在运行的 AgentOS 实例。如果您尚未创建，请查看我们的创建您的第一个 OS 指南。

注意：Agent UI 通过 Agno 平台连接到 AgentOS 实例。在尝试连接之前，请确保您的 AgentOS 正在运行。

安装

自动安装（推荐）

npx create-agent-ui@latest

手动安装

1. 克隆代码库：

git clone https://github.com/agno-agi/agent-ui.git
cd agent-ui

2. 安装依赖：

pnpm install

3. 启动开发服务器：

pnpm dev

4. 在浏览器中打开 http://localhost:3000 查看运行结果。

连接到您的 AgentOS

Agent UI 直接连接到您的 AgentOS 实例，使您能够通过现代化的聊天界面与 Agent 进行交互。

前置条件：在将 Agent UI 连接到 AgentOS 之前，您需要有一个正在运行的 AgentOS 实例。如果您尚未创建，请查看我们的创建您的第一个 OS 指南。

连接步骤

1. 配置端点 (Endpoint)

默认情况下，Agent UI 连接到 http://localhost:7777。您可以轻松更改此设置：

1. 将鼠标悬停在左侧边栏的端点 URL 上
2. 点击编辑选项以修改连接设置

2. 选择您的环境

• 本地开发：使用 http://localhost:7777（默认）或您自定义的本地端口
• 生产环境：输入您的生产环境 AgentOS HTTPS URL

警告：在尝试连接之前，请确保您的 AgentOS 确实在指定的端点上运行。

3. 配置身份验证（可选）

如果您的 AgentOS 实例需要身份验证，您可以通过以下两种方式进行配置：

方式 1：环境变量（推荐）

设置 OS_SECURITY_KEY 环境变量：

# 在您的 .env.local 文件或 Shell 环境中
NEXT_PUBLIC_OS_SECURITY_KEY=your_auth_token_here

注意：此设置与 AgentOS 使用相同的环境变量，因此如果您在同一台机器上运行两者，只需设置一次即可。令牌将在应用程序启动时自动加载。

方式 2：UI 配置

1. 在左侧边栏中，找到“Auth Token”部分
2. 点击令牌字段进行编辑
3. 输入您的身份验证令牌
4. 令牌将被安全存储，并包含在所有 API 请求中

安全提示：身份验证令牌存储在本地全局存储中，并作为 Bearer Token 包含在发送给 AgentOS 实例的 API 请求中。

4. 测试连接

配置端点后：

1. Agent UI 将自动尝试连接到您的 AgentOS
2. 如果成功，您将在聊天界面中看到可用的 Agent
3. 如果出现连接问题，请检查您的 AgentOS 是否正在运行且可访问。请在此查看故障排除指南：这里

参与贡献

欢迎提交贡献！请参阅 CONTRIBUTING.md 以获取贡献指南。

许可证

本项目采用 MIT License 授权。