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
Install the Genkit CLI by running the following command:
npm i -g genkit
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.
Initialize Genkit in your Next.js project:
cd your-nextjs-project
genkit init
- Confirm yes when prompted whether to automatically configure Genkit for Next.js.
- 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.Make API credentials available to your deployed function. Do one of the following, depending on the model provider you chose:
Gemini (Google AI)
Make sure Google AI is available in your region.
Generate an API key for the Gemini API using Google AI Studio.
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)
In the Cloud console, Enable the Vertex AI API for your project.
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
When you deploy your app, you will need to do the following:
Set the
GCLOUD_PROJECT
andGCLOUD_LOCATION
variables in the deployed environment; exact steps depend on the platform.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.
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.
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: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; }
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> ); }
Run it in the Next.js development environment:
npm run dev
You can also run and explore your flows in the Genkit Developer UI:
genkit start