在 Google AI Studio 中构建应用

本页介绍了如何使用 Google AI Studio 快速构建(或“随心编码”)和部署应用,以测试 Gemini 的最新功能,例如 Nano BananaLive API。Google AI Studio 现在支持全栈运行时,让您能够通过自然语言提示构建具有服务器端逻辑、安全密钥管理和 npm 软件包支持的强大应用。

开始使用

在 Google AI Studio 的构建模式中开始氛围编程。您可以通过以下几种方式开始构建:

  • 从提示开始:在“构建”模式下,使用输入框输入您要构建的内容的说明。选择 AI 芯片,以便在提示中添加图片生成或 Google 地图数据等特定功能。您甚至可以使用语音转文字按钮说出您想要的内容。
  • “手气不错”按钮:如果您需要创意灵感,请使用“手气不错”按钮,Gemini 会生成包含项目想法的提示,帮助您开始创作。
  • 混编应用库中的项目:打开应用库中的项目,然后选择复制应用

运行提示后,您会看到必要的代码和文件已生成,右侧会实时显示应用的预览效果。

创建了什么?

运行提示后,AI Studio 会创建一个完整的应用。默认情况下,它会创建一个全栈环境,其中可以包含:

  • 客户端:Web 前端(默认使用 React)。
  • 服务器端:一种 Node.js 运行时,可实现安全的 API 调用、数据库连接和 npm 软件包使用。

您可以在右侧的预览窗格中选择代码标签页,查看生成的代码。反重力代理可智能管理堆栈中的多个文件,确保更改得到正确传播。

Antigravity Agent

Antigravity AgentGoogle Antigravity 中的主要 AI 功能,现在,代理框架的核心组件正在为 Google AI Studio 中的“构建”模式体验提供支持。它不仅能生成简单的代码,还能维护整个项目的上下文、管理多个文件,并理解复杂的指令,从而构建强大的全栈应用。

主要功能包括:

  • 上下文感知:保持之前提示和文件状态的上下文。
  • 多文件管理:处理多个文件之间的依赖关系。
  • 经过验证的执行:验证代码更新,以减少幻觉。

全栈功能

Google AI Studio 可充分发挥现代网络生态系统的强大功能,让您不仅可以构建客户端原型。

  • 服务器端运行时和 npm:使用丰富的 npm 软件包库。代理会根据应用的需求自动识别并安装软件包(例如,用于数据可视化的特定库或 API 客户端)。您也可以根据需要请求特定套餐。
  • 密文管理:在设置菜单中安全地存储 API 密钥和密文。这些密钥可在服务器端代码中访问,因此不会在客户端泄露。
  • 多人模式:直接在 AI Studio 中构建实时协作体验。服务器端运行时会管理用户一起互动所需的状态和连接。

详细了解如何开发全栈应用

继续构建

Google AI Studio 为您的应用生成初始代码后,您可以继续对其进行优化:

在 Google AI Studio 中构建

  • 与 Gemini 迭代开发:在构建模式下使用聊天面板,让 Gemini 进行修改、添加新功能或更改样式。
  • 直接修改代码:在预览面板中打开代码标签页,进行实时修改。

在外部开发

对于更高级的工作流,您可以导出代码并在自己偏好的环境中工作:

  • 下载并进行本地开发:将生成的代码导出为 ZIP 文件,然后将其导入到代码编辑器中。
  • 推送到 GitHub:通过将代码推送到 GitHub 代码库,将代码与现有的开发和部署流程集成。

主要特性

Google AI Studio 包含多项功能,可让构建过程直观且可视化:

  • 创建和迭代全栈应用:只需提供提示即可创建全栈应用,并通过聊天或注释模式进行迭代。在注释模式下,您可以突出显示应用界面的任何部分,并描述您想要的更改。
  • 分享和部署应用:您可以与他人分享自己的作品,以便协作或展示您的作品。然后,在应用准备就绪后,将其部署到 Cloud Run。
  • 应用库:应用库提供了一个项目创意可视化库。 您可以浏览 Gemini 的各种功能,立即预览应用,并对其进行混搭,打造出属于自己的应用。

创建并迭代全栈应用:简要介绍运行时支持,使用注释模式进行迭代 分享和部署 - 在 AI Studio 中分享应用或部署到 Cloud Run 探索应用库

部署或归档应用

应用准备就绪后,您可以按以下方式部署应用:

  • Google Cloud Run:将应用部署为可扩缩的服务。 Google Cloud Run 的价格可能取决于用量。
  • GitHub:将项目导出到 GitHub 代码库。

限制

本部分列出了 Google AI Studio 中构建模式的当前限制。

API 密钥安全性

  • 客户端:切勿直接在客户端代码中使用真实的 API 密钥。
  • 服务器端:使用 Secret 管理功能在服务器端运行时安全地处理敏感密钥。

在 Google AI Studio 之外进行部署

  • 虽然您可以将应用部署到 Cloud Run 以获取公开网址,但此设置将针对所有用户的 Gemini API 调用使用您的 API 密钥。
    • JavaScript 应用在客户端运行,因此请确保 API 密钥仅具有最低限度的访问权限,以防止数据泄露或滥用。例如,用户可以通过此机制访问同一项目的其他文件搜索存储区。
  • 安全地进行外部部署:如需在 AI Studio 之外安全地运行应用(例如,在下载 ZIP 文件后),您必须将使用 API 密钥的逻辑移至服务器端组件,以防止密钥暴露给最终用户。如果您使用 Cloud Run 进行部署,则无需执行此操作。
  • 密钥泄露警告:强烈建议不要在客户端环境中简单地将占位符替换为真实的 API 密钥,因为这样一来,任何用户都可以看到该密钥。

分享应用时出错

如果您分享了应用,而最终用户在使用分享的网址时遇到 403 访问受限错误,则可能是由于以下原因之一:

  • 浏览器扩展程序:Privacy Badger 等隐私扩展程序可能会屏蔽该应用。请停用该扩展程序,以免出现错误。
  • 构建问题:当前代码可能存在问题。提示代理“修复当前代码的所有 build 问题”,然后重新分享网址。

后续步骤