Usa Genkit en una app de Next.js

En esta página, se muestra cómo puedes usar flujos de Genkit como acciones del servidor en tus apps de Next.js.

Antes de comenzar

Debes conocer el concepto de flujos de Genkit y cómo escribirlos.

Crea un proyecto de Next.js

Si aún no tienes un proyecto de Next.js al que deseas agregar funciones de IA generativa, puedes crear uno para seguir esta página:

npx create-next-app@latest

Instala las dependencias de Genkit

Instala las dependencias de Genkit en tu app de Next.js, 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. 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 Next.js para contener tus flujos de Genkit, por ejemplo, src/app/genkit.ts. Este archivo puede contener tus flujos sin modificaciones. Sin embargo, como solo puedes ejecutar flujos desde un backend de servidor, debes agregar la directiva 'use server' a la parte superior del archivo.

Por ejemplo:

'use server';

import { gemini15Flash, googleAI } from "@genkit-ai/googleai";
import { genkit, z } from "genkit";

const ai = genkit({
  plugins: [googleAI()],
  model: gemini15Flash,
});

export const menuSuggestionFlow = ai.defineFlow(
  {
    name: "menuSuggestionFlow",
    inputSchema: z.string(),
    outputSchema: z.string(),
  },
  async (restaurantTheme) => {
    const { text } = await ai.generate({
      model: gemini15Flash,
      prompt: `Invent a menu item for a ${restaurantTheme} themed restaurant.`,
    });
    return text;
  }
);

Cómo llamar a tus flujos

Ahora, en tu código de frontend, puedes importar tus flujos y llamarlos como acciones del servidor.

Por ejemplo:

'use client';

import { menuSuggestionFlow } from './genkit';
import { useState } from 'react';

export default function Home() {
  const [menuItem, setMenuItem] = useState<string>('');

  async function getMenuItem(formData: FormData) {
    const theme = formData.get('theme')?.toString() ?? '';
    const suggestion = await menuSuggestionFlow(theme);
    setMenuItem(suggestion);
  }

  return (
    <main>
      <form action={getMenuItem}>
        <label htmlFor="theme">
          Suggest a menu item for a restaurant with this theme:{' '}
        </label>
        <input type="text" name="theme" id="theme" />
        <br />
        <br />
        <button type="submit">Generate</button>
      </form>
      <br />
      <pre>{menuItem}</pre>
    </main>
  );
}

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:

npm run dev

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

npx genkit start -- npx tsx --watch src/app/genkit.ts

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