Agent-UI入门教程：5分钟部署你的第一个AI代理交互平台

【免费下载链接】agent-ui A modern chat interface for AI agents built with Next.js, Tailwind CSS, and TypeScript. 项目地址: https://gitcode.com/gh_mirrors/ag/agent-ui

Agent-UI是一个基于Next.js、Tailwind CSS和TypeScript构建的现代化AI代理交互界面，让你能够轻松搭建属于自己的AI代理交互平台。本教程将带你在5分钟内完成从环境准备到成功启动的全过程。

📋 准备工作

在开始部署Agent-UI之前，你需要确保满足以下条件：

1. 已安装Node.js环境（建议v16+版本）
2. 已安装pnpm包管理器
3. 拥有一个运行中的AgentOS实例（如果还没有，可以参考官方创建指南）

🔄 快速安装步骤

1. 克隆项目代码库

首先，通过以下命令将项目代码克隆到本地：

git clone https://gitcode.com/gh_mirrors/ag/agent-ui
cd agent-ui

2. 安装项目依赖

进入项目目录后，使用pnpm安装所需依赖：

pnpm install

3. 配置环境变量

Agent-UI需要通过环境变量连接到AgentOS实例。设置OS_SECURITY_KEY环境变量：

NEXT_PUBLIC_OS_SECURITY_KEY=your_auth_token_here

Note: 此环境变量与AgentOS使用相同的变量，如果你在同一台机器上运行两者，只需设置一次，应用启动时会自动加载令牌。

4. 启动开发服务器

一切准备就绪后，启动开发服务器：

pnpm dev

🎮 开始使用Agent-UI

启动成功后，打开浏览器访问http://localhost:3000即可看到Agent-UI的主界面。首次使用时，你需要：

1. 在界面中找到令牌输入区域
2. 点击令牌字段进行编辑
3. 输入你的认证令牌
4. 系统会安全存储令牌并在所有API请求中自动包含

Security Note: 认证令牌存储在本地全局存储中，并作为Bearer令牌包含在对AgentOS实例的API请求中。

🔧 常见问题解决

如果遇到连接问题，请检查：

1. AgentOS实例是否正在运行
2. 环境变量是否正确设置
3. 网络连接是否正常

📚 扩展学习

• 项目核心代码目录：src/
• 组件库目录：src/components/
• 类型定义文件：src/types/

通过以上步骤，你已经成功部署了自己的Agent-UI平台。现在可以开始探索这个现代化AI代理交互界面的各种功能了！

【免费下载链接】agent-ui A modern chat interface for AI agents built with Next.js, Tailwind CSS, and TypeScript. 项目地址: https://gitcode.com/gh_mirrors/ag/agent-ui