Firebase Genkit in Next.js apps

You can use Firebase Genkit flows as server actions in your Next.js apps. The rest of this page shows you how.

Requirements

Node.js 20 or later.

Procedure

1. Install the Genkit CLI by running the following command:

   npm i -g genkit
   

2. If you don't already have a Next.js app you want to use, create one:

   npx create-next-app@latest
   

   Select TypeScript as your language of choice.

3. Initialize Genkit in your Next.js project:

   cd your-nextjs-project
   genkit init
   

   • Select Next.js as the deployment platform.
   • Select the model provider you want to use.

   Accept the defaults for the remaining prompts. The genkit tool will create some sample source files to get you started developing your own AI flows.

4. Make API credentials available to your deployed function. Do one of the following, depending on the model provider you chose:

   Gemini (Google AI)

   1. Make sure Google AI is available in your region.

   2. Generate an API key for the Gemini API using Google AI Studio.

   3. To run your flow locally, as in the next step, set the GOOGLE_GENAI_API_KEY environment variable to your key:

      export GOOGLE_GENAI_API_KEY=<your API key>
      

      When you deploy your app, you will need to make this key available in the deployed environment; exact steps depend on the platform.

   Gemini (Vertex AI)

   1. In the Cloud console, Enable the Vertex AI API for your project.

   2. To run your flow locally, as in the next step, set some additional environment variables and use the gcloud tool to set up application default credentials:

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

   3. When you deploy your app, you will need to do the following:

      1. Set the GCLOUD_PROJECT and GCLOUD_LOCATION variables in the deployed environment; exact steps depend on the platform.

      2. If you're not deploying to a Firebase or Google Cloud environment, set up authorization for the Vertex AI API, using either Workload Identity Federation (recommended) or a service account key.

      3. On the IAM page of the Google Cloud console, grant the Vertex AI User role (roles/aiplatform.user) to the identity you use to call the Vertex AI API.

         • On Cloud Functions and Cloud Run, this is the Default compute service account.
         • On Firebase App Hosting, it's your app's backend service account.
         • On other platforms, it's the identity you set up in the previous step.

   The only secret you need to set up for this tutorial is for the model provider, but in general, you must do something similar for each service your flow uses.

5. If you allowed the genkit init command to generate a sample flow, it created a file, genkit.ts, that has a Genkit flow you can use as a server action. Try it out:

   1. First, make a small change to tbe callMenuSuggestionFlow function:

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

   2. You can access this function as a server action. As a simple example, replace the contents of page.tsx with the following:

      '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. Run it in the Next.js development environment:

      npm run dev
      

6. You can also run and explore your flows in the Genkit Developer UI:

   genkit start