Firebase Genkit em apps Next.js

Você pode usar os fluxos do Firebase Genkit como ações do servidor nos seus apps Next.js. O restante desta página mostra como fazer isso.

Requisitos

Node.js 20 ou mais recente.

Procedimento

1. Instale a CLI do Genkit executando o seguinte comando:

   npm i -g genkit
   

2. Se você ainda não tem um app Next.js que queira usar, crie um:

   npx create-next-app@latest
   

   Selecione TypeScript como sua linguagem preferida.

3. Inicialize o Genkit no seu projeto Next.js:

   cd your-nextjs-project
   genkit init
   

   • Selecione Next.js como a plataforma de implantação.
   • Selecione o provedor de modelos que você quer usar.

   Aceite os padrões para as outras solicitações. A ferramenta genkit criará alguns arquivos de origem de amostra para você começar a desenvolver seus próprios fluxos de IA.

4. Disponibilize as credenciais de API para a função implantada. Siga um destes procedimentos, dependendo do provedor de modelos escolhido:

   Gemini (IA do Google)

   1. Verifique se a IA do Google está disponível na sua região.

   2. Gere uma chave de API para a API Genmini usando o Google AI Studio.

   3. Para executar o fluxo localmente, como na próxima etapa, defina a variável de ambiente GOOGLE_GENAI_API_KEY como sua chave:

      export GOOGLE_GENAI_API_KEY=<your API key>
      

      Ao implantar o aplicativo, você precisará disponibilizar essa chave no ambiente implantado. As etapas exatas dependem da plataforma.

   Gemini (Vertex AI)

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

   2. Para executar o fluxo localmente, como na próxima etapa, defina mais algumas variáveis de ambiente e use a ferramenta gcloud para configurar o Application Default Credentials:

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

   3. Ao implantar o aplicativo, faça o seguinte:

      1. Defina as variáveis GCLOUD_PROJECT e GCLOUD_LOCATION no ambiente implantado. As etapas exatas dependem da plataforma.

      2. Se você não estiver implantando em um ambiente do Firebase ou do Google Cloud, configure a autorização da API Vertex AI usando a federação de identidade da carga de trabalho (recomendado) ou uma chave de conta de serviço.

      3. Na página IAM do console do Google Cloud, conceda o papel Usuário da Vertex AI (roles/aiplatform.user) à identidade que você usa para chamar a API Vertex AI.

         • No Cloud Functions e no Cloud Run, essa é a conta de serviço de computação padrão.
         • No Firebase App Hosting, é a conta de serviço de back-end do seu app.
         • Em outras plataformas, é a identidade que você definiu na etapa anterior.

   A única chave secreta que você precisa configurar neste tutorial é para o provedor do modelo, mas, em geral, é necessário fazer algo semelhante para cada serviço usado pelo fluxo.

5. Se você permitiu que o comando genkit init gerasse um fluxo de amostra, ele criou um arquivo, genkit.ts, que tem um fluxo Genkit que pode ser usado como uma ação do servidor. Faça o teste:

   1. Primeiro, faça uma pequena mudança na função callMenuSuggestionFlow:

      export async function callMenuSuggestionFlow(theme: string) {
        const flowResponse = await runFlow(menuSuggestionFlow, theme);
        console.log(flowResponse);
        return flowResponse;
      }
      

   2. Você pode acessar essa função como uma ação do servidor. Como exemplo simples, substitua o conteúdo de page.tsx pelo seguinte:

      'use client';
      
      import { callMenuSuggestionFlow } from '@/app/genkit';
      import { useState } from 'react';
      
      export default function Home() {
        const [menuItem, setMenu] = useState<string>('');
      
        async function getMenuItem(formData: FormData) {
          const theme = formData.get('theme')?.toString() ?? '';
          const suggestion = await callMenuSuggestionFlow(theme);
          setMenu(suggestion);
        }
      
        return (
          <main>
            <form action={getMenuItem}>
              <label>
                Suggest a menu item for a restaurant with this theme:{' '}
              </label>
              <input type="text" name="theme" />
              <button type="submit">Generate</button>
            </form>
            <br />
            <pre>{menuItem}</pre>
          </main>
        );
      }
      

   3. Execute-o no ambiente de desenvolvimento Next.js:

      npm run dev
      

6. Você também pode executar e explorar seus fluxos na interface do desenvolvedor do Genkit:

   genkit start