What You'll Build
In this project, you'll use an AI assistant (Claude, ChatGPT, or any tool you prefer) to create a browser-based chat simulator. The finished tool will let you:
- Type messages into a realistic chat interface with user and AI message bubbles
- See simulated AI responses that appear with a realistic typing indicator
- Browse through multiple conversation topics with pre-written AI responses
- Save conversation history to localStorage so chats survive page refreshes
- Clear conversations and start fresh with a single click
What You'll Need
An AI Chat Tool
Claude, ChatGPT, Gemini, or any AI assistant that can generate code. Free tiers work fine.
A Text Editor
VS Code, Notepad, TextEdit — anything that lets you save an .html file.
No coding experience needed
This project is designed for complete beginners. The AI does the heavy coding — you learn how to guide it.
Describe the Chat Interface
Open your AI tool and start a new conversation. The first step is to describe exactly what the chat interface should look like. Be specific about the layout — AI tools produce much better results when you give them a clear picture of what you want.
Build me a single HTML file with an AI chat simulator. It should look like a real messaging app. Here's what I need:
- A chat window that takes up most of the screen, centered with a max width of 600px
- User messages appear on the right side in a green bubble
- AI responses appear on the left side in a dark gray bubble with a small robot icon
- A text input bar at the bottom with a send button
- The chat window should auto-scroll to the latest message
- Use a dark theme with a background color of #0a0f1a
- The AI doesn't need to be smart — just have it respond with pre-written helpful replies based on keywords in the user's message (e.g., if the user mentions "code", respond with a coding tip)
Put all HTML, CSS, and JavaScript in one file. No external dependencies besides Tailwind CSS via CDN.
Notice how this prompt describes the visual layout (bubbles, alignment, colors), the behavior (auto-scroll, keyword matching), and the constraints (one file, Tailwind only). This level of detail prevents the AI from guessing.
Add a Typing Indicator
Once the basic chat is working, the next step is making it feel realistic. Real AI chats show a "thinking" indicator before the response appears. Ask the AI to add this:
Add a typing indicator to the chat simulator. After the user sends a message:
1. Immediately show a "thinking" bubble on the AI side with three animated dots (the dots should pulse up and down in sequence, like iMessage)
2. Wait 1-3 seconds (random delay to feel realistic)
3. Replace the thinking bubble with the actual AI response
4. Disable the send button while the AI is "typing" so the user can't send multiple messages at once
5. The typing dots should be small circles that animate with CSS keyframes, not a GIF
Keep everything in the same single HTML file.
This is a great example of iterative prompting — you build on what you already have instead of trying to get everything perfect in one shot. Each prompt adds one layer of functionality.
What to look for when testing:
- Do the three dots appear immediately after you send a message?
- Do the dots animate smoothly (bouncing up and down)?
- Does the actual response replace the dots after a short delay?
- Is the send button disabled during the "thinking" phase?
- Does the chat still auto-scroll to show the typing indicator?
Add Conversation History with localStorage
Right now, if you refresh the page, all your messages disappear. Let's fix that by saving conversations to the browser's localStorage. This teaches you an important concept — persistence without a server.
Add conversation persistence to the chat simulator using localStorage:
- Save every message (both user and AI) to localStorage as a JSON array after each exchange
- When the page loads, check localStorage and restore all previous messages into the chat window
- Add a "Clear Conversation" button in the header that erases localStorage and resets the chat to a welcome message
- Add a message counter somewhere in the UI that shows how many messages are in the current conversation (e.g., "12 messages")
- Each saved message should include: the text, who sent it (user or AI), and a timestamp
Keep the same dark theme and single-file structure.
Here are common issues you might run into and how to describe them to the AI:
Messages load but timestamps are wrong
Tell the AI: "The timestamps show 'Invalid Date' when messages are restored from localStorage. Make sure each message stores its timestamp as an ISO string and format it with toLocaleTimeString() when displaying."
Clear button doesn't work
Tell the AI: "The clear conversation button doesn't do anything. Make sure it calls localStorage.removeItem() with the correct key and then removes all message elements from the DOM."
Chat doesn't scroll to bottom on page load
Tell the AI: "When I refresh the page and old messages load, the chat window starts at the top instead of scrolling to the latest message. Add scrollTop = scrollHeight after restoring messages."
Expand the AI's Response Library
The simulator is more useful if the AI has a wider range of realistic responses. Ask the AI to build out a proper response system with multiple conversation topics:
Improve the AI response system in the chat simulator. Replace the simple keyword matching with a smarter system:
- Create a response library with at least 8 categories: greetings, coding help, writing help, math, general knowledge, jokes, motivation, and a default/fallback category
- Each category should have 3-5 different responses so the AI doesn't repeat itself
- Match user messages to categories using keyword arrays (e.g., ["hello", "hi", "hey", "sup"] maps to the greetings category)
- Pick a random response from the matched category each time
- If no keywords match, use a friendly fallback like "That's an interesting question! In a real AI, I'd analyze that more deeply. Try asking me about coding, writing, math, or just say hello!"
- Add a small "Suggested prompts" section above the input bar with 3-4 clickable chip buttons (e.g., "Tell me a joke", "Help me code", "Motivate me") that auto-fill the input
Keep the same file, same styling, same localStorage behavior.
This is where AI tools really shine. Building a keyword-matching response engine with multiple categories would take a long time to write by hand, but you can describe the exact behavior in plain English and the AI handles the implementation details.
Polish with Animations and Style
Once the functionality is solid, use the AI to make the whole experience feel polished. Small details like animations and hover effects make a big difference:
Add polish and animations to the chat simulator:
- New messages should slide in from the bottom with a subtle fade-in animation (use CSS keyframes, not transition-all)
- The send button should have a hover effect that slightly scales it up and changes its background color
- Add a subtle gradient background to the chat header area
- Display timestamps on each message in a small, muted font below the bubble
- Add a "sound" toggle button in the header (it doesn't need to play actual sound — just show an on/off icon so it looks realistic)
- Add an empty state with a friendly welcome message and icon when there are no messages yet
Keep the dark theme, keep localStorage working, keep everything in one file.
What You Learned
This project teaches more than just chat interfaces. By completing it, you practiced:
Describing UI Layouts to AI
You learned to describe visual layouts precisely — chat bubbles, alignment, colors, spacing — so the AI builds exactly what you picture.
Building Interactive JavaScript
You guided the AI to create event listeners, DOM manipulation, and dynamic content rendering — the building blocks of interactive web apps.
Understanding Chat Patterns
You understand how chat UIs work — message bubbles, typing indicators, auto-scroll, and the request/response pattern that powers every AI chat app.
localStorage Persistence
You learned how browsers can store data locally — saving and loading JSON, handling page refreshes, and clearing stored data on demand.
Tips for Working with AI on This Project
Test after every step. Save the file, refresh the browser, and click through the whole flow before moving to the next prompt. Catching problems early is much easier than debugging everything at the end.
Paste error messages. If something breaks, open the browser console (F12) and paste the error into the chat. The AI can usually fix it immediately.
Say "keep everything in one file." AI tools sometimes split code into multiple files. For this project, a single HTML file is easier to manage.
Describe what you see vs. what you expect. Instead of "it's broken," say "the AI response appears above the user message instead of below it." Specific descriptions get specific fixes.
Ready for your next project?
Explore more hands-on projects, or check out the tutorials for deeper dives into specific AI tools.