Gemini AI | Next JS 15 | Tailwind

Helly my frontend developers, today i will be discussing about gemini ai api and how we could use it with NEXT JS 15 and tailwind css for styling. Let's get started... STEP 1 - Generate the gemini ai api key Open this link, log in and generate the api key STEP 2 - Create a new next js project Create command 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 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 { /** * 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} - 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 ( {response.summary} ); }; export default page; That's it for this post, Let me know if i could do any improvements in this article You can contact me on - Instagram - https://www.instagram.com/supremacism__shubh/ LinkedIn - https://www.linkedin.com/in/shubham-tiwari-b7544b193/ Email - shubhmtiwri00@gmail.com You can help me with some donation at the link below Thank you

Feb 19, 2025 - 15:00

Helly my frontend developers, today i will be discussing about gemini ai api and how we could use it with NEXT JS 15 and tailwind css for styling.
Let's get started...

STEP 1 - Generate the gemini ai api key

Open this link, log in and generate the api key

STEP 2 - Create a new next js project

Create command

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

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