Creating an AI App with Genkit and Gemini: A Beginner’s Guide

Artificial Intelligence (AI) tools are now easier than ever to build and Genkit by Google makes it surprisingly simple to create, test, and run your own AI-powered applications.

In this guide, I’ll walk you through how I created a Recipe Generator App using Genkit and Gemini, set up the environment, and explored its interactive Developer UI.

But wait, what is Genkit Really?

Genkit is an open-source framework by Google that helps developers build AI agents and workflows quickly and intuitively.

It integrates seamlessly with Gemini, Vertex AI, and other AI providers, allowing you to focus on your app’s logic instead of boilerplate code or API setup.

⚙️ Step 1: Setting Up the Environment

Make sure you have the following installed:

Node.js (v18 or later)

npm or yarn

A Gemini API key (you can get one from Google AI Studio
Then create a new folder for your project and install Genkit:

npm install genkit @genkit-ai/google-genai

That’s it! You now have everything you need to start building.

🔑 Step 2: Set Your Gemini API Key

Genkit needs your Gemini API key to connect with the model.

You can set it temporarily in your current terminal session:

export GEMINI_API_KEY=<your-api-key>

Or, make it permanent by adding it to your shell profile:

echo 'export GEMINI_API_KEY=<your-api-key>' >> ~/.bashrc
source ~/.bashrc

but I stored mine in a .env file and loaded it with dotenv for better security. That's also another option for you.

🍳Step 3: Create Your First Genkit App (Recipe Generator)
Let’s create something fun, a recipe generator that crafts meal ideas based on ingredients.

Start by creating your project structure:

mkdir src
touch src/index.ts

Then add the following code:

import 'dotenv/config';
import { googleAI } from '@genkit-ai/google-genai';
import { genkit, z } from 'genkit';

// Initialize Genkit with the Google AI plugin
const ai = genkit({
  plugins: [googleAI()],
  model: googleAI.model('gemini-2.5-flash', {
    temperature: 0.8,
  }),
});

// Define input schema
const RecipeInputSchema = z.object({
  ingredient: z.string().describe('Main ingredient or cuisine type'),
  dietaryRestrictions: z.string().optional().describe('Any dietary restrictions'),
});

// Define output schema
const RecipeSchema = z.object({
  title: z.string(),
  description: z.string(),
  prepTime: z.string(),
  cookTime: z.string(),
  servings: z.number(),
  ingredients: z.array(z.string()),
  instructions: z.array(z.string()),
  tips: z.array(z.string()).optional(),
});

// Define a recipe generator flow
export const recipeGeneratorFlow = ai.defineFlow(
  {
    name: 'recipeGeneratorFlow',
    inputSchema: RecipeInputSchema,
    outputSchema: RecipeSchema,
  },
  async (input) => {
    // Create a prompt based on the input
    const prompt = `Create a recipe with the following requirements:
      Main ingredient: ${input.ingredient}
      Dietary restrictions: ${input.dietaryRestrictions || 'none'}`;

    // Generate structured recipe data using the same schema
    const { output } = await ai.generate({
      prompt,
      output: { schema: RecipeSchema },
    });

    if (!output) throw new Error('Failed to generate recipe');

    return output;
  },
);

// Run the flow
async function main() {
  const recipe = await recipeGeneratorFlow({
    ingredient: 'avocado',
    dietaryRestrictions: 'vegetarian',
  });

  console.log(recipe);
}

main().catch(console.error);

This defines a Genkit flow that sends a text prompt to Gemini and returns an AI-generated recipe.

🧪 Step 4: Run and Test the Flow

Start your Genkit development server:

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

You’ll see output like this:

Genkit Developer UI running at http://localhost:4000

🧭 Step 5: Interacting with the Developer UI

Open your browser and navigate to http://localhost:4000

This is the Genkit Developer UI, a powerful playground for testing and debugging your AI flows.

Here’s what you can do inside the Developer UI:
🧩 1.Explore Your Flows

You’ll see your recipeGenerator flow listed under the Flows tab.
Click it to open an interactive testing panel.

🧾 2. Provide Inputs

Enter your ingredients into the input box (for example,
chicken, garlic, tomatoes, basil)
and hit Run Flow.

🔍 3. View AI Responses

You’ll get an instant response from Gemini — usually a full recipe suggestion!
The UI also shows structured input/output data, so you can see exactly how your flow behaves.

📊 4. Inspect Traces

Switch to the Traces tab to dive deeper into how your flow executed.
You can monitor latency, errors, and data transformations — great for debugging or optimization.

🎉 You just built your first Genkit app!

From here, you can:
Add more steps to your flow (like nutrition facts or cooking time)
Integrate it with a web frontend or API endpoint
Explore the Genkit dashboard for real-time monitoring and collaboration