Gemini AI with Next.js 15: A Comprehensive Guide for Frontend Developers

#webdev #javascript #beginners #google

Hello, frontend developers! In this tutorial, we’ll explore the powerful Gemini AI API and learn how to integrate it with Next.js 15 and Tailwind CSS to build a sleek, AI-powered application. This guide is ideal for beginners and those looking to enhance their knowledge of Google’s Generative AI.

Let's dive in!

Step 1: Generate Your Gemini AI API Key

To get started, you’ll first need to generate a Gemini AI API key. Here’s how:

Open this link, log in and generate the api key
Log in and generate the API key.

Step 2: Create a New Next.js 15 Project

Run the following command to create a new Next.js 15 project:

npx create-next-app@latest gemini-ai-app

Select yes for all the prompts (tailwind will be installed in this step as well)
Delete the unnecessary file and clear the page.tsx file code as well.

Step 3 - Install these packages

In your Next.js project, install the following dependencies:

npm i @google/generative-ai @tailwindcss/typography react-markdown remark-gfm

@google/generative-ai is the package to access the gemini ai using the api key
@tailwindcss/typography is used to render the markdown content in a structured way, since we will be getting the response from the api as markdown
Markdown component will render the markdown component in a more readable way with the help of tailwind typography package.
remark-gfm is used to render the tables and list properly.

STEP 4 - Writing the API

Create an api folder inside app, then another folder inside gemini-ai-model inside api folder.
Create a file route.ts inside gemini-ai-model and add this code

import { GoogleGenerativeAI } from "@google/generative-ai";
import { NextResponse } from "next/server";

const genAI = new GoogleGenerativeAI(process.env.GOOGLE_GEMINI_API || "");
const model = genAI.getGenerativeModel({
  model: "gemini-2.0-flash-001",
  tools: [
    {
      codeExecution: {},
    },
  ],
});


/**
 * API route for generating content using Gemini AI model.
 */
export async function POST(req: Request): Promise<Response> {
  /**
   * Get the prompt from the request body.
   */
  const data = await req.json();
  const prompt = data.text || "Explain how AI works";

  /**
   * Use the Gemini AI model to generate content from the prompt.
   */
  const result = await model.generateContent(prompt);

  /**
   * Return the generated content as a JSON response.
   */
  return new Response(
    JSON.stringify({
      summary: result.response.text(),
    }),
  );
}

This will simply take the prompt we pass in the request body and generate the response for it, which returns in the object form with summary key.
Documentation for the API - DOC

STEP 5 - Creating the frontend

Write this code in your root page.tsx file

import React from "react";
import Markdown from "react-markdown";
import remarkGfm from "remark-gfm";

const baseUrl = "http://localhost:3000"; // or your hosted domain

/**
 * Fetches the response from the Gemini AI model API.
 *
 * @returns {Promise<Object | null>} - A promise that resolves with the response
 * data from the API, or null if there is an error.
 */
const fetchResponse = async () => {
  try {
    const response = await fetch(`${baseUrl}/api/gemini-model`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        text: "Explain how AI works"
      }), // Replace with your state which is controlled by an input
    });

    // Parse the response data
    const data = await response.json();
    return data;
  } catch (error) {
    console.error("Error fetching response:", error);
    return null;
  }
};

const page = async () => {
  const response = await fetchResponse();
  return (
    <div className="prose prose-base px-5 lg:px-10 py-10 lg:py-20 w-full max-w-full">
      <Markdown remarkPlugins={[remarkGfm]}>{response.summary}</Markdown>
    </div>
  );
};

export default page;