在 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 智能体 可以智能地管理堆栈中的多个文件,确保正确传播更改。

Antigravity 智能体

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

主要功能包括:

  • 上下文感知:维护先前提示和文件状态的上下文。
  • 多文件管理:处理多个文件之间的依赖项。
  • 验证执行:验证代码更新以减少幻觉。

全栈功能

Google AI Studio 释放了现代 Web 生态系统的强大功能,让您不仅可以构建客户端原型。

  • 服务器端运行时和 npm :使用大量的 npm 软件包库。智能体将自动识别并安装应用所需的软件包(例如,用于数据可视化或 API 客户端的特定库)。您也可以根据需要请求特定软件包。
  • 密钥管理:在 设置菜单中安全地存储 API 密钥和密钥。这些密钥可在服务器端代码中访问,从而避免在客户端泄露。
  • 多人游戏:直接在 AI Studio 中构建实时协作体验。服务器端运行时管理用户一起互动所需的状态和连接。
  • Firebase 集成:自动预配和设置 Firebase, 包括 Firestore 数据库(永久性数据存储)和 Firebase Authentication(登录流程,特别是“使用 Google 账号登录”)。 智能体会处理整个设置过程,甚至在应用中为这些服务编写代码。

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

继续构建

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

在 Google AI Studio 中构建

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

在外部开发

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

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

主要特性

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

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

部署或归档应用

应用准备就绪后,您可以进行部署:

  • Google Cloud Run:将应用部署为可扩缩的服务。 Google Cloud Run 的价格可能因使用情况而异。
  • GitHub:将项目导出到 GitHub 代码库。

限制

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

API 密钥安全性

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

在 Google AI Studio 外部部署

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

分享应用时出错

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

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

常见问题解答

什么是 AI Studio 中的“构建”?

AI Studio Build 是一个平台,旨在帮助您使用 Gemini 从简单的提示到可用于生产用途的 AI 赋能的应用。使用提示描述您要构建的内容,Gemini 将为您生成一个应用。您还可以浏览我们的媒体库,了解 Gemini API 的功能,并混搭应用以打造自己的应用。

为什么“构建”会从客户端代码调用 Gemini API?

通常,最佳做法是从服务器端调用 Gemini API,以免泄露 API 密钥。但 AI Studio 有一个用于客户端调用的 Gemini API 代理,该代理会附加 API 密钥,而不会在代码中泄露该密钥。目前,我们在客户端生成调用以使用此代理,因为这样可以简化代码,并让您无需提供 API 密钥即可与他人分享应用。

分享应用时,我的 API 密钥是否会泄露?

请勿在应用中使用真实的 API 密钥。请改用占位符值。 process.env.GEMINI_API_KEY 设置为您可以使用的占位符值。 当其他用户使用您的应用时,AI Studio 会将对 Gemini API 的调用代理到 Gemini API,并将占位符值替换为 用户 (而非您的)API 密钥。 请勿在应用中使用真实的 API 密钥,因为任何可以查看您的应用的人都可以看到该代码。

谁可以看到我的应用?

默认情况下,您的应用处于非公开状态。您可以与其他用户分享应用,让他们使用该应用。与您分享应用的用户可以查看应用的代码并将其派生出来以供自己使用。如果您分享应用时授予了修改权限,其他用户可以修改应用的代码。

我可以在 AI Studio 外部运行应用吗?

您可以从 AI Studio 将应用部署到 Cloud Run ,这将为您的应用提供公开网址。它与代理服务器一起部署,该代理服务器将确保您的 API 密钥的私密性,但部署的应用将使用您的 API 密钥来处理所有用户的 Gemini API 调用。您还可以将应用下载为 zip 文件。如果您将占位符值替换为真实的 API 密钥,它应该仍然可以正常运行。但您不应 这样部署应用,因为任何用户都可以看到 API 密钥。如需在 AI Studio 外部安全地运行应用,需要将一些逻辑移至服务器端,这样 API 密钥就不会再泄露。

我可以使用自己的工具在本地开发应用,然后在此处分享吗?

此功能尚未推出。我们很高兴将来能支持更多应用使用场景。如果您有任何具体想法,请考虑向我们提供反馈。

如何将数据库或其他存储与我的应用搭配使用?

AI Studio 应用是在 Cloud Run 容器中运行的标准应用。只要没有防火墙阻止来自动态 IP 范围的访问,您就可以使用任何可以通过网络连接的存储解决方案。

我们正在努力在未来添加对存储的直接支持,您将可以直接在 AI Studio 中进行配置。

为了确保观看者了解应用对其网络摄像头或其他 设备的使用情况,我们需要在应用访问 这些 Navigator API 之前获得额外的确认。 应用创建者可以将这些权限请求添加到应用的 metadata.json 文件中。例如:

{
  "name": "My app",
  "requestFramePermissions": [
    "microphone",
    "camera",
    "display-capture",
    "geolocation",
    "bluetooth",
    "clipboard-read",
    "serial",
    "usb"
  ]
}

requestFramePermissions 支持的值是 标准 政策控制的功能的子集。

如何将 GitHub 与我的应用搭配使用?

借助 AI Studio 的 GitHub 集成,您可以为自己的工作创建代码库并提交最新更改。我们目前不支持拉取远程更改。

我可以向其他用户授予应用的编辑权限吗?

目前尚不支持此功能,但即将推出。

为什么我的应用因违反政策而被标记?

我们有自动审核应用的系统,以确保应用符合我们的政策。如果我们发现应用违反了我们的政策,我们会将该应用从 AI Studio 中移除。违反政策的行为包括但不限于以下内容:

  • 包含恶意软件、钓鱼式攻击或冒充行为的应用
  • 显示或散布违反儿童性虐待图像政策的内容的应用
  • 显示或散布违反骚扰政策的内容的应用
  • 显示或散布违反仇恨言论政策的内容的应用
  • 显示或散布违反人口贩卖政策的内容的应用
  • 显示或散布违反露骨色情内容政策的内容的应用
  • 显示或散布违反暴力和血腥内容政策的内容的应用
  • 显示或散布违反有害或危险政策的内容的应用

如果您的应用因违反政策而被标记,并且您认为这是错误的,可以提交申诉。屡次违反我们的政策可能会导致您无法再访问 AI Studio。

作为应用开发者,我的责任是什么?

请注意,作为应用的所有者,您需要对应用的行为及其处理的所有数据负责。其中包括:

  • 法律合规性和第三方权利: 确保您的应用符合所有适用法律法规,并且不侵犯他人的权利,包括知识产权和隐私权。
  • 内容监控: 您的应用使用的 其他服务可能需要遵守附加条款。例如, 适用于 Firestore 的 Google Cloud 服务条款要求托管第三方内容的客户 发布政策,以定义禁止的内容(例如非法 内容),并监控是否存在非法内容。
  • 安全实现: 实现必要的安全措施和审核工具,以防止应用被滥用。

请注意服务条款 中的使用限制。

除非另有说明,否则《Gemini API 附加服务条款》适用于使用 AI Studio 应用媒体库中推荐的应用。

后续步骤