Korzystanie z Genkit w aplikacji Angular

bookmark_border Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.

Na tej stronie znajdziesz informacje o tym, jak używać przepływów Genkit w aplikacjach Angular.

Zanim zaczniesz

Musisz znać pojęcie przepływów w Genkit i wiedzieć, jak je pisać.

Tworzenie projektu Angular

W tym przewodniku użyjemy aplikacji Angular z SSR z routingiem serwera.

Nowy projekt z przekierowaniem po stronie serwera możesz utworzyć za pomocą interfejsu wiersza poleceń Angulara:

ng new --ssr --server-routing

Możesz też dodać przekierowywanie po stronie serwera do istniejącego projektu za pomocą tego polecenia: ng add

ng add @angular/ssr --server-routing

Instalowanie zależności Genkit

Zainstaluj zależności Genkit w aplikacji Angular w taki sam sposób jak w przypadku dowolnego projektu Genkit:

1. Zainstaluj główną bibliotekę Genkit:

   npm i --save genkit

2. Zainstaluj co najmniej 1 wtyczkę modelu.

   Na przykład, aby korzystać z AI od Google:

   npm i --save @genkit-ai/googleai

   Aby korzystać z Vertex AI:

   npm i --save @genkit-ai/vertexai

3. Zainstaluj bibliotekę Genkit Express:

   npm i --save @genkit-ai/express

4. Instalowanie Zod:

   npm i --save zod

5. Jeśli nie zainstalowano Genkit CLI globalnie, można go zainstalować jako zależność programistyczną. Zalecamy też narzędzie tsx, ponieważ ułatwia testowanie kodu. Obie te zależności są jednak opcjonalne.

   npm i --save-dev genkit-cli tsx

Definiowanie przepływów Genkit

Utwórz w projekcie Angular nowy plik, który będzie zawierać przepływy Genkit, np. src/genkit.ts. Ten plik może zawierać Twoje przepływy bez zmian.

Przykład:

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

Dodawanie tras serwera

Dodaj do pliku src/server.ts te instrukcje importu:

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

Po inicjalizowaniu zmiennej app dodaj ten wiersz:

app.use(express.json());

Następnie dodaj trasę, aby wyświetlać przepływ:

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

Wywoływanie przepływów

Teraz możesz uruchamiać przepływy z aplikacji klienta.

Możesz na przykład zastąpić zawartość pliku src/app/app.component.ts tymi wartościami:

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

Wprowadź odpowiednie zmiany w tych elementach: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>
}

Testowanie aplikacji lokalnie

Jeśli chcesz uruchomić aplikację lokalnie, musisz udostępnić poświadczenia dostępu do wybranej usługi interfejsu API modelu.

Następnie uruchom aplikację lokalnie w zwykły sposób:

ng serve

Wszystkie narzędzia programistyczne Genkit będą działać normalnie. Aby na przykład załadować przepływy w interfejsie dla deweloperów:

npx genkit start -- ng serve

Wdrażanie aplikacji

Podczas wdrażania aplikacji musisz się upewnić, że dane logowania do wszystkich używanych usług zewnętrznych (np. wybranej usługi interfejsu API modelu) są dostępne dla wdrożonej aplikacji. Informacje o wybranej platformie wdrażania znajdziesz na tych stronach:

• Cloud Functions dla Firebase
• Cloud Run
• Inne platformy Node.js

Dalsze kroki

• Poznaj Genkit w wdrożonej aplikacji Angular: zapoznaj się z implementacją referencyjną wielu przepływów Genkit obsługujących aplikację Angular, a potem przejdź do kodu w Firebase Studio.