应用原型设计代理使用入门

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

应用原型设计代理是一种简化的无代码开发流程，可使用生成式 AI 开发、测试、迭代和发布全栈代理 Web 应用。您可以使用自然语言描述应用想法，并附上可选图片，代理便会生成应用蓝图、代码和 Web 预览。为协助您开发和发布全栈应用，Firebase Studio 可以自动为您预配以下服务：

• 如果您的应用使用 AI：Firebase Studio 会使用强大的 Genkit 流程将 Gemini Developer API 添加到您的应用，以便与 Gemini 搭配使用。您可以使用自己的 Gemini API 密钥，也可以让 Firebase Studio 为您预配 Firebase 项目和 Gemini API 密钥。

• 如果您想将应用发布到网站上：Firebase Studio 会创建一个项目，并提供一种使用 Firebase App Hosting 快速发布应用的方法。

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

开始使用

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

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

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

   （可选）为问题添加图片。这可以是应用理想用户体验流程的图表，也可以是您希望Firebase Studio遵循的配色方案。图片的大小不得超过 3 MiB。

3. 点击使用 AI 制作原型。

   应用原型制作代理会返回应用蓝图，其中包含建议的应用名称、核心功能和样式指南。

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

   • 点击 editCustomize（自定义），然后直接修改蓝图。进行更改，然后点击保存。

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

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

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

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

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

• 测试和迭代：全面测试应用，并使用 App Prototyping agent 迭代代码和蓝图，直到您满意为止。您也可以点击 </> 进入代码视图，然后在 Firebase Studio 工作区中修改代码。

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

• 调试应用：点击 Switch to Code 以打开 Code 视图，您可以在其中使用 Firebase Studio 的内置调试和报告功能来检查、调试和审核应用。切换回 Prototyper mode at any time.

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

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

后续步骤

• 使用 Firebase Studio 开发、发布和监控全栈 Web 应用。
• 使用模板或解决方案通过任何框架开发应用。