使用 AI 构建

使用 AI 构建

构建 AI 驱动的应用。利用 AI 加快开发速度。

提示：想要在您最喜爱的 AI 辅助 IDE 中开始构建吗？
请查看我们的提示词规则与最佳实践。

基于大语言模型 (LLM) 的生成式 AI (GenAI) 能够创建复杂且引人入胜的应用体验，包括个性化内容、智能推荐、媒体生成与理解、信息摘要以及动态功能。

在以前，开发此类功能需要深厚的领域专业知识和大量的工程投入。然而，全新的产品和 SDK 正在降低准入门槛。得益于以下特性，Angular 非常适合将 AI 集成到您的 Web 应用中：

  • Angular 强大的模板 API 支持利用生成的内容创建动态、结构清晰的 UI
  • 强大的、基于 Signal 的架构，旨在动态管理数据和状态
  • Angular 与 AI SDK 和 API 无缝集成

本指南将向您演示如何立即使用 Genkit、Firebase AI Logic 和 Gemini API 为您的 Angular 应用注入 AI 能量。本指南将通过解释如何开始将 AI 集成到 Angular 应用中，助您开启 AI 驱动的 Web 应用开发之旅。本指南还分享了一些资源，例如入门套件、示例代码和常用工作流的方案，以便您快速上手。

在开始之前，您应该对 Angular 有基本的了解。刚接触 Angular？请尝试我们的基础指南或入门教程。

注意：虽然此页面展示了与 Google AI 产品的集成和示例，但像 Genkit 这样的工具是模型无关的，允许您选择自己的模型。在许多情况下，这些示例和代码样本也适用于其他第三方解决方案。

快速上手

构建 AI 驱动的应用是一个全新且快速发展的领域。决定从哪里开始以及选择哪些技术可能会具有挑战性。以下部分提供了三个可供选择的选项：

  1. Genkit 让您可以通过统一的 API 自由选择支持的模型和接口来构建全栈应用。非常适合需要复杂后端 AI 逻辑的应用（例如个性化推荐）。

  2. Firebase AI Logic 为 Google 的模型提供了安全的客户端 API，用于构建纯客户端应用或移动应用。最适合直接在浏览器中运行的交互式 AI 功能，例如实时文本分析或基础聊天机器人。

  3. Gemini API 使您能够构建直接使用 API 暴露的方法和功能的应用，最适合全栈应用。适用于需要直接控制 AI 模型的应用，例如自定义图像生成或深度数据处理。

使用 Genkit 和 Angular 构建 AI 驱动的应用

Genkit 是一个开源工具包，旨在帮助您在 Web 和移动应用中构建 AI 驱动的功能。它提供了一个统一的接口来集成来自 Google、OpenAI、Anthropic、Ollama 等的 AI 模型，方便您探索并选择最适合您需求的模型。作为一种服务端解决方案，您的 Web 应用需要一个支持的服务端环境（例如基于 Node 的服务器）才能与 Genkit 集成。例如，使用 Angular SSR 构建全栈应用可以为您提供初始的服务端代码。

以下是使用 Genkit 和 Angular 构建应用的示例：

使用 Firebase AI Logic 和 Angular 构建 AI 驱动的应用

Firebase AI Logic 提供了一种安全的方式，可以直接从您的 Web 和移动应用中与 Vertex AI Gemini API 或 Imagen API 进行交互。这对于 Angular 开发者来说非常有吸引力，因为应用既可以是全栈的，也可以是纯客户端的。如果您正在开发纯客户端应用，Firebase AI Logic 是将 AI 融入 Web 应用的绝佳选择。

以下是使用 Firebase AI Logic 和 Angular 构建应用的示例：

使用 Gemini API 和 Angular 构建 AI 驱动的应用

The Gemini API 提供了访问 Google 最先进模型的通道，这些模型支持音频、图像、视频和文本输入。这些模型针对特定用例进行了优化，欲了解更多信息，请访问 Gemini API 文档网站。

  • AI 文本编辑器 Angular 应用模板 - 使用此模板，您可以直接开始使用一个功能完备的文本编辑器，其中包含润色文本、展开文本和使文本正式化等 AI 驱动的功能。这是积累通过 HTTP 调用 Gemini API 经验的良好起点。

  • AI 聊天机器人应用模板 - 此模板包含一个通过 HTTP 与 Gemini API 通信的聊天机器人用户界面。

最佳实践

连接到模型提供商并确保您的 API 凭据安全

在连接到 model 提供商时，保护您的 API 密钥安全至关重要。切勿将 API 密钥放在会交付给客户端的文件中，例如 environments.ts。

您应用的架构决定了应选择哪些 AI API 和工具。具体来说，请根据您的应用是客户端应用还是服务端应用来进行选择。像 Firebase AI Logic 这样的工具为客户端代码提供了到模型 API 的安全连接。如果您想使用与 Firebase AI Logic 不同的 API，或者偏好使用其他模型提供商，请考虑创建一个代理服务器，甚至是使用 Cloud Functions for Firebase 来充当代理，从而避免暴露您的 API 密钥。

关于如何使用客户端应用进行连接的示例，请参见代码：Firebase AI Logic Angular 示例代码库。

对于需要 API 密钥的服务端模型 API 连接，应优先使用密钥管理器或环境变量，而不是 environments.ts。您应该遵循保护 API 密钥和凭据的标准最佳实践。Firebase 现在通过 Firebase App Hosting 的最新更新提供了一个全新的密钥管理器。欲了解更多信息，请查看官方文档。

关于全栈应用中的服务端连接示例，请参见代码：Angular AI 示例（Genkit 和 Angular 故事生成器）代码库。

使用工具调用增强应用

如果您想构建智能体工作流（即智能体能够根据提示词采取行动并使用工具来解决问题），请使用“工具调用”（tool calling）。工具调用（也称为函数调用）是一种赋予 LLM 向调用它的应用发起回调请求的能力的方式。作为开发者，您可以定义哪些工具可用，并控制工具被调用的方式和时机。

通过将 AI 集成从问答式聊天机器人拓展到更深层次，工具调用能够进一步增强您的 Web 应用。事实上，您可以授权您的模型使用模型提供商的函数调用 API 来请求函数调用。这些可用工具可用于在应用的上下文中执行更复杂的动作。

在 Angular 示例代码库的电子商务示例中，LLM 会请求调用与库存相关的函数，以获取执行更复杂任务所需的上下文（例如计算商店中一组商品的总花费）。可用 API 的范围由您作为开发者来决定，就像是否调用 LLM 请求的函数也由您决定一样。您始终控制着执行流程。例如，您可以只公开某个服务的特定函数，而不是该服务的所有函数。

处理非确定性响应

由于模型可能会返回非确定性的结果，因此您在设计应用时应该考虑到这一点。以下是您在应用实现中可以采用的一些策略：

  • 调整提示词和模型参数（例如温度 (temperature)），以获得或多或少确定性的响应。您可以在 ai.google.dev 的提示策略部分了解更多信息。
  • 使用“人机回环”（human in the loop）策略，即在工作流继续进行之前由人工验证输出。构建您的应用工作流，允许操作员（人类或其他模型）验证输出并确认关键决策。
  • 采用工具（或函数）调用和 Schema 约束来引导和限制模型的响应为预定义格式，从而提高响应的可预测性。

即使考虑了这些策略和技术，在应用设计中也应融入合理的后备方案（fallback）。遵循现有的应用弹性标准。例如，如果某个资源或 API 不可用而导致应用崩溃，这是不可接受的。在这种情况下，应该向用户显示一条错误消息，并在适用时显示后续步骤的选项。构建 AI 驱动的应用也需要同样的考量。确认响应与预期输出一致，并在不一致的情况下通过优雅降级 (graceful degradation)提供“安全着陆”方案。这也适用于 LLM 提供商的 API 服务中断情况。

考虑这个例子：LLM 提供商没有响应。应对服务中断的潜在策略是：

  • 保存来自用户的响应，以便在重试场景（立即或稍后）中使用
  • 通过不泄露敏感信息的适当消息，向用户发出服务中断的警报
  • 一旦服务再次可用，稍后恢复对话。

后续步骤

要了解 LLM 提示词和 AI IDE 设置，请参阅以下指南：