Agent UI

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

功能特性

• 🔗 AgentOS 集成：无缝连接本地及在线的 AgentOS 实例
• 💬 现代化聊天界面：简洁的设计，支持实时流式传输
• 🧩 Tool Calls 支持：可视化展示智能体的工具调用过程及其结果
• 🧠 推理步骤：显示智能体的推理过程（如果可用）
• 📚 引用支持：展示智能体所使用的参考资料
• 🖼️ 多模态支持：处理包括图像、视频和音频在内的多种内容类型
• 🎨 可定制 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 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. 如果连接成功，您将在聊天界面中看到可用的智能体
3. 如果出现连接问题，请检查您的 AgentOS 是否正在运行且可访问。查看故障排除指南 点击此处

贡献

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

许可证

本项目基于 MIT 许可证 开源。