Firebase Genkit en las apps de Next.js

Puedes usar los flujos de Firebase Genkit como acciones del servidor en tus apps de Next.js. En el resto de esta página, se muestra cómo hacerlo.

Requisitos

Node.js 20 o una versión posterior.

Procedimiento

1. Ejecuta el siguiente comando para instalar la CLI de Genkit:

   npm i -g genkit
   

2. Si aún no tienes una app de Next.js que quieras usar, crea una:

   npx create-next-app@latest
   

   Selecciona TypeScript como lenguaje preferido.

3. Inicializa Genkit en tu proyecto de Next.js:

   cd your-nextjs-project
   genkit init
   

   • Selecciona Next.js como la plataforma de implementación.
   • Selecciona el proveedor de modelos que deseas usar.

   Acepta los valores predeterminados para los mensajes restantes. La herramienta genkit creará algunos archivos fuente de muestra para que puedas comenzar a desarrollar tus propios flujos de IA.

4. Haz que las credenciales de API estén disponibles para la función implementada. Según el proveedor de modelos que elijas, realiza una de las siguientes acciones:

   Gemini (IA de Google)

   1. Asegúrate de que la IA de Google esté disponible en tu región.

   2. Genera una clave de API para la API de Gemini con Google AI Studio.

   3. Para ejecutar el flujo de manera local, como en el siguiente paso, configura la variable de entorno GOOGLE_GENAI_API_KEY como tu clave:

      export GOOGLE_GENAI_API_KEY=<your API key>
      

      Cuando implementes la app, deberás hacer que esta clave esté disponible en el entorno implementado. Los pasos exactos dependen de la plataforma.

   Gemini (Vertex AI)

   1. En la consola de Cloud, habilita la API de Vertex AI para tu proyecto.

   2. Para ejecutar el flujo de manera local, como en el siguiente paso, configura algunas variables de entorno adicionales y usa la herramienta gcloud para configurar las credenciales predeterminadas de la aplicación:

      export GCLOUD_PROJECT=<your project ID>
      export GCLOUD_LOCATION=us-central1
      gcloud auth application-default login
      

   3. Cuando implementes tu app, deberás hacer lo siguiente:

      1. Configura las variables GCLOUD_PROJECT y GCLOUD_LOCATION en el entorno implementado. Los pasos exactos dependen de la plataforma.

      2. Si no realizas la implementación en un entorno de Firebase o Google Cloud, configura la autorización para la API de Vertex AI mediante la federación de identidades para cargas de trabajo (recomendado) o una clave de cuenta de servicio.

      3. En la página IAM de la consola de Google Cloud, otorga el rol Usuario de Vertex AI (roles/aiplatform.user) a la identidad que usas para llamar a la API de Vertex AI.

         • En Cloud Functions y Cloud Run, esta es la cuenta de servicio de procesamiento predeterminada.
         • En Firebase App Hosting, es la cuenta de servicio de backend de tu app.
         • En otras plataformas, se trata de la identidad que configuraste en el paso anterior.

   El único secreto que debes configurar en este instructivo es para el proveedor del modelo, pero, en general, debes hacer algo similar con cada servicio que use tu flujo.

5. Si permitiste que el comando genkit init generara un flujo de muestra, creó un archivo, genkit.ts, que tiene un flujo de Genkit que puedes usar como una acción del servidor. Haz una prueba:

   1. Primero, realiza un pequeño cambio en la función callMenuSuggestionFlow:

      export async function callMenuSuggestionFlow(theme: string) {
        const flowResponse = await runFlow(menuSuggestionFlow, theme);
        console.log(flowResponse);
        return flowResponse;
      }
      

   2. Puedes acceder a esta función como una acción del servidor. Como ejemplo simple, reemplaza el contenido de page.tsx con lo siguiente:

      'use client';
      
      import { callMenuSuggestionFlow } from '@/app/genkit';
      import { useState } from 'react';
      
      export default function Home() {
        const [menuItem, setMenu] = useState<string>('');
      
        async function getMenuItem(formData: FormData) {
          const theme = formData.get('theme')?.toString() ?? '';
          const suggestion = await callMenuSuggestionFlow(theme);
          setMenu(suggestion);
        }
      
        return (
          <main>
            <form action={getMenuItem}>
              <label>
                Suggest a menu item for a restaurant with this theme:{' '}
              </label>
              <input type="text" name="theme" />
              <button type="submit">Generate</button>
            </form>
            <br />
            <pre>{menuItem}</pre>
          </main>
        );
      }
      

   3. Ejecútala en el entorno de desarrollo de Next.js:

      npm run dev
      

6. También puedes ejecutar y explorar tus flujos en la IU para desarrolladores de Genkit:

   genkit start