在 Angular 应用中使用 Genkit

本页介绍了如何在 Angular 应用中使用 Genkit 流程。

准备工作

您应该熟悉 Genkit 的 flow 概念以及如何编写 flow。

创建 Angular 项目

本指南将使用采用服务器路由的 SSR 的 Angular 应用。

您可以使用 Angular CLI 创建具有服务器端路由的新项目：

ng new --ssr --server-routing

您还可以使用 ng add 命令向现有项目添加服务器端路由：

ng add @angular/ssr --server-routing

安装 Genkit 依赖项

将 Genkit 依赖项安装到 Angular 应用中，方法与任何 Genkit 项目相同：

安装核心 Genkit 库：
```
npm i --save genkit
```
安装至少一个模型插件。

例如，如需使用 Google AI，请执行以下操作：
```
npm i --save @genkit-ai/googleai
```
或者，如需使用 Vertex AI，请执行以下操作：
```
npm i --save @genkit-ai/vertexai
```
安装 Genkit Express 库：
```
npm i --save @genkit-ai/express
```
安装 Zod：
```
npm i --save zod
```
如果您未全局安装 Genkit CLI，可以将其作为开发依赖项进行安装。我们还建议使用 tsx 工具，因为它可以让您更轻松地测试代码。不过，这两个依赖项都是可选的。
```
npm i --save-dev genkit-cli tsx
```

定义 Genkit 流

在 Angular 项目中创建一个新文件来包含 Genkit 流程，例如 src/genkit.ts。此文件可以包含您的流程，无需进行修改。

例如：

import { gemini20Flash, googleAI } from "@genkit-ai/googleai";
import { genkit } from "genkit";
import { z } from "zod";

const ai = genkit({
  plugins: [googleAI()],
  model: gemini20Flash,
});

export const menuSuggestionFlow = ai.defineFlow(
  {
    name: "menuSuggestionFlow",
    inputSchema: z.string(),
    outputSchema: z.string(),
  },
  async (restaurantTheme) => {
    const { text } = await ai.generate(
      `Invent a menu item for a ${restaurantTheme} themed restaurant.`
    );
    return text;
  }
);

添加服务器路由

将以下 import 添加到 src/server.ts：

import { expressHandler } from '@genkit-ai/express';
import { menuSuggestionFlow } from './genkit';

在 app 变量初始化后面添加以下代码行：

app.use(express.json());

然后，添加用于提供流程的路由：

app.post('/menu', expressHandler(menuSuggestionFlow));

调用您的流

现在，您可以通过客户端应用运行流程。

例如，您可以将 src/app/app.component.ts 的内容替换为以下代码：

import { Component, resource, signal } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { runFlow } from 'genkit/beta/client';

@Component({
  selector: 'app-root',
  imports: [FormsModule],
  templateUrl: './app.component.html',
})
export class AppComponent {
  menuInput = '';
  theme = signal('');

  menuResource = resource({
    request: () => this.theme(),
    loader: ({request}) => runFlow({ url: 'menu', input: request })
  });
}

对 src/app/app.component.html 进行相应更新：

<h3>Generate a custom menu item</h3>
<input type="text" [(ngModel)]="menuInput" />
<button (click)="this.theme.set(menuInput)">Generate</button>
<br />
@if (menuResource.isLoading()) {
  Loading...
} @else {
  <pre>{{menuResource.value()}}</pre>
}

在本地测试应用

如果您想在本地运行应用，则需要提供您选择的模型 API 服务的凭据。

Gemini (Google AI)

确保您所在的区域提供 Google AI。
使用 Google AI Studio 为 Gemini API 生成 API 密钥。
将 GEMINI_API_KEY 环境变量设置为您的密钥：
```
export GEMINI_API_KEY=<your API key>
```

Gemini (Vertex AI)

在 Cloud 控制台中，为您的项目启用 Vertex AI API。

设置一些环境变量，然后使用 gcloud 工具设置应用默认凭据：

export GCLOUD_PROJECT=<your project ID>
export GCLOUD_LOCATION=us-central1
gcloud auth application-default login

然后，照常在本地运行应用：

ng serve

Genkit 的所有开发工具都将继续正常运行。例如，如需在开发者界面中加载您的流程，请执行以下操作：

npx genkit start -- ng serve

部署应用

在部署应用时，您需要确保您使用的所有外部服务（例如您选择的模型 API 服务）的凭据可供部署的应用使用。请参阅以下页面，了解特定于您所选部署平台的信息：