Genkit in einer Angular-App verwenden

Mit Sammlungen den Überblick behalten Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.

Auf dieser Seite erfahren Sie, wie Sie Genkit-Abläufe in Angular-Apps verwenden.

Hinweis

Sie sollten mit dem Genkit-Konzept von Abläufen und deren Erstellung vertraut sein.

Angular-Projekt erstellen

In diesem Leitfaden wird eine Angular-App mit SSR mit Server-Routing verwendet.

Mit der Angular CLI können Sie ein neues Projekt mit serverseitigem Routing erstellen:

ng new --ssr --server-routing

Sie können einem vorhandenen Projekt auch mit dem Befehl ng add serverseitiges Routing hinzufügen:

ng add @angular/ssr --server-routing

Genkit-Abhängigkeiten installieren

Installieren Sie die Genkit-Abhängigkeiten in Ihrer Angular-App wie bei jedem Genkit-Projekt:

1. Installieren Sie die Genkit-Kernbibliothek:

   npm i --save genkit

2. Installieren Sie mindestens ein Modell-Plug-in.

   So verwenden Sie beispielsweise die KI von Google:

   npm i --save @genkit-ai/googleai

   So verwenden Sie Vertex AI:

   npm i --save @genkit-ai/vertexai

3. Installieren Sie die Genkit Express-Bibliothek:

   npm i --save @genkit-ai/express

4. Zod installieren:

   npm i --save zod

5. Wenn Sie die Genkit-Befehlszeile nicht global installiert haben, können Sie sie als Entwicklungsabhängigkeit installieren. Das tsx-Tool wird ebenfalls empfohlen, da es das Testen Ihres Codes erleichtert. Beide Abhängigkeiten sind jedoch optional.

   npm i --save-dev genkit-cli tsx

Genkit-Abläufe definieren

Erstellen Sie in Ihrem Angular-Projekt eine neue Datei für Ihre Genkit-Abläufe, z. B. src/genkit.ts. Diese Datei kann Ihre Workflows unverändert enthalten.

Beispiel:

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;
  }
);

Serverrouten hinzufügen

Fügen Sie src/server.ts die folgenden Importe hinzu:

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

Fügen Sie nach der Variableninitialisierung app die folgende Zeile hinzu:

app.use(express.json());

Fügen Sie dann eine Route hinzu, über die der Ablauf ausgeliefert werden soll:

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

Aufrufen von Flows

Jetzt können Sie Ihre Workflows über Ihre Clientanwendung ausführen.

Sie können den Inhalt von src/app/app.component.ts beispielsweise durch Folgendes ersetzen:

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 })
  });
}

Nehmen Sie entsprechende Änderungen an src/app/app.component.html vor:

<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>
}

App lokal testen

Wenn Sie Ihre App lokal ausführen möchten, müssen Sie Anmeldedaten für den von Ihnen ausgewählten Modell-API-Dienst verfügbar machen.

Führen Sie die App dann wie gewohnt lokal aus:

ng serve

Alle Entwicklungstools von Genkit funktionieren weiterhin wie gewohnt. So laden Sie beispielsweise Ihre Workflows in die Entwickler-UI:

npx genkit start -- ng serve

Anwendung bereitstellen

Wenn Sie Ihre App bereitstellen, müssen Sie dafür sorgen, dass die Anmeldedaten für alle verwendeten externen Dienste (z. B. der von Ihnen ausgewählte Modell-API-Dienst) für die bereitgestellte App verfügbar sind. Auf den folgenden Seiten finden Sie Informationen speziell für die von Ihnen ausgewählte Bereitstellungsplattform:

• Cloud Functions for Firebase
• Cloud Run
• Andere Node.js-Plattformen

Nächste Schritte

• Genkit in einer bereitgestellten Angular-App kennenlernen: Sehen Sie sich eine Referenzimplementierung mehrerer Genkit-Flows an, die eine Angular-App unterstützen, und gehen Sie dann den Code in Firebase Studio durch.