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.

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:

• Cloud Functions para Firebase
• Cloud Run
• Outras plataformas Node.js