SJBLOG

Shreejai Raj - Blog🚀 How to Build and Deploy a Chatbot in 20 Minutes with Next.js and Vercel

Title image

🚀 How to Build and Deploy a Chatbot in 20 Minutes with Next.js and Vercel

In today’s digital world, chatbots are more than a novelty — they’re a powerful way to automate interactions and engage users more meaningfully. If you’ve ever wanted to build your own AI chatbot (similar to ChatGPT) and get it live on the web, this tutorial will walk you through the process — from setup to deployment — using Next.js and Vercel in just about 20 minutes. Medium

🧠 What You’ll Build

By the end of this guide, you’ll have:

  • A Next.js app that functions as a chatbot
  • A serverless backend that talks to the OpenAI API
  • A deployed version of your app hosted on Vercel that your users can interact with online

No prior experience with AI development is required — just basic familiarity with React and Next.js. Medium

⚙️ Step 1: Set Up the Next.js Project

First, let’s generate a fresh Next.js application:

  1. Open your terminal and decide where you want the project folder.
  2. Run:

npx create-next-app@latest

  1. Choose a name for your project and accept the defaults for everything else.

Once the installation finishes, start the dev server:

npm run dev

Visit http://localhost:3000 in your browser — you should see your new Next.js starter app. Medium

Before proceeding, clean up default files (like boilerplate CSS and images) so you have a blank slate to work from. Medium

🔐 Step 2: Add OpenAI

To give your chatbot intelligence, you’ll need an OpenAI API key:

  1. Sign in to your OpenAI account and create a secret API key.
  2. Add this key as an environment variable in your terminal:

export OPENAI_API_KEY="your_api_key_here"

  1. Install the OpenAI Node.js SDK:

npm install openai

This setup lets your Next.js app securely communicate with OpenAI. Medium

🛠 Step 3: Create the Chat Backend

In Next.js App Router (the src/app directory), create a new folder called chat and inside it, a file named route.ts.

This file will:

  • Receive chat questions from the frontend
  • Send them to the OpenAI API
  • Return the AI’s response to the client

Here’s the core idea:

import OpenAI from "openai";
const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });
export async function POST(req) { const { question } = await req.json();
const response = await openai.chat.completions.create({ messages: [ { role: "system", content: "You are a helpful assistant." }, { role: "user", content: question }, ], model: "gpt-3.5-turbo", max_tokens: 300, });
return new Response(JSON.stringify(response)); }

This route accepts POST requests and uses the OpenAI API to generate text. Medium

🧩 Step 4: Build the Frontend

On the frontend (src/app/page.tsx), create a basic UI:

  • An input box where users type their question
  • A button to submit it
  • A display area showing the chatbot’s answer

Use state to manage user input and the server response. When the user submits, send a POST request to your /chat route. Medium

This gives you a working chat interface connected to an AI backend.

🌍 Step 5: Deploy to Vercel

Now for the best part — launching your chatbot so others can use it:

  1. Push your project to GitHub.
  2. Log into Vercel and click New Project.
  3. Import your GitHub repository.
  4. In the Vercel dashboard, add your OpenAI API key as an environment variable.
  5. Click Deploy.

Within moments, your chatbot will be live at a public URL! Vercel will also auto-redeploy your app whenever you push new changes. Medium

🏁 Conclusion

In about twenty minutes, you’ve built your own chatbot using:

  • Next.js for the web app
  • OpenAI for natural language responses
  • Vercel for deployment

And all of this without needing extensive backend experience! 🎉

From here, you can expand your bot with features like:

✨ Conversation history
✨ User authentication
✨ Custom personality responses
✨ Stylish UI with Tailwind CSS

The possibilities are endless — and this project gives you a solid foundation to build on.