在 Angular 應用程式中使用 Genkit

本頁面說明如何在 Angular 應用程式中使用 Genkit 流程。

事前準備

您應該熟悉 Genkit 的流程概念，並瞭解如何編寫流程。

建立 Angular 專案

本指南將使用 Angular 應用程式，並搭配SSR 和伺服器路由。

您可以使用 Angular CLI 建立含有伺服器端路由的新專案：

ng new --ssr --server-routing

您也可以使用 ng add 指令，將伺服器端路由新增至現有專案：

ng add @angular/ssr --server-routing

安裝 Genkit 依附元件

將 Genkit 依附元件安裝到 Angular 應用程式中，方法與任何 Genkit 專案相同：

  1. 安裝核心 Genkit 程式庫：

    npm i --save genkit

  2. 安裝至少一個模型外掛程式。

    舉例來說，如要使用 Google AI：

    npm i --save @genkit-ai/googleai

    或使用 Vertex AI：

    npm i --save @genkit-ai/vertexai

  3. 安裝 Genkit Express 程式庫：

    npm i --save @genkit-ai/express

  4. 安裝 Zod：

    npm i --save zod

  5. 如果您未全域安裝 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;
  }
);

新增伺服器路徑

將以下匯入項目新增至 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)

  1. 請確認 Google AI 在您所在的地區可用。

  2. 使用 Google AI Studio 產生 Gemini API 的 API 金鑰。

  3. 將 GEMINI_API_KEY 環境變數設為金鑰：

    export GEMINI_API_KEY=<your API key>

Gemini (Vertex AI)

  1. 在 Cloud 控制台中，為專案啟用 Vertex AI API。

  2. 設定一些環境變數，並使用 gcloud 工具設定應用程式的預設憑證：

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

接著，照常在本機上執行應用程式：

ng serve

Genkit 的所有開發工具仍可照常運作。舉例來說，如要在開發人員 UI 中載入流程：

npx genkit start -- ng serve

部署應用程式

部署應用程式時，請確認所用外部服務 (例如所選模型 API 服務) 的憑證可供已部署的應用程式使用。如需所選部署平台的相關資訊，請參閱下列頁面：

後續步驟