Usa Genkit en una app de Angular

bookmark_border Organiza tus páginas con colecciones Guarda y categoriza el contenido según tus preferencias.

En esta página, se muestra cómo puedes usar flujos de Genkit en apps de Angular.

Antes de comenzar

Debes estar familiarizado con el concepto de flujos de Genkit y cómo escribirlos.

Crea un proyecto de Angular

En esta guía, se usará una app de Angular con SSR con enrutamiento del servidor.

Puedes crear un proyecto nuevo con enrutamiento del servidor con Angular CLI:

ng new --ssr --server-routing

También puedes agregar enrutamiento del servidor a un proyecto existente con el comando ng add:

ng add @angular/ssr --server-routing

Instala las dependencias de Genkit

Instala las dependencias de Genkit en tu app de Angular, de la misma manera que lo harías para cualquier proyecto de Genkit:

1. Instala la biblioteca principal de Genkit:

   npm i --save genkit

2. Instala al menos un complemento de modelo.

   Por ejemplo, para usar la IA de Google, haz lo siguiente:

   npm i --save @genkit-ai/googleai

   O bien, para usar Vertex AI:

   npm i --save @genkit-ai/vertexai

3. Instala la biblioteca de Genkit Express:

   npm i --save @genkit-ai/express

4. Instala Zod:

   npm i --save zod

5. Si no instalaste la CLI de Genkit de forma global, puedes instalarla como una dependencia de desarrollo. También se recomienda la herramienta tsx, ya que facilita la prueba de tu código. Sin embargo, ambas dependencias son opcionales.

   npm i --save-dev genkit-cli tsx

Define flujos de Genkit

Crea un archivo nuevo en tu proyecto de Angular para contener tus flujos de Genkit, por ejemplo, src/genkit.ts. Este archivo puede contener tus flujos sin modificaciones.

Por ejemplo:

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

Agrega rutas de servidor

Agrega las siguientes importaciones a src/server.ts:

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

Agrega la siguiente línea después de la inicialización de la variable app:

app.use(express.json());

Luego, agrega una ruta para publicar tu flujo:

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

Cómo llamar a tus flujos

Ahora, puedes ejecutar tus flujos desde tu aplicación cliente.

Por ejemplo, puedes reemplazar el contenido de src/app/app.component.ts con lo siguiente:

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

Realiza las actualizaciones correspondientes 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>
}

Prueba tu app de forma local

Si quieres ejecutar tu app de forma local, debes hacer que las credenciales del servicio de la API de modelos que elegiste estén disponibles.

Luego, ejecuta tu app de manera local como de costumbre:

ng serve

Todas las herramientas de desarrollo de Genkit siguen funcionando con normalidad. Por ejemplo, para cargar tus flujos en la IU para desarrolladores, haz lo siguiente:

npx genkit start -- ng serve

Implementa tu app

Cuando implementes tu app, deberás asegurarte de que las credenciales de los servicios externos que uses (como el servicio de API de modelo que elegiste) estén disponibles para la app implementada. Consulta las siguientes páginas para obtener información específica de la plataforma de implementación que elegiste:

• Cloud Functions para Firebase
• Cloud Run
• Otras plataformas de Node.js

Próximos pasos

• Explora Genkit en una app de Angular implementada: Revisa una implementación de referencia de varios flujos de Genkit que potencian una app de Angular y, luego, pasa al código en Firebase Studio.