Building an AI Web App

In this guide, you'll go from zero to a fully deployed AI-powered web application. No prior coding experience is required — we'll walk through every step together.

What you'll learn

• Set up a modern development environment with AI-powered coding tools
• Brainstorm and plan an app idea using AI as a collaborator
• Build a full-stack web application with Next.js
• Integrate AI capabilities using the Gemini or OpenAI APIs
• Add user authentication and a database with Firebase
• Test your app locally and debug common issues
• Deploy your app to the web with Vercel so anyone can use it

Prerequisites

A computer (Mac, Windows, or Linux) with an internet connection. That's it. We'll help you set up everything else along the way.

Setting Up Your Tools

Before building, you'll need a few free accounts and tools installed. This section walks you through each one.

1 Creating a GitHub Account

GitHub is where developers store and share code. You'll use it to save your project and later connect it to Vercel for deployment.

2 Getting Familiar with Your Terminal

The terminal (also called the command line) is a text-based way to interact with your computer. You'll use it to run commands like starting your app or installing packages.

3 Installing Node.js

Node.js is the engine that runs JavaScript outside the browser. You'll need it to create your Next.js project, install packages with npm, and run your development server.

4 Installing Your AI Coding Tool

AI coding tools let you write code using natural language. Pick whichever one appeals to you — they all work great for this guide. Cursor is recommended for beginners since it has a visual interface.

5 Creating a Vercel Account

Vercel is the platform we'll use to put your app on the internet. It's free for personal projects and integrates perfectly with GitHub and Next.js.

Brainstorming Your App Idea

The best way to learn is to build something you actually care about. Let's use AI to help brainstorm ideas.

What makes a good first project?

• Solves a real problem — even a small one, like tracking your homework or organizing recipes
• Uses AI meaningfully — the app should do something better because it has AI (e.g., generating text, answering questions, summarizing)
• Has a clear scope — one main feature you can build in a few hours, not a dozen

Example ideas

Using AI to brainstorm

Open your AI coding tool and try a prompt like this to kick off the brainstorming process:

I'm a student building my first AI web app. I'm interested in 
[your interest, e.g., music, sports, cooking, gaming].

Help me brainstorm 5 app ideas that:
- Use AI in a meaningful way
- Can be built as a web app in a few hours
- Would be impressive to show friends and family

For each idea, give me a one-sentence description and the 
main AI feature it would use.

Development

Now the fun part — actually building your app. We'll create a new project and use AI to help write the code.

1 Creating Your Project

We'll use Next.js, a popular framework for building web apps. Your AI coding tool can create the project for you, but here's how to do it manually:

# Create a new Next.js project
npx create-next-app@latest my-ai-app

# When prompted, select these options:
#   TypeScript: Yes
#   ESLint: Yes
#   Tailwind CSS: Yes
#   src/ directory: No
#   App Router: Yes
#   Import alias: @/* (default)

# Move into your project folder
cd my-ai-app

# Start the development server
npm run dev

Open your browser to http://localhost:3000 and you should see the default Next.js welcome page. Congratulations — your app is running!

2 Building Features with AI

Here's where your AI coding tool really shines. Instead of writing every line of code yourself, you describe what you want and the AI helps build it.

Tips for prompting your AI tool

Example: Building a UI with AI

Here's an example prompt you might give your AI coding tool to build the main page of a study buddy app:

Replace the contents of app/page.tsx with a study buddy app UI.

The page should have:
- A clean, modern design with a centered layout
- A heading that says "Study Buddy" 
- A text area where users can paste a topic or question
- A "Help me understand" button below the text area
- A response area below the button that will show the AI's explanation
- Use Tailwind CSS for styling
- Make it look polished and professional

Integrating an AI Provider

To make your app truly AI-powered, you'll connect it to an AI API. Choose either Google's Gemini or OpenAI — both work well and have free tiers.

Using the Gemini API

Google's Gemini API is a great choice — it has a generous free tier and excellent performance.

Step 1: Get your API key

Step 2: Install the SDK

npm install @google/generative-ai

Step 3: Create an API route

Create a new file at app/api/chat/route.ts — this keeps your API key on the server, away from the browser:

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

const genAI = new GoogleGenerativeAI(process.env.GEMINI_API_KEY!);

export async function POST(req: NextRequest) {
  const { message } = await req.json();

  const model = genAI.getGenerativeModel({ model: "gemini-2.0-flash" });
  const result = await model.generateContent(message);
  const text = result.response.text();

  return NextResponse.json({ reply: text });
}

Step 4: Store your API key safely

Create a file called .env.local in your project root:

GEMINI_API_KEY=your_api_key_here

Using the OpenAI API

OpenAI's API powers ChatGPT. It's another excellent option with great documentation.

Step 1: Get your API key

Step 2: Install the SDK

npm install openai

Step 3: Create an API route

Create the same app/api/chat/route.ts file, but using the OpenAI SDK:

import OpenAI from "openai";
import { NextRequest, NextResponse } from "next/server";

const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY!,
});

export async function POST(req: NextRequest) {
  const { message } = await req.json();

  const completion = await openai.chat.completions.create({
    model: "gpt-4o-mini",
    messages: [{ role: "user", content: message }],
  });

  const text = completion.choices[0].message.content;

  return NextResponse.json({ reply: text });
}

Step 4: Store your API key safely

OPENAI_API_KEY=your_api_key_here

Step 5: Call the API from your frontend

Whichever provider you chose, calling your API route from the frontend looks the same:

async function askAI(message: string) {
  const response = await fetch("/api/chat", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ message }),
  });

  const data = await response.json();
  return data.reply;
}

Adding Firebase for Auth & Database

Most real apps need user accounts and a way to store data. Firebase gives you both — authentication (sign-in) and a database (Firestore) — for free, with minimal setup. In this section you'll wire up Firebase so your users can sign in and their data persists between sessions.

1 Setting Up a Firebase Project

Create a Firebase project

1. Click Create a project (or Add project)
2. Give it a name (e.g., my-ai-app)
3. You can disable Google Analytics for now — it's not needed
4. Click Create project and wait a few seconds

Register a web app

1. From your project dashboard, click the Web icon (</>) to add a web app
2. Give it a nickname (e.g., my-ai-app-web)
3. You don't need Firebase Hosting — we're using Vercel
4. Click Register app
5. Firebase will show you a config object — keep this tab open, you'll need it in a moment

Install the Firebase SDK

npm install firebase

Add your Firebase config

Create a new file at lib/firebase.ts (or src/lib/firebase.ts if you're using a src/ directory). Paste the config values Firebase gave you:

import { initializeApp, getApps } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
};

const app = getApps().length === 0 ? initializeApp(firebaseConfig) : getApps()[0];

export const auth = getAuth(app);
export const db = getFirestore(app);

Then add the matching values to your .env.local file:

NEXT_PUBLIC_FIREBASE_API_KEY=your_api_key
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your_project.firebaseapp.com
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your_project_id
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your_project.firebasestorage.app
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
NEXT_PUBLIC_FIREBASE_APP_ID=your_app_id

2 Adding Authentication

Firebase Auth supports dozens of sign-in methods. We'll set up Google sign-in because it's the fastest to configure and almost everyone has a Google account.

Enable Google sign-in in the Firebase Console

1. In the Firebase Console, go to Build → Authentication
2. Click Get started
3. Under Sign-in method, click Google
4. Toggle the Enable switch on
5. Choose a support email (your Google account works)
6. Click Save

Create a sign-in button component

Create a new file at app/components/AuthButton.tsx:

"use client";

import { useState, useEffect } from "react";
import {
  GoogleAuthProvider,
  signInWithPopup,
  signOut,
  onAuthStateChanged,
  type User,
} from "firebase/auth";
import { auth } from "@/lib/firebase";

export default function AuthButton() {
  const [user, setUser] = useState<User | null>(null);

  useEffect(() => {
    return onAuthStateChanged(auth, setUser);
  }, []);

  const handleSignIn = async () => {
    const provider = new GoogleAuthProvider();
    await signInWithPopup(auth, provider);
  };

  if (user) {
    return (
      <div className="flex items-center gap-3">
        <span className="text-sm">
          {user.displayName}
        </span>
        <button
          onClick={() => signOut(auth)}
          className="px-3 py-1.5 text-sm rounded-lg border border-border
                     hover:bg-accent/50 transition-colors"
        >
          Sign out
        </button>
      </div>
    );
  }

  return (
    <button
      onClick={handleSignIn}
      className="px-4 py-2 text-sm font-medium rounded-lg bg-primary
                 text-white hover:bg-primary-dark transition-colors"
    >
      Sign in with Google
    </button>
  );
}

Drop <AuthButton /> into your layout or header, and you've got working authentication.

3 Using Firestore Database

Firestore is a NoSQL database that stores data as documents inside collections — think of it like folders full of JSON files. It updates in real time, so your UI stays fresh without manual refreshing.

Enable Firestore in the Firebase Console

1. In the Firebase Console, go to Build → Firestore Database
2. Click Create database
3. Choose Start in test mode for now (we'll lock it down in a moment)
4. Pick a region close to your users and click Enable

Saving data to Firestore

Here's how to save and read data for the currently signed-in user. For example, saving a chat history:

import {
  collection,
  addDoc,
  query,
  where,
  orderBy,
  onSnapshot,
  serverTimestamp,
} from "firebase/firestore";
import { db, auth } from "@/lib/firebase";

// Save a new message
async function saveMessage(text: string, role: "user" | "ai") {
  const user = auth.currentUser;
  if (!user) return;

  await addDoc(collection(db, "users", user.uid, "messages"), {
    text,
    role,
    createdAt: serverTimestamp(),
  });
}

// Listen for messages in real time
function subscribeToMessages(
  callback: (messages: { text: string; role: string }[]) => void
) {
  const user = auth.currentUser;
  if (!user) return () => {};

  const q = query(
    collection(db, "users", user.uid, "messages"),
    orderBy("createdAt", "asc")
  );

  return onSnapshot(q, (snapshot) => {
    const msgs = snapshot.docs.map((doc) => doc.data() as {
      text: string;
      role: string;
    });
    callback(msgs);
  });
}

Using it in a component

Wire the functions above into your UI — here's a simplified example:

"use client";

import { useEffect, useState } from "react";
import { onAuthStateChanged } from "firebase/auth";
import { auth } from "@/lib/firebase";

export default function ChatHistory() {
  const [messages, setMessages] = useState<
    { text: string; role: string }[]
  >([]);

  useEffect(() => {
    const unsubAuth = onAuthStateChanged(auth, (user) => {
      if (!user) {
        setMessages([]);
        return;
      }
      const unsubMessages = subscribeToMessages(setMessages);
      return () => unsubMessages();
    });

    return () => unsubAuth();
  }, []);

  return (
    <div className="space-y-3">
      {messages.map((msg, i) => (
        <div
          key={i}
          className={`p-3 rounded-lg ${
            msg.role === "user"
              ? "bg-primary/10 ml-8"
              : "bg-accent mr-8"
          }`}
        >
          {msg.text}
        </div>
      ))}
    </div>
  );
}

Adding your Firebase config to Vercel

When you deploy, Vercel needs the same environment variables. Go to your project in the Vercel dashboard → Settings → Environment Variables and add each NEXT_PUBLIC_FIREBASE_* variable from your .env.local file.

Testing Locally

Before deploying, make sure everything works locally. Here's a checklist:

Running your dev server

npm run dev

Your app should be running at http://localhost:3000. Open it in your browser and test every feature.

Testing checklist

Deployment

Time to share your creation with the world. We'll push your code to GitHub and deploy it on Vercel — your app will have a real URL anyone can visit.

1 Deploying to Vercel

Push your code to GitHub

First, create a new repository on GitHub and push your code:

Connect to Vercel

1. Go to vercel.com/new
2. Import your GitHub repository
3. Vercel will auto-detect that it's a Next.js project
4. Add your environment variables — click "Environment Variables" and add your API key (e.g., GEMINI_API_KEY or OPENAI_API_KEY) and your Firebase config variables
5. Click Deploy

Within a minute or two, your app will be live at a URL like your-app.vercel.app. Share it with friends, family, teachers — anyone!

2 Custom Domain SetupOptional

Want your app at a custom URL like myapp.com? Here's how:

1. Buy a domain from a registrar like Namecheap, Cloudflare, or Google Domains (typically $10–15/year)
2. In your Vercel dashboard, go to your project → Settings → Domains
3. Add your custom domain
4. Vercel will give you DNS records to add at your domain registrar
5. Once the DNS propagates (can take a few minutes to hours), your site will be live on your custom domain with automatic HTTPS