AI Class 30:00 by Gurnoor Singh
● Live class · 60 minutes

Build an AI chatbotusing AI.

You'll understand how AI apps really work, then use ChatGPT as your developer to build your own chatbot, with your idea, in one class.

Now

“I don't know how to code an AI chatbot.”

In 60 minutes

“I built an AI chatbot.”

GSCreated by Gurnoor Singh
Start

Here's how today works.

First you understand. Then you watch. Then you build. By the time your timer starts, you'll know every single step.

0–12 min

Understand

LLM, API, and how they connect, with diagrams.

12–15 min

Our approach

Who does what: you, ChatGPT, and the AI.

15–30 min

Watch me build

I build a full chatbot live, in seven steps.

30–60 min

Your challenge

30 minutes to build your own.

Understand / The big picture0–2 min

Every AI chatbot has three parts.

ChatGPT, Gemini, every AI app you've used: underneath, they all work like this.

The app

Your chatbot

The screen you see. Chat bubbles, a box to type in, a Send button.

The bridge

API

Carries your message to the AI, and carries the answer back.

The brain

LLM

The AI model that reads your message and writes the reply.

Understand / LLM2–5 min

An LLM predicts the next word.

LLM means Large Language Model. It has read a huge amount of text, so it's very good at guessing what word comes next. Press the button and watch it build an answer.

LLM thinkingstep 0
01
It learned from readingBooks, websites, articles. Billions of sentences.
02
It scores every possible next wordThen picks a likely one. That's the purple bar.
03
Then it repeats, very fastWord after word, until the answer is complete.
04
Gemini and GPT-OSS are LLMsGemini is made by Google. GPT-OSS is an open model that runs super fast on Groq.
Understand / Where the LLM lives5–6 min

The LLM isn't on your laptop.

It's far too big. It lives on powerful computers in data centers, run by companies like Google and Groq. Your app has to send it a message over the internet.

index.html your chatbot Your laptop message → ← answer the internet LLM Gemini / GPT-OSS Data center
Understand / API6–8 min

An API is the bridge.

API means Application Programming Interface. In simple words: a fixed way for one program to ask another program for something. Your app sends a request. The AI sends back a response.

Requestyour app → AI
// what your chatbot sends
{
  "key":     "AIzaSy••••••••",
  "system":  "You are a friendly physics tutor...",
  "message": "What is gravity?"
}
ResponseAI → your app
// what comes back
{
  "reply": "Gravity is the force that pulls..."
}

The keyProves your app is allowed to use the AI. Like showing your ID card.

The system promptYour RTCC instructions. Tells the AI who to be.

The messageWhatever the user typed in the chat box.

The replyThe LLM's answer. Your app shows it as a chat bubble.

Understand / API key8–9 min

The API key is your pass.

A long secret code that Google or Groq gives you. Every request carries it, so the AI knows the request is from you, and that you're allowed in.

API KEY · GEMINI
AIzaSy••••••••••••••••7Qx
Owner: youKeep secret
✓Get it free from Google AI Studio or the Groq console.
✓Paste it only into your own index.html, on your own laptop.
✕Don't post it, share it, or upload a file that contains it.
✓Leaked by mistake? Delete it and make a new one. Takes 10 seconds.
Understand / How it connects9–11 min

What happens when you press Send.

All of this takes about one second. Press play and follow the message on its journey.

Step 1 / 7

Understand / System prompt11–12 min

Same brain. Different instructions. Different chatbot.

You know RTCC. Inside a chatbot, your RTCC becomes the SYSTEM_PROMPT: hidden instructions sent with every message. Pick a chatbot below and see how the same question gets a different answer.

SYSTEM_PROMPT · written by you, once

Message · typed by the user

What is speed?

LLM

Gemini / GPT-OSS

What is speed?
Approach12–15 min

You won't write code. You'll direct an AI developer.

Real developers now build software this way: they describe what they want clearly, and AI writes the code. Your job is to be the person with the idea, and to test that it works.

01 · You

The founder

Decide what to build

Your idea, your RTCC, your testing. You're in charge.

02 · ChatGPT

The developer

Writes the code

Turns your prompt into a complete index.html file.

03 · Gemini / Groq

The brain

Answers inside your app

Powers your chatbot every time someone presses Send.

Watch me build / PhysicsAI15–17 min
Step 1 · Key first

Get your free API key first.

We do this first because it's the step most likely to need help. Pick one brain. Both are free.

Gemini · Google
  1. Open aistudio.google.com/apikey and sign in with a personal Google account.
  2. Click Create API key. Accept the terms if asked.
  3. Click Copy. The key starts with AIza.
Groq
  1. Open console.groq.com/keys and sign up free.
  2. Click Create API Key, give it any name.
  3. Copy it right away. It starts with gsk_ and is shown only once.
aistudio.google.com/apikey
API keys+ Create API key
AIzaSy••••••••••••7Qx
Free tier
Test it before you buildIn the challenge there's a Test my key button. It asks the AI to say "Connected!", so you know your key works before you write a single line.
It worked ifThe tester shows a green "Connected!" reply.
Watch outSchool Google accounts are often blocked from AI Studio. Use a personal account, or ask a parent or teacher.
Watch me build / PhysicsAI17–19 min
Step 2 · Decide

Decide your chatbot.

Before any code, get the idea right. One clear sentence: who does it help, with what?

  1. Pick a problem you or your friends actually have.
  2. Name the user: "Class 9 students", not just "people".
  3. Name the topic: physics, maths, English, careers…
Weak idea

“An AI that helps students.”

Strong idea

“An AI that helps Class 9 students learn physics with simple examples.”

Good signYou can explain your chatbot in one breath.
Watch out"It does everything" isn't an idea. Narrow it down.
Watch me build / PhysicsAI19–21 min
Step 3 · Prompt

Give ChatGPT the master prompt.

The challenge page writes it for you: your idea, your RTCC, your extras, and the exact API code that's tested to work.

  1. Open chatgpt.com and start a new chat.
  2. Paste the master prompt and press Enter.
  3. Wait for one long code block that starts with <!DOCTYPE html>.
Why it works nowThe prompt hands ChatGPT the exact API code to copy, so it can't guess an old model name or a wrong request format. That's what usually breaks.
ChatGPT
Here's your complete chatbot in one file. Paste your key on line 6.
htmlCopy code
<!DOCTYPE html>
<html lang="en">
<head>
<!-- STEP 1: PASTE YOUR API KEY BELOW -->
<script>
const API_KEY = "PASTE_YOUR_API_KEY_HERE";
const MODEL = "gemini-3.5-flash-lite";
</script>
It worked ifYou get one code block starting with <!DOCTYPE html>.
Watch outCut off halfway? Type "continue", or "give me the complete file again".
Watch me build / PhysicsAI21–23 min
Step 4 · Save

Save it as index.html.

HTML, CSS and JavaScript all live in this one file. This file is your app.

  1. Click Copy code in ChatGPT.
  2. Open Notepad (Windows) or TextEdit (Mac → Format → Make Plain Text).
  3. Paste, then Save As → index.html, type All files, on the Desktop.
Save As
index.html
All files (*.*)
Desktop
CancelSave
It worked ifThe file icon on your Desktop looks like a browser icon.
Watch outIf it's called index.html.txt, it saved as text. Save again with "All files".
Watch me build / PhysicsAI23–25 min
Step 5 · Connect

Paste your key at the top.

The key's spot is always near the very top, on line 6. You never need to scroll.

  1. Right-click index.html → Open with → Notepad.
  2. On line 6, replace PASTE_YOUR_API_KEY_HERE with your key. Keep the quotes.
  3. Press Ctrl + S (Mac: Cmd + S) to save.
Why we don't give the key to ChatGPTYour key is like a password. You paste it only into your own file, on your own laptop.
index.html — Notepad
1  <!DOCTYPE html>
2  <html lang="en">
3  <head>
4  <!-- STEP 1: PASTE YOUR API KEY BELOW -->
5  <script>
6  const API_KEY = "AIzaSy••••••••••••••";
7  const MODEL = "gemini-3.5-flash-lite";
8  </script>
It worked ifLine 6 looks like API_KEY = "AIza…"; with quotes on both sides.
Watch outNo spaces inside the quotes. Never share this file now that it has your key.
Watch me build / PhysicsAI25–27 min
Step 6 · Run

Double-click index.html.

.html

It opens in Chrome or Edge. No installing, no server. Just your file.

  1. Type Hello! Who are you? and press Send.
  2. Watch the typing indicator.
  3. Read the reply. Does it sound like your RTCC?
file:///Desktop/index.html
PHYSICS TUTOR
Hi! I'm your physics tutor. What should we explore today?
Hello! Who are you?
I'm a friendly physics tutor for Class 9. Ask me anything, like why the sky is blue or how rockets fly!
Ask a question…
SEND
It worked ifA real answer appears. That's your own AI chatbot running.
Watch outA red error bubble? Read it. The challenge's "Stuck?" list has the fix for each one.
Watch me build / PhysicsAI27–30 min
Step 7 · Improve

Make it yours.

Go back to ChatGPT and ask for changes in plain English. Click each request to see it applied:

file:///Desktop/index.html
PHYSICS TUTOR
Hi! I'm your physics tutor. What should we explore today?
Why do things fall?
Why is the sky blue?What is friction?How do magnets work?
Ask a question…
SEND
The loopAsk ChatGPT → copy the new code → replace everything in index.html → paste your key on line 6 again → save → refresh.
Watch outAlways say "keep the API code exactly the same and give me the complete index.html".
Challenge30–60 min

Your turn. Build your AI chatbot.

Eight short steps. Do them in order, press Next after each one.

30:00
Step 1 of 8 · about 4 min

Get your free API key and test it

Do this first. If the key works here, it will work in your chatbot.

Advanced: change the model

🔒 Your key is only kept on this page while it's open. It's never saved, and only goes to Google or Groq for the test.

Step 2 of 8 · about 2 min

Describe your chatbot

Who does it help, with what? Start from an example or write your own.

Step 3 of 8 · about 4 min

Write its RTCC

This becomes the hidden SYSTEM_PROMPT. It decides how your chatbot talks.

Step 4 of 8 · about 3 min

Add more to your master prompt

Tick any features you want. They all get added to the prompt. Pick 2 or 3 for your first version.

Step 5 of 8 · about 3 min

Copy the master prompt into ChatGPT

Check the summary, copy, then paste it into a new ChatGPT chat.

Open ChatGPT ↗
  1. In ChatGPT, paste with Ctrl + V and press Enter.
  2. Wait until the code block finishes.
  3. Cut off? Type continue.
Preview the full prompt

      


      
      

        
Step 6 of 8 · about 3 min

        
Save the code as index.html

        
Pick your computer:

        

        
    
        
    CheckThe file must be index.html, not index.html.txt. Its icon should look like a browser.
    
      
    

      
      
    
        
    Step 7 of 8 · about 2 min
    
        
    Paste your key at the top of the file
    
        
    Your key goes on line 6, right at the start of the file.
    
        
    1. Right-click index.html → Open with → Notepad (Mac: TextEdit).
    2. Find the line const API_KEY = "PASTE_YOUR_API_KEY_HERE";
    3. Replace that whole line with the line below, then save (Ctrl + S).
    
        
    Your line 6
    
        
        
    Can't find the line? Press Ctrl + F and search for API_KEY.
    
      
    

      
      
    
        
    Step 8 of 8 · the moment
    
        
    Open it and talk to your chatbot
    
        
    1. Double-click index.html. It opens in Chrome or Edge.
    2. Type Hello! Who are you? and press Send.
    3. A real reply means you did it. Now make it better with one more request below.
    
        
    ?
    Red error bubble? Find your error
    
        
    
        
    
          
    Plan B: download a working starterStill stuck after 5 minutes? Get a ready-made index.html built from your answers, then improve it with ChatGPT.
    
          
    
        
    
        
    +
    Make it yours
    
        
    Tap to copy, paste into the same ChatGPT chat. Then replace your file and paste your key on line 6 again.
    
        
    
      
    

      
    
    
    
  
    
  
    

    



    
  
    
    
    
    “I don't know how to code an AI chatbot.”
    
    
    I built an
    AI chatbot.
    
    
    You used AI to build AI-powered software. That's the skill that matters now.
    
    
    
    
    SYNAPSELearn AI. Build AI.