Usar o Genkit em um app Next.js

Esta página mostra como usar os fluxos do Genkit como ações do servidor nos seus apps Next.js.

Antes de começar

Você precisa conhecer o conceito de fluxos do Genkit e saber como programá-los.

Criar um projeto Next.js

Se você ainda não tiver um projeto do Next.js para adicionar recursos de IA generativa, crie um para seguir esta página:

npx create-next-app@latest

Instalar dependências do Genkit

Instale as dependências do Genkit no seu app Next.js, da mesma forma que você faria para qualquer projeto do Genkit:

  1. Instale a biblioteca principal do Genkit:

    npm i --save genkit

  2. Instale pelo menos um plug-in de modelo.

    Por exemplo, para usar a IA do Google:

    npm i --save @genkit-ai/googleai

    Ou, para usar a Vertex AI:

    npm i --save @genkit-ai/vertexai

  3. Se você não tiver instalado a CLI do Genkit globalmente, poderá fazer a instalação como uma dependência de desenvolvimento. A ferramenta tsx também é recomendada, porque facilita o teste do código. No entanto, essas duas dependências são opcionais.

    npm i --save-dev genkit-cli tsx

Definir fluxos do Genkit

Crie um novo arquivo no seu projeto Next.js para conter os fluxos do Genkit, por exemplo, src/app/genkit.ts. Esse arquivo pode conter seus fluxos sem modificações. No entanto, como só é possível executar fluxos em um back-end de servidor, é necessário adicionar a diretiva 'use server' ao início do arquivo.

Exemplo:

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

Chamar seus fluxos

Agora, no código do front-end, você pode importar seus fluxos e chamá-los como ações do servidor.

Exemplo:

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

Testar o app localmente

Se você quiser executar o app localmente, disponibilize as credenciais do serviço de API do modelo escolhido.

Gemini (IA do Google)

  1. Garanta que a IA do Google disponíveis na sua região.

  2. Gere uma chave de API para à API Gemini usando o Google AI Studio.

  3. Defina a variável de ambiente GOOGLE_GENAI_API_KEY como sua chave:

    export GOOGLE_GENAI_API_KEY=<your API key>

Gemini (Vertex AI)

  1. No console do Cloud, Ative a API Vertex AI para seu projeto.

  2. Defina algumas variáveis de ambiente e use a ferramenta gcloud para configurar as credenciais padrão do aplicativo:

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

Em seguida, execute o app localmente normalmente:

npm run dev

Todas as ferramentas de desenvolvimento do Genkit continuam funcionando normalmente. Por exemplo, para carregar seus fluxos na interface do desenvolvedor:

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

implantar o app

Ao implantar o app, você precisa garantir que as credenciais de todos os serviços externos que você usa (como o serviço de API de modelo escolhido) estejam disponíveis para o app implantado. Consulte as páginas a seguir para informações específicas da plataforma de implantação escolhida: