AI Hackathon Chatbot

Built during a hackathon, this goes well beyond a basic chat interface. It supports multiple AI providers, a persistent artifact workspace (think Claude Artifacts or ChatGPT Canvas), real-time streaming, and a full conversation history backed by a database.

What it does

• Switch between OpenAI, Azure OpenAI, and Fireworks AI per session
• Responses stream token by token in real time via the Vercel AI SDK
• Side-by-side chat with an editable artifact pane for text, code, images, and spreadsheets
• Write and run Python directly inside the chat
• Conversations saved to NeonDB through Drizzle ORM
• File attachments via Vercel Blob
• Custom session auth with bcrypt

Stack

Layer	Tech
Framework	Next.js (App Router)
Language	TypeScript
AI SDK	Vercel AI SDK
LLM Providers	OpenAI, Azure OpenAI, Fireworks
Database	NeonDB (serverless Postgres)
ORM	Drizzle ORM
File Storage	Vercel Blob
Code Editor	CodeMirror 6
Styling	Tailwind CSS, Radix UI, Framer Motion

How streaming works

Browser --(stream)--> Next.js API Route
                              |
                        Vercel AI SDK
                              |
                  +-----------+-----------+
                  |           |           |
               OpenAI       Azure     Fireworks
                              |
                        Drizzle ORM
                              |
                           NeonDB

Tokens go straight from the provider to the client with no buffering in between.

Adding a new artifact type

Each artifact type lives in its own folder under artifacts/ with two files: a client.tsx for the React UI and a server.ts for handling the AI stream. That's the whole interface.