Utilizzare Genkit in un'app Angular

bookmark_border Mantieni tutto organizzato con le raccolte Salva e classifica i contenuti in base alle tue preferenze.

Questa pagina mostra come utilizzare i flussi Genkit nelle app Angular.

Prima di iniziare

Devi conoscere il concetto di flussi di Genkit e come scriverli.

Creare un progetto Angular

Questa guida utilizzerà un'app Angular con SSR con routing del server.

Puoi creare un nuovo progetto con il routing lato server con l'interfaccia a riga di comando Angular:

ng new --ssr --server-routing

Puoi anche aggiungere il routing lato server a un progetto esistente con il comando ng add:

ng add @angular/ssr --server-routing

Installa le dipendenze Genkit

Installa le dipendenze Genkit nella tua app Angular, come faresti per qualsiasi progetto Genkit:

1. Installa la libreria Genkit di base:

   npm i --save genkit

2. Installa almeno un plug-in del modello.

   Ad esempio, per utilizzare l'IA di Google:

   npm i --save @genkit-ai/googleai

   In alternativa, per utilizzare Vertex AI:

   npm i --save @genkit-ai/vertexai

3. Installa la libreria Genkit Express:

   npm i --save @genkit-ai/express

4. Installa Zod:

   npm i --save zod

5. Se non hai installato Genkit CLI a livello globale, puoi installarlo come dipendenza di sviluppo. È consigliato anche lo strumento tsx, in quanto semplifica il test del codice. Tuttavia, entrambe queste dipendenze sono facoltative.

   npm i --save-dev genkit-cli tsx

Definire i flussi Genkit

Crea un nuovo file nel progetto Angular per contenere i flussi Genkit: ad esempio src/genkit.ts. Questo file può contenere i tuoi flussi senza modifiche.

Ad esempio:

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

Aggiungere route del server

Aggiungi le seguenti importazioni a src/server.ts:

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

Aggiungi la seguente riga dopo l'inizializzazione della variabile app:

app.use(express.json());

Quindi, aggiungi un percorso per pubblicare il flusso:

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

Chiamare i flussi

Ora puoi eseguire i flussi dall'applicazione client.

Ad esempio, puoi sostituire i contenuti di src/app/app.component.ts con quanto segue:

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

Apporta gli aggiornamenti corrispondenti a 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>
}

Testa la tua app in locale

Se vuoi eseguire l'app localmente, devi rendere disponibili le credenziali per il servizio API del modello che hai scelto.

Quindi, esegui l'app localmente come di consueto:

ng serve

Tutti gli strumenti di sviluppo di Genkit continuano a funzionare normalmente. Ad esempio, per caricare i flussi nell'interfaccia utente per sviluppatori:

npx genkit start -- ng serve

esegui il deployment dell'app

Quando esegui il deployment dell'app, devi assicurarti che le credenziali di tutti i servizi esterni che utilizzi (ad esempio il servizio API del modello scelto) siano disponibili per l'app di cui è stato eseguito il deployment. Consulta le seguenti pagine per informazioni specifiche sulla piattaforma di deployment scelta:

• Cloud Functions for Firebase
• Cloud Run
• Altre piattaforme Node.js

Passaggi successivi

• Esplora Genkit in un'app Angular di cui è stato eseguito il deployment: esamina un'implementazione di riferimento di più flussi Genkit che alimentano un'app Angular, quindi passa al codice in Firebase Studio.