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 esta página, se muestra cómo hacerlo.

Requisitos

Node.js 20 o una versión posterior.

Procedimiento

  1. Para instalar la CLI de Genkit, ejecuta el siguiente comando:

    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 el lenguaje que prefieras.

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

    cd your-nextjs-project
genkit init
    • Confirma que sí cuando se te pregunte si quieres configurar Genkit para Next.js automáticamente.
    • Selecciona el proveedor de modelos que deseas usar.

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

  4. Haz que las credenciales de la API estén disponibles para la función implementada. Realiza una de las siguientes acciones según el proveedor de modelos que hayas elegido:

    Gemini (IA de Google)

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

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

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

      export GOOGLE_GENAI_API_KEY=<your API key>

      Cuando implementes tu 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 tu flujo de manera local, como en el siguiente configura algunas variables de entorno adicionales y usa el Herramienta gcloud para configurar 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 implementas en un entorno de Firebase o Google Cloud configura la autorización para la API de Vertex AI Federación de identidades para cargas de trabajo (recomendado) o una clave de cuenta de servicio.

      3. En IAM de la consola de Google Cloud, otorga al usuario Vertex AI rol (roles/aiplatform.user) con la identidad que uses para llamar al la API de Vertex AI.

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

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

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

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

      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. A modo de ejemplo sencillo, 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