Utiliser Genkit dans une application Next.js

Cette page explique comment utiliser des flux Genkit en tant qu'actions de serveur dans vos applications Next.js.

Avant de commencer

Vous devez connaître le concept de flux de Genkit et savoir comment les écrire.

Créer un projet Next.js

Si vous ne disposez pas encore d'un projet Next.js auquel vous souhaitez ajouter des fonctionnalités d'IA générative, vous pouvez en créer un pour suivre cette page:

npx create-next-app@latest

Installer les dépendances Genkit

Installez les dépendances Genkit dans votre application Next.js, comme vous le feriez pour n'importe quel projet Genkit:

  1. Installez la bibliothèque Genkit principale:

    npm i --save genkit

  2. Installez au moins un plug-in de modèle.

    Par exemple, pour utiliser l'IA de Google:

    npm i --save @genkit-ai/googleai

    Pour utiliser Vertex AI:

    npm i --save @genkit-ai/vertexai

  3. Si vous n'avez pas installé la CLI Genkit globalement, vous pouvez l'installer en tant que dépendance de développement. L'outil tsx est également recommandé, car il facilite le test de votre code. Toutefois, ces deux dépendances sont facultatives.

    npm i --save-dev genkit-cli tsx

Définir des flux Genkit

Créez un fichier dans votre projet Next.js pour contenir vos flux Genkit: par exemple, src/app/genkit.ts. Ce fichier peut contenir vos flux sans modification. Toutefois, comme vous ne pouvez exécuter des flux qu'à partir d'un backend serveur, vous devez ajouter la directive 'use server' en haut du fichier.

Exemple :

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

Appeler vos flux

Dans votre code frontend, vous pouvez maintenant importer vos flux et les appeler en tant qu'actions de serveur.

Exemple :

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

Tester votre application en local

Si vous souhaitez exécuter votre application localement, vous devez rendre disponibles les identifiants du service d'API de modèle que vous avez choisi.

Gemini (IA de Google)

  1. Assurez-vous que l'IA de Google est disponible dans votre région.

  2. Générez une clé API pour l'API Gemini à l'aide de Google AI Studio.

  3. Définissez la variable d'environnement GOOGLE_GENAI_API_KEY sur votre clé:

    export GOOGLE_GENAI_API_KEY=<your API key>

Gemini (Vertex AI)

  1. Dans la console Cloud, activez l'API Vertex AI pour votre projet.

  2. Définissez des variables d'environnement et utilisez l'outil gcloud pour configurer les identifiants par défaut de l'application:

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

Exécutez ensuite votre application en local comme d'habitude:

npm run dev

Tous les outils de développement de Genkit continuent de fonctionner normalement. Par exemple, pour charger vos flux dans l'UI du développeur:

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

Déployer l'application

Lorsque vous déployez votre application, vous devez vous assurer que les identifiants de tous les services externes que vous utilisez (tel que le service d'API de modèle que vous avez choisi) sont disponibles pour l'application déployée. Consultez les pages suivantes pour obtenir des informations spécifiques à la plate-forme de déploiement que vous avez choisie: