Angular アプリで Genkit を使用する

このページでは、Angular アプリで Genkit フローを使用する方法について説明します。

始める前に

Genkit のフローのコンセプトと、フローを作成する方法を理解している必要があります。

Angular プロジェクトを作成する

このガイドでは、サーバー ルーティングを使用した SSR の Angular アプリを使用します。

Angular CLI を使用して、サーバーサイド ルーティングを含む新しいプロジェクトを作成できます。

ng new --ssr --server-routing

ng add コマンドを使用して、既存のプロジェクトにサーバーサイド ルーティングを追加することもできます。

ng add @angular/ssr --server-routing

Genkit の依存関係をインストールする

他の Genkit プロジェクトと同様に、Genkit の依存関係を Angular アプリにインストールします。

  1. コア Genkit ライブラリをインストールします。

    npm i --save genkit

  2. モデル プラグインを 1 つ以上インストールします。

    たとえば、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 サービスなど）がデプロイされたアプリで使用可能であることを確認する必要があります。選択したデプロイ プラットフォームに固有の情報については、次のページをご覧ください。

次のステップ