Software 2.0

构建Agent用户界面

admin -

AI开发领域的步伐一日千里。我们已经掌握了使用MCP（Model Context Protocol）、A2A（Agent2Agent Protocol）、ADK（Agent Development Kit）和LangChain等技术构建Agent的艺术。我们拥有运行在本地机器或服务器上的强大后端，能够执行复杂的推理任务。

然而，对于许多开发者来说，工作流中存在一个巨大的缺口：展示层。 大多数这些强大的Agent仅限于命令行界面（CLI）中生存和消亡。

我们将要构建的赛博朋克风格的AI聊天界面。

本文将提供一个循序渐进的实战教程，介绍如何使用Google AI Studio的"Build"功能，为你的AI Agent生成一个功能完备、视觉惊艳的React前端，包括聊天历史记录、模型切换和图像生成功能。

1、快速基础知识回顾

在深入之前，让我们先梳理一下我们将要使用的技术栈：

  • Google AI Studio： 一个基于Web的原型开发环境，供开发者实验Gemini模型。
  • Gemini 3.0 Pro： Google的高级推理模型，我们不仅用它来聊天，还将其作为"编码者"来构建我们的应用。
  • React： 最流行的用于构建用户界面的JavaScript库。
  • Local Storage： 一种Web API，允许JavaScript网站和应用程序在Web浏览器中存储键/值对，没有过期日期（非常适合在本地保存聊天历史记录）。
  • Artifacts/Previews： AI Studio中实时渲染代码的能力，可以在构建过程中查看应用程序。

2、我们要构建什么样的用户界面？

我们将构建一个"ThinkChat"应用程序。这是一个双模式应用程序：一个用于推理Agent的文本聊天界面，以及一个用于图像生成的"想象"模式。我们将通过向Google AI Studio发送提示来编写代码，利用gemini-3-pro-preview模型获得卓越的编码能力。

3、构建过程概述

理解这个过程的最佳方式是将其视为与一位高级前端工程师（AI）的迭代式对话。我们将按以下步骤进行：

  1. 搭建舞台： 配置Google AI Studio。
  2. 初始提示： 生成核心聊天逻辑。
  3. 迭代优化： 添加侧边栏历史记录和设置。
  4. 扩展功能： 添加图像生成。
  5. "超越UI"的现实： 从原型走向生产。

3.1 搭建舞台

首先，导航到 aistudio.google.com/apps。这是AI Studio套件中一个相对较新的部分，专门为构建应用程序而设计。

"用Gemini构建你的创意"起始页面。

登录后，你会看到一个提示栏。这里的关键步骤是模型选择。默认情况下，它可能会选择Gemini Flash。对于编码复杂的React应用程序，你需要最强大的推理能力。

专业提示： 将模型切换为 Gemini 3.0 Pro Preview。这个模型在处理上下文窗口和复杂编码指令方面明显优于Flash变体。

3.2 初始提示

我们不想手动编写create-react-app。我们想描述的是最终结果。我的初始提示涉及描述应用的功能需求：

"为我构建一个Web应用程序，用户可以在其中与Agent聊天……文本流式返回到界面……界面应该有附加文件的选项……以及清除聊天的选项。聊天记录应该暂时存储在前端本地存储中。"
代码助手正在生成文件结构和实时预览窗口。

Google AI Studio充当"代码助手"的角色。它不仅给你一段代码；它还会创建一个文件结构（App.tsx、components/、styles.css），并在屏幕右侧渲染实时预览。你可以立即与应用程序交互，测试基本聊天功能是否正常工作。

3.3 迭代优化

第一版很少是最终版本。现在我们有了一个基本的聊天功能，我们想让它感觉像一个真正的应用程序。这意味着需要添加持久的历史记录和组织功能。

"在左侧构建一个侧边栏，显示聊天历史记录，这应该从本地存储中读取。"
应用程序现在具有"新聊天"按钮和历史记录侧边栏。

AI会自动重构代码。它更新App.tsx以处理多个会话的状态管理，并修改本地存储逻辑，将聊天会话数组保存而不是仅保存单个对话。

我们可以通过请求特定的UI元素来进一步优化，比如 模型选择器 下拉菜单。这允许用户直接从标题栏在"Gemini 3.0 Flash"（追求速度）和"Gemini 3.0 Pro"（追求质量）之间切换。

3.4 扩展功能：图像生成

为了让应用程序真正强大，让我们添加第二种模式。我们可以要求AI创建一个在"聊天"和"想象"模式之间切换的导航开关。

一个允许用户生成高质量图像的新视图。

AI处理条件渲染。它创建一个新视图，其中的输入专门为图像提示而设计，根据你的API配置，可能会使用不同的后端模型（如Gemini Nano或Imagen）。

在这个阶段，我们还要求添加一个 主题切换 功能。通过一个简单的提示，AI实现了深色/浅色模式切换，立即让应用看起来现代而精致（赛博朋克深色模式是粉丝的最爱！）。

3.5 "超越UI"的现实

我们拥有了一个漂亮的界面，但它目前完全在浏览器中运行，使用的是临时API密钥或本地存储。这对于演示来说很好，但不适合生产环境。

在会话结束时，我们要求AI解释如何为真实世界的部署分离架构。

生产应用的4个关键支柱

要将其上线，你需要解决UI生成器无法为你解决的四个问题：

  1. 数据库与模型： 从本地存储迁移到云数据库（如Firebase或PostgreSQL），以跨设备持久化用户数据。
  2. 认证与安全： 实现Google认证或标准登录流程来保护用户数据。
  3. Agent集成： 将这个React前端连接到你实际的Python/Node.js后端，你的复杂Agent就运行在那里。
  4. 部署： 将前端和后端托管在云服务提供商上。

4、结束语

你正在成为一名全栈AI开发者的道路上迈进。通过利用Google AI Studio，你可以跳过繁琐的前端样板代码设置，专注于真正重要的事情：Agent的逻辑和用户体验。你现在拥有了一个看起来专业、运行流畅的模板，并且已经准备好连接到你强大的后端逻辑。

原文链接: Building an Agent User Interface

汇智网翻译整理，转载请标明出处