Lesson 4 of 6~2 min read

Lesson 3 — Building the Chat UI

Create a file called chatbot.html. This single file will be your entire chatbot — UI, logic, and API connection all in one.

Create a file called `chatbot.html`. This single file will be your entire chatbot — UI, logic, and API connection all in one.

Ask Claude to generate it for you with this prompt:

Build a single-file HTML chatbot UI that connects to the Anthropic Claude API.

Requirements:

Clean, modern dark-mode chat interface

Message bubbles: user on right (blue), assistant on left (gray)

Sticky input bar at the bottom with send button

Auto-scroll to latest message

Show a typing indicator while waiting for response

Keyboard shortcut: Enter to send, Shift+Enter for new line

API setup:

Use the Anthropic Messages API endpoint

Model: claude-opus-4-6

Include a SYSTEM_PROMPT constant at the top of the script that I can easily edit

Include an API_KEY constant at the top I can fill in

Maintain conversation history as an array and pass it on each request

Stream the response if possible, otherwise fetch the full response

System prompt to start with:

"You are a friendly and knowledgeable AI assistant. You give concise, helpful answers.

You're warm, direct, and occasionally clever. Never use filler phrases like

'Great question!' or 'Certainly!'. Just answer."

Style the interface like a premium product — not like a default browser form.

You'll get a complete, working chatbot in one file. Open it in your browser and it works immediately (after you paste in your API key).