AutoGPT 平台的前端提供了一个现代化、直观的界面，用于构建、运行和管理 AI 代理。本文档涵盖了前端架构、核心组件以及与后端系统的关键交互。有关后端系统的更多信息，请参阅 后端。
该前端使用 Next.js、React 和 TypeScript 构建，提供了一个响应式的单页应用程序，使用户能够
该系统采用了模块化架构，包含可重用组件和用于状态管理的自定义钩子。
该前端使用以下核心技术构建
| 技术 | 目的 |
|---|---|
| Next.js | 用于服务器端渲染和路由的 React 框架 |
| React | UI 组件库 |
| TypeScript | 类型安全的 JavaScript |
| XY Flow | 用于代理构建器的图形可视化库 |
| TailwindCSS | 实用优先 CSS 框架 |
| Radix UI | 低级 UI 组件基础 |
| Supabase | 认证和用户管理 |
来源
该前端架构遵循模块化方法，明确分离了关注点。应用程序的核心围绕 Next.js 页面构建，并带有用于动态行为的客户端组件。状态管理主要通过自定义钩子（如 useAgentGraph）来处理，该钩子与后端 API 进行交互。
来源
来源
代理构建器是一个基于图形的视觉编辑器，允许用户通过连接节点来设计代理，每个节点代表一个功能块。它使用 XY Flow 库（以前称为 React Flow）实现。
代理构建器的主要特点
来源
系统提供不同数据类型的专用输入组件，这些组件会根据块的架构定义动态渲染
| 数据类型 | 组件 | 描述 |
|---|---|---|
| 文本（短） | NodeStringInput | 单行文本输入 |
| 文本（长） | NodeTextBoxInput | 多行文本区域 |
| 数字 | NodeNumberInput | 数字输入字段 |
| 布尔值 | NodeBooleanInput | 切换开关 |
| 选择 | 下拉选择 | 下拉选择 |
| 多选 | MultiSelector | 多选项选择 |
| 对象 | NodeObjectInputTree | 嵌套对象属性 |
| 数组 | NodeArrayInput | 项目列表 |
| 键值对 | NodeKeyValueInput | 键值对字典 |
| 凭据 | NodeCredentialsInput | API 凭据选择器 |
| 日期/时间 | NodeDateTimeInput | 日期和时间选择器 |
| 文件 | NodeFileInput | 文件上传组件 |
来源
块控制面板提供了一个分类的、可搜索的可用块列表，用户可以将这些块添加到他们的代理图中
块选择系统包括高级搜索功能，其评分基于
来源
代理运行器提供了一个用于配置、执行和监控代理运行的界面
代理运行器允许用户
来源
代理构建器使用一个名为 useAgentGraph 的自定义钩子，它管理整个图形编辑器的状态，包括
当用户保存代理时，前端会构建一个图形表示，该表示映射到后端数据模型，然后发送到服务器。
来源
代理执行期间的实时更新通过 WebSocket 连接处理。前端订阅执行事件并相应地更新 UI，显示
来源
前端通过一个集中的 BackendAPI 客户端类与后端通信，该类提供了所有必需操作的方法
API 客户端处理
前端使用的一些关键 API 端点包括
/graphs - 创建和管理代理图/blocks - 获取可用块/executions - 管理代理执行/library - 管理用户代理库/store - 与市场进行交互/integrations - 管理 API 凭据和 OAuth 流程来源
该前端使用 TypeScript 并拥有一个与后端数据模型相匹配的全面类型系统
类型系统确保了应用程序中端到端的类型安全，并在开发过程中实现智能自动补全和验证。
来源
代理构建器提供了一个基于画布的界面，通过节点图创建代理。该界面包括
图中的每个节点代表一个功能块（例如，API 调用、AI 任务、数据转换），包含
构建器支持不同类型的节点，包括
来源
Runner 界面允许用户
它包含三个主要视图
来源
AutoGPT 前端提供了一个全面、用户友好的界面，用于构建和运行 AI 代理，而无需编程知识。该架构遵循现代前端开发实践，使用了 React 和 TypeScript，并与后端集成，可实现强大的功能和实时反馈。
前端系统的关键优势包括
有关特定前端组件的更详细信息，请参阅以下页面