Chatbot

Pixel-styled Next.js chat UI that sends your prompt to OpenAI and renders the reply with proper Markdown.

What it does

• Client (app/page.tsx) posts your message to /api/chat, keeps local state, and renders replies with react-markdown + remark-gfm so headings, lists, and emphasis display correctly.
• Server route (app/api/chat/route.ts) runs on the Edge runtime, calls openai.chat.completions.create with gpt-4o-mini, and returns the first message content.
• Styling: Tailwind dark theme, pixelated title via Press_Start_2P font, base fonts from Geist in app/layout.tsx.

Requirements

• Node 18+.
• OPENAI_API_KEY in your environment.

Run locally

1. Install deps: npm install
2. Export your key: export OPENAI_API_KEY=...
3. Start dev server: npm run dev and open http://localhost:3000

Build & deploy

• Build: npm run build (Next.js 16.1.1).
• Deploy: works on Vercel; ensure the OPENAI_API_KEY env var is set in your hosting environment.

Customize

• Change the model or system prompt in app/api/chat/route.ts.
• Tweak the Markdown styling or add more MD elements in the ReactMarkdown components map in app/page.tsx.