Google AI Studio 中的构建模式

本页介绍了如何使用 Google AI Studio 中的“构建”模式快速构建（或编写代码）并部署应用，以测试 Gemini 的最新功能，例如 nano banana 和 Live API。

开始使用

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

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

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

创建了什么？

当您运行提示时，AI Studio 会创建一个 Web 应用。默认情况下，它会创建一个 React Web 应用，但您也可以在“设置”菜单中选择创建 Angular 应用。您可以在右侧的预览窗格中选择代码标签页，查看生成的代码。

以下是需要注意的文件：

  • geminiService.ts：此文件包含应用的主要逻辑，从构建提示到调用 Gemini API 并解析其响应。您可以在此文件中修改基本提示，也可以直接或通过在“构建”模式下与 Gemini 进行交互式对话来修改任何组件功能。请注意，此文件中的代码使用 GenAI TS SDK 与 Gemini API 进行交互。

继续构建

Google AI Studio 为您的 Web 应用生成初始代码后，您有以下两种主要选择来继续您的项目：在 AI Studio 中构建或在外部开发。

在 Google AI Studio 中构建

您可以直接在 Google AI Studio 环境中继续优化和扩展应用：

  • 与 Gemini 迭代：在构建模式下使用聊天面板，让 Gemini 进行修改、添加新功能或更改样式。例如，您可以提出“添加一个提醒用户的按钮”或“将配色方案更改为蓝色和白色”等要求。
  • 直接修改代码：在预览面板中打开代码标签页，即可进行实时修改。您可以将项目保存到 GitHub，以便在开发过程中利用版本控制功能。

在外部开发

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

  • 下载并本地开发：将生成的代码导出为 ZIP 文件，然后将其导入到代码编辑器中。这样，您就可以使用熟悉的工具、构建系统和本地版本控制实践，在初始原型基础上继续构建。
  • 推送到 GitHub：通过将代码推送到 GitHub 代码库，将代码与现有的开发和部署流程集成。

主要特性

Google AI Studio 包含多项功能，可让构建过程直观明了：

  • 注释模式：您无需编写代码来更改应用的外观，只需在注释模式下突出显示应用界面的任何部分，并描述您想要的更改。例如，您可以选择一个组件，然后输入“将此按钮设为蓝色”或“为此图片添加动画效果，使其从左侧滑入”。选择添加到对话后，系统会生成一个提示，其中包含带注释的应用的屏幕截图。
  • 分享您的应用：您可以与他人分享自己的作品，以便协作或展示您的作品。
  • 应用库：应用库提供了一个项目创意可视化库。 您可以浏览 Gemini 的各种功能，立即预览应用，并对其进行混剪，打造出属于自己的作品。

部署或归档应用

应用准备就绪后，您可以直接从 AI Studio 部署应用。部署选项包括：

  • Google Cloud Run：将应用部署为可扩缩的服务。请注意，Google Cloud Run 的价格可能会根据使用情况而有所不同。
  • GitHub：将项目导出到 GitHub 代码库，以便将其集成到现有的开发和部署工作流程中。

限制

本部分概述了在 Google AI Studio 中使用“构建”模式时的一些重要限制。

API 密钥的安全性和暴露风险

  • 共享应用的代码对任何查看者都是可见的。切勿直接在应用的代码中使用真实的 API 密钥。
  • 默认情况下，应用会使用占位符（例如 process.env.GEMINI_API_KEY）作为 API 密钥。当用户在 AI Studio 中运行您的共享应用时，AI Studio 会充当代理，将占位符替换为最终用户的 API 密钥，从而确保您的密钥保持私密状态。

应用公开范围和分享设置

  • 应用存储在 Google 云端硬盘中，并沿用其权限模型，这意味着应用默认处于不公开状态。
  • 共享权限：与其他用户共享应用时：
    • 共享用户可以查看代码并派生应用以供自己使用。
    • 如果获得修改权限，共享用户可以修改应用的代码。

在 AI Studio 之外进行部署

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

工具和功能支持

  • 本地开发导入：目前，您无法使用外部工具在本地开发应用，然后将其导入 AI Studio。

后续步骤

  • 查看其他人构建的项目，并从应用库中混音现有项目汲取灵感。
  • 请查看 YouTube 播放列表，其中包含一系列 AI Studio 氛围编码教程，可帮助您快速入门。