Agent-UI与AgentOS集成教程：安全连接与API配置最佳实践

缪生栋

837人浏览 · 2026-02-22 03:52:15

缪生栋 · 2026-02-22 03:52:15 发布

Agent-UI与AgentOS集成教程：安全连接与API配置最佳实践

【免费下载链接】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代理聊天界面，通过与AgentOS的无缝集成，用户可以轻松实现安全高效的AI交互体验。本教程将详细介绍如何配置Agent-UI与AgentOS的连接，确保数据传输安全并优化API调用性能。

准备工作：环境与依赖检查

在开始集成前，请确保您的开发环境满足以下要求：

Node.js 18.x或更高版本
pnpm包管理器
Git版本控制工具

首先克隆项目仓库：

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

项目核心依赖已在package.json中定义，安装过程会自动处理所有必要组件。

安全连接配置：认证令牌设置

Agent-UI与AgentOS之间的通信采用Bearer令牌认证机制，确保所有API请求都经过身份验证。

令牌存储与管理

认证令牌在应用中通过状态管理系统进行安全存储：

// src/store.ts
authToken: '',
setAuthToken: (authToken) => set(() => ({ authToken })),

您可以通过UI界面的认证令牌设置组件AuthToken.tsx输入并保存您的AgentOS访问令牌。

请求头自动生成

系统会自动为每个API请求生成包含认证信息的请求头：

// src/api/os.ts
const createHeaders = (authToken?: string): HeadersInit => {
  const headers: HeadersInit = {
    'Content-Type': 'application/json',
  }
  if (authToken) {
    headers['Authorization'] = `Bearer ${authToken}`
  }
  return headers
}

API端点配置：连接AgentOS服务

端点选择与切换

Agent-UI支持多端点配置，您可以通过EntitySelector.tsx选择或切换不同的AgentOS服务端点。

核心API调用实现

以下是与AgentOS交互的核心API调用函数：

获取系统状态：

// src/api/os.ts
export const getStatusAPI = async (endpoint: string, authToken?: string) => {
  const response = await fetch(`${endpoint}/status`, {
    method: 'GET',
    headers: createHeaders(authToken)
  })
  return response.json()
}

获取可用代理列表：

// src/api/os.ts
export const getAgentsAPI = async (endpoint: string, authToken?: string) => {
  const response = await fetch(`${endpoint}/agents`, {
    method: 'GET',
    headers: createHeaders(authToken)
  })
  return response.json()
}

这些API调用在useChatActions.ts中被进一步封装为React钩子，方便在UI组件中使用。