Utilizzare Genkit in un'app Next.js

Questa pagina mostra come utilizzare i flussi Genkit come azioni del server nelle tue app Next.js.

Prima di iniziare

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

Crea un progetto Next.js

Se non hai già un progetto Next.js a cui vuoi aggiungere funzionalità di AI generativa, puoi crearne uno per seguire questa pagina:

npx create-next-app@latest

Installa le dipendenze di Genkit

Installa le dipendenze di Genkit nell'app Next.js, 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. 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 Next.js per contenere i flussi Genkit: ad esempio src/app/genkit.ts. Questo file può contenere i flussi senza modifiche. Tuttavia, poiché puoi eseguire i flussi solo da un backend del server, devi aggiungere la direttiva 'use server' all'inizio del file.

Ad esempio:

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

Chiamare i flussi

Ora, nel codice frontend, puoi importare i flussi e chiamarli come azioni di servizio.

Ad esempio:

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

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.

Gemini (IA di Google)

  1. Assicurati che l'AI di Google sia disponibile nella tua regione.

  2. Genera una chiave API per l'API Gemini utilizzando Google AI Studio.

  3. Imposta la variabile di ambiente GOOGLE_GENAI_API_KEY sulla tua chiave:

    export GOOGLE_GENAI_API_KEY=<your API key>

Gemini (Vertex AI)

  1. Nella console Cloud, abilita l'API Vertex AI per il tuo progetto.

  2. Imposta alcune variabili di ambiente e utilizza lo strumento gcloud per configurare le credenziali predefinite dell'applicazione:

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

Quindi, esegui l'app localmente come di consueto:

npm run dev

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 -- npx tsx --watch src/app/genkit.ts

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: