Thumbnail Image

In this article, we’ll walk through the complete process of building an AI chatbot web app powered by Google Gemini and deploying it to the web using Vercel. We’ll use AssistantUI, a modern framework to create conversational experiences using powerful LLMs.

Step 1: Install the Prerequisites

Before we begin, make sure the following tools are installed on your machine:

  1. Install Visual Studio Code (VS Code ).
  2. Install Node.js (Node.js ).
  3. Install Git (Git ).

Step 2: Set Up the Project Directory

Create a folder named chatbot:

1

mkdir chatbot && cd chatbot

Open the folder in VS

1

code .

Step 3: Scaffold the Assistant UI App

1

npx assistant-ui@latest create

This command will prompt you to select a template. Choose the chat template. This will create a new folder named assistant-ui with the necessary files and dependencies.

Step 4: Set Up Dependencies

Move into the generated project folder (likely chatbot):

1

cd chatbot

Install the required SDKs:

1

npm install ai @assistant-ui/react-ai-sdk @ai-sdk/google

Step 5: Integrate Google Gemini API

Open the file:

1

/app/api/chat/route.ts

Clear all content in the file and paste the following code:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

import { google } from "@ai-sdk/google";
import { streamText } from "ai";

export const maxDuration = 30;

export async function POST(req: Request) {
  const { messages } = await req.json();
  const result = streamText({
    model: google("gemini-2.0-flash"),
    messages,
  });
  return result.toDataStreamResponse();
}

Get your Google Gemini API Key from the Google AI Studio .

Step 6: Store Your API Key

Create a new environment file in the root directory:

1

.env.local

Add the following line:

1

GOOGLE_GENERATIVE_AI_API_KEY="Your_API_KEY"

Make sure to replace Your_API_KEY with your actual API key.

Step 7: Run the Development Server

Start your app locally:

1

npm run dev

Your application will be live at:

1

http://localhost:3000

Step 8: Build for Production

Build your app for production:

1

npm run build

This command will create a .vercel folder in your project directory.

Clean up: Delete the node_modules folder and .env.local file before uploading to GitHub for security reasons.

Step 9: Upload your code to GitHub

  1. Create a new repository on GitHub.
  2. Initialize a new Git repository in your project folder:
1

git init
  1. Add your files to the repository:
1

git add .
  1. Commit your changes:
1

git commit -m "Initial commit"
  1. Add the remote repository:
1

git remote add origin https://github.com/<username>/chatbot.git
  1. Push your changes:
1

git push -u origin main

Step 10: Deploy to vercel

  1. Go to Vercel and sign in with your GitHub account.
  2. Click on the “New Project” button.
  3. Select your GitHub repository.
  4. Vercel will automatically detect the framework and set up the build settings.

When prompted, add your API key as an environment variable:

1

GOOGLE_GENERATIVE_AI_API_KEY = your_key_here

Step 11: Your AI Chatbot is Live!

Once the deployment is complete, you will receive a live URL for your chatbot. You can share this URL with anyone to access your AI chatbot.

Final Notes

  • Make sure to keep your API key secure and do not expose it in your public repositories.
  • This setup gives you a solid starting point to create intelligent AI interfaces.
  • You can now customize the UI, add more features, or even connect this to a backend for storing user interactions.