开始使用应用原型设计代理

Firebase Studio 包含一个基于 Web 的界面，可让您使用多模态提示（包括自然语言、图片和绘图工具）快速开发原型，以及生成 AI 前向 Web 应用。该代理支持 Next.js 应用，并计划在未来支持其他平台和框架。

应用原型设计代理是一种简化的无代码开发 flow，它使用生成式 AI 来开发、测试、迭代和发布全栈代理 Web 应用。您可以使用可选图片以自然语言描述应用创意，代理会生成应用蓝图、代码和 Web 预览。为了帮助您开发和发布全栈应用，Firebase Studio 可以自动为您预配以下服务：

  • 如果您的应用使用 AI：Firebase Studio 将 Gemini Developer API 添加到您的应用，利用 Genkit flow 的强大功能来与 Gemini 配合使用。您可以使用自己的 Gemini API 密钥，也可以让 Firebase Studio 为您预配 Firebase 项目和 Gemini API 密钥。
  • 如果您想将应用发布到 Web 上：Firebase Studio 会创建一个项目，并提供一种使用 Firebase App Hosting 快速发布应用的方式。

您可以使用自然语言、图片和绘图工具优化应用，直接修改代码、回滚更改、发布应用并监控其性能，所有这些操作都可以在 Firebase Studio 中完成。

开始使用

如需开始使用 App Prototyping agent，请按以下步骤操作：

  1. 登录您的 Google 账号，然后打开 Firebase Studio。

  2. 在使用 AI 开发应用原型字段中，用自然语言描述您的应用想法。

    （可选）添加一张图片作为提示的附加信息。这可以是应用理想用户体验流程的图表，也可以是您希望 Firebase Studio 遵循的配色方案。图片的大小上限为 3 MiB。

  3. 点击使用 AI 开发原型。

    应用原型设计代理会返回应用蓝图，其中提供了建议的应用名称、核心功能和样式指南。

  4. 查看蓝图。您可以提示 Gemini 进行增强和更改，以及直接修改蓝图：

    • 点击 自定义，然后直接修改蓝图。完成更改后点击保存。

    • 在对话窗格中的描述… 字段中，添加澄清问题和背景信息。您还可以上传其他图片。

  5. 批准蓝图后，点击为此应用开发原型。

    Gemini 会根据蓝图生成代码，并返回 Web 预览供您查看。

  6. 如果您的应用使用 AI，系统会提示您添加或生成 Gemini API 密钥。如果您点击自动生成，Firebase Studio 会为您预配 Firebase 项目和 Gemini API 密钥。

创建初始应用后，您可以：

  • 查看应用并与应用互动：代码生成完毕后，系统会显示应用的预览。您可以直接与预览互动来进行测试。如需了解详情，请参阅预览应用。

  • 使用自然语言进行测试和迭代：全面测试您的应用，并使用 App Prototyping agent 迭代代码和蓝图，直到您满意为止。

  • 直接在代码中调试和迭代：点击 代码切换图标 切换到代码以打开 Code 视图，您可以在其中查看应用的所有文件并直接修改代码。您可以切换回 Prototyper mode at any time.。

    在 Code 视图中，您还可以使用以下实用功能：

    • 使用 Firebase Studio 的内置调试和报告功能检查、调试和审核您的应用。

    • 使用 Gemini in Firebase 的 AI 辅助功能，内嵌在代码中，也可以使用互动式对话（默认情况下两种方式均可使用）。通过互动式对话，您可以诊断问题、提供解决方案并运行工具，以便更快地修复应用。如需访问对话，请点击工作区底部的 星光图标Gemini。

  • 使用 Firebase App Hosting 发布应用：点击发布，将应用发布到 App Hosting。

  • 监控和优化应用和 AI 功能：使用 App Hosting 中的可观测性监控 Web 应用的性能和使用情况，并使用 Genkit 中的 Firebase 遥测数据监控生成式 AI flow。如需了解详情，请参阅监控 Web 应用。

后续步骤