Back

如何通过 Google AI Studio 构建 Angular 应用

OpenReplay Team OpenReplay Team

Jan 17, 2026 · 2 min read

如何通过 Google AI Studio 构建 Angular 应用

你想快速原型化一个 AI 驱动的 Angular 应用——无需与样板设置或过时的 SDK 模式作斗争。Google AI Studio 的 Build 模式允许你从自然语言提示生成一个可工作的 Angular 应用程序,将其导出到 GitHub 并部署。以下是该工作流程的实际运作方式。

核心要点

  • Google AI Studio Build 模式可从自然语言提示生成完整的 Angular 项目,自动处理脚手架、组件结构和初始连接。
  • 工作流程包括提示、配置、生成和导出的简短流程——让你在几分钟内从想法到可工作的代码。
  • AI Studio 仅用于原型开发。对于生产工作负载,请迁移到 Vertex AI 或实现适当的后端架构。
  • 永远不要在 Angular 前端中嵌入 API 密钥。使用后端代理向 Gemini API 发起经过身份验证的请求。

Google AI Studio Build 模式的功能

Google AI Studio Build 模式不仅仅是一个用于向 Gemini 提问的聊天界面。它是一个应用生成环境,可以从描述性提示中生成完整的 Angular 项目。

工作流程通常如下所示:

  1. 提示 – 用自然语言描述你的应用
  2. 配置 – 选择 Angular (TypeScript) 作为你的框架
  3. 生成 – 审查蓝图,然后让 Gemini 构建代码
  4. 导出 – 推送到 GitHub 或部署到 Cloud Run

这与在现有项目中手动集成 Angular + Gemini API 不同。Build 模式会自动处理项目脚手架、组件结构和初始连接。

前提条件:云项目和 API 密钥

在生成应用之前,你需要一个链接到 AI Studio 的 Google Cloud 项目。你的 API 密钥在 AI Studio 中创建和管理,并与该云项目关联。

导航到 Google AI Studio,使用你的 Google 账户登录,然后创建或选择一个云项目。该平台会提供一个与该项目绑定的 API 密钥。

重要提示:此 API 密钥仅用于开发和原型设计。AI Studio 提供开发者级别的访问权限,其速率限制低于生产环境。对于面向公众的应用程序,你需要不同的架构(下文将介绍)。

生成你的 Angular 应用

在 Google AI Studio 中打开 Build 选项卡。从可用的框架或模板选项中选择 Angular (TypeScript) 模板。

现在编写你的提示。对功能、数据结构和 UI 要求要具体:

创建一个任务管理仪表板,使用 Angular。包含一个显示任务名称、
负责人、截止日期和状态的表格。添加状态和负责人的筛选器。
使用带有侧边栏导航的简洁、极简设计。

提交后,Build 模式会返回一个蓝图——一个涵盖应用结构、功能和样式的高级计划。在确认之前审查此内容。你可以通过对话方式调整计划。

确认后,Gemini 会生成完整的 Angular 项目。输出使用现代 Angular 模式:独立组件、全程 TypeScript 以及当前的项目结构约定。

理解生成的代码

生成的应用通常包括:

  • 独立组件(而非 NgModules)
  • 用于数据模型的 TypeScript 接口
  • 基本路由配置
  • 用于数据处理的服务类

如果你的提示请求 AI 功能(如文本生成或图像分析),生成的代码可能包含使用 Google GenAI SDK (@google/genai) 与 Gemini API 的集成。这是当前生产就绪的 JavaScript/TypeScript SDK——旧版包已被弃用。

你可以在官方 Gemini API 文档中找到 SDK 和 API 使用详情。避免硬编码特定的模型标识符,因为这些标识符会随着弃用周期而变化。

AI Studio 与 Vertex AI:了解区别

一个常见的误解:AI Studio 不是你的生产运行时环境。

方面AI StudioVertex AI
用途原型设计、开发者 API 访问生产、企业工作负载
配额较低的 RPM 限制可用的预留吞吐量
定价开发者级别/有限配额按使用量付费
用例构建和测试服务公共用户

使用 AI Studio 进行原型设计和验证你的应用。当你准备好处理生产流量时,迁移到 Vertex AI 或实现适当的后端架构。

安全性:永远不要在 Angular 中暴露 API 密钥

这是关键规则:API 密钥绝不能嵌入到你的 Angular 前端中。

调用 Gemini API 的生成应用需要后端代理。正确的架构:

Angular 前端 → 你的后端服务器 → Gemini API

你的后端持有 API 密钥并向 Gemini 发起经过身份验证的请求。Angular 应用调用你的后端端点。这可以防止密钥在浏览器开发工具或网络检查中暴露。

对于本地原型设计,你可能会暂时使用环境变量。对于超出个人测试的任何场景,请实现后端层。

导出和部署

一旦对生成的应用感到满意,你有两条路径:

导出到 GitHub:点击导出选项将完整项目推送到新的或现有的仓库。从那里,与你的 CI/CD 流水线集成。

部署到 Cloud Run:AI Studio 提供集成部署到 Cloud Run 以实现快速托管。这会部署一个容器来提供构建的 Angular 应用程序。它适用于演示和内部工具,尽管生产应用通常需要额外的配置。

结论

Google AI Studio Build 模式显著加速了 Angular 原型设计。你可以在几分钟而不是几小时内从想法到可工作的代码。

关键是理解 Build 模式提供了什么(快速脚手架和迭代)以及它不提供什么(生产就绪的安全性和扩展性)。使用它快速验证想法,然后在向用户发布之前应用适当的架构模式。

从一个具体的提示开始,生成你的应用,然后从那里迭代。

常见问题

不可以,AI Studio 仅设计用于原型设计和开发。它具有较低的速率限制,不适合服务公共用户。对于生产工作负载,请将你的应用迁移到 Vertex AI 或实现能够处理生产流量和安全要求的适当后端架构。

在前端代码中嵌入 API 密钥会将其暴露给任何检查浏览器开发工具或网络流量的人。恶意用户可能会窃取你的密钥并以你的费用发起未经授权的请求。始终使用安全持有 API 密钥的后端代理,并代表你的 Angular 应用向 Gemini API 发起经过身份验证的请求。

Google AI Studio 生成使用独立组件而非 NgModules 的现代 Angular 代码。输出包括用于数据模型的 TypeScript 接口、基本路由配置以及用于数据处理的服务类。这遵循当前的 Angular 最佳实践和项目结构约定。

你有两个主要选项。首先,你可以将项目导出到 GitHub 并将其与现有的 CI/CD 流水线集成。其次,AI Studio 提供直接部署到 Google Cloud Run 以实现快速托管。Cloud Run 适用于演示和内部工具,但生产应用通常需要额外的配置。

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.

OpenReplay

More articles from OpenReplay Blog