What you'll build
A complete and functional web chat application with artificial intelligence. You'll have a modern interface with conversation bubbles, a message input field, a "typing..." indicator, and responses rendered in Markdown. Your terminal chatbot will transform into something anyone can use from their browser.
Why a web interface?
| Terminal | Web UI |
|---|---|
| Only you can use it | Anyone with the link |
| Plain text | Nice design, markdown |
| One conversation | Multiple chats |
| Copy/paste is hard | Click to copy |
Step 1: Choose your API
Use the same API from your previous chatbot:
| API | Environment variable |
|---|---|
| Gemini | GEMINI_API_KEY |
| Claude | ANTHROPIC_API_KEY |
| OpenAI | OPENAI_API_KEY |
| Ollama | (none, runs local) |
Step 2: Ask an AI to generate the app
Open Google AI Studio, ChatGPT, or Claude.
Copy and paste this prompt (change the API to your choice):
I need an AI chat application using Next.js and React that:
- Uses the Gemini API (GEMINI_API_KEY variable)
- Has a modern interface with Tailwind CSS
- Shows message history in bubbles
- Has a fixed input at the bottom
- Shows a "typing..." indicator while waiting
- Renders markdown in responses
- Is responsive (works on mobile)
Give me:
1. Commands to create the project
2. Code for each file
3. How to run it
💡 Tip: If you prefer another API, change "Gemini" to "Claude", "OpenAI", or "Ollama".
Step 3: Follow the instructions
The AI will give you something like:
npx create-next-app@latest my-chat --typescript --tailwind
cd my-chat
npm install @google/generative-ai react-markdown
Then it will give you code for several files. Create them in your editor.
Step 4: Configure your API key
# macOS/Linux
export GEMINI_API_KEY="your-key-here"
# Windows PowerShell
$env:GEMINI_API_KEY="your-key-here"
Step 5: Run the app
npm run dev
Did it work?
You should see something like:
- Input to write messages
- Chat bubbles (you vs AI)
- Responses with markdown formatting
If something failed
| Error | Cause | Solution |
|---|---|---|
Module not found | Missing dependency | Run npm install again |
API key not valid | Key misconfigured | Check the export in same terminal |
| Blank screen | React error | Check browser console (F12) |
CORS error | Calling from frontend | API must be in a Next.js API route |
| Markdown not rendering | Missing react-markdown | npm install react-markdown |
| Styles not working | Tailwind misconfigured | Check tailwind.config.js |
Optional improvements
Ask the AI again:
- "Add a button to copy responses"
- "Add dark mode"
- "Save history to localStorage"
- "Add a model selector"
Each improvement is a new prompt. The AI updates the code.
Basic architecture
my-chat/
├── app/
│ ├── page.tsx # Chat UI
│ └── api/
│ └── chat/
│ └── route.ts # Endpoint that talks to the AI
├── components/
│ └── ChatMessage.tsx # Bubble component
└── package.json
💡 Important: API calls should be made from the server (route.ts), not from the client. This protects your API key.
What did you learn?
| Before (Terminal) | Now (Web) |
|---|---|
Node's readline | React components |
console.log | UI rendering |
| Local process | Web server |
The flow is still:
- User types
- App sends to API
- API responds
- App shows response
Next step
→ Public AI Chat with Auth — Put it on the internet with login