AI Chatbot — Vibe Coded

A production-ready, full-stack AI chatbot powered by Anthropic Claude. Features a modern streaming chat interface (ChatGPT-style) and a scalable Node.js backend with Server-Sent Events (SSE).

Built as an AI Engineering Mentor — specialized in LLMs, RAG, agentic AI, prompt engineering, and cloud AI platforms.

---

Features

Frontend

• Real-time token-by-token streaming (ChatGPT / Claude-style UX)
• Dark-themed, responsive chat interface
• Auto-scrolling conversation with smooth animations
• Streaming cursor indicator while the assistant generates
• Empty state, loading states, and graceful error handling
• Accessible keyboard navigation and screen-reader support

Backend

• POST /api/chat — SSE streaming endpoint
• Anthropic Claude integration (claude-sonnet-4-20250514)
• Production-ready architecture: Route → Controller → Service
• Request validation with structured error responses
• Client disconnect handling and stream cancellation
• Configurable AI Engineering Mentor system prompt
• Extensible design for tool calling, RAG, auth, and multi-provider support

---

Project Structure

ai-chatbot/
├── api/                        # Vercel serverless functions
│   ├── chat.ts                 # POST /api/chat (SSE streaming)
│   └── health.ts               # GET /api/health
│
├── backend/                    # Express server (local dev)
│   ├── src/
│   │   ├── app.ts              # Express app setup
│   │   ├── server.ts           # Server entry point
│   │   ├── config/             # Env, model, system prompt
│   │   ├── controllers/        # HTTP request handlers
│   │   ├── services/           # Anthropic Claude service
│   │   ├── routes/             # API routes
│   │   ├── middleware/         # Error handling
│   │   ├── utils/              # SSE, logging, validation
│   │   ├── types/              # TypeScript interfaces
│   │   └── errors/             # Custom error classes
│   ├── .env.example
│   ├── package.json
│   └── tsconfig.json
│
├── src/                        # React frontend
│   ├── components/Chat/        # Chat UI components
│   ├── services/               # Streaming fetch client
│   ├── hooks/                  # useAutoScroll
│   ├── utils/                  # SSE parser, message helpers
│   ├── types/                  # Message interfaces
│   └── config/                 # API configuration
│
├── public/                     # Static assets
├── index.html
├── vercel.json                 # Vercel deployment config
├── vite.config.ts              # Vite + API proxy (local dev)
├── tailwind.config.js
└── package.json

---

Prerequisites

• Node.js 20 or later
• npm 9+
• Anthropic API key — Get one here

---

Getting Started

1. Clone the repository

git clone https://github.com/StagMindVRithul/AI_Chatbot_Vibe_Coded.git
cd AI_Chatbot_Vibe_Coded

2. Configure the backend

cd backend
cp .env.example .env

Edit backend/.env and set your API key:

ANTHROPIC_API_KEY=your_anthropic_api_key_here
PORT=3001
NODE_ENV=development

3. Install dependencies

# Backend
cd backend
npm install

# Frontend (from project root)
cd ..
npm install

4. Run in development

Open two terminals:

Terminal 1 — Backend

cd backend
npm run dev

Terminal 2 — Frontend

npm run dev

Open http://localhost:5173 in your browser. The Vite dev server proxies /api requests to the backend on port 3001.

Alternative: run both with one command

npm run dev:full

---

Deploy on Vercel (recommended)

The project is configured for one-click Vercel deployment — frontend and API on the same domain.

Route	Handler
/	React app (static)
POST /api/chat	Serverless SSE streaming
GET /api/health	Health check

1. Push to GitHub

Ensure your repo is on GitHub (already configured).

2. Import to Vercel

1. Go to vercel.com/new
2. Import StagMindVRithul/AI_Chatbot_Vibe_Coded
3. Framework preset: Vite (auto-detected)
4. Build command: npm run build
5. Output directory: dist

3. Add environment variables

In Vercel → Project → Settings → Environment Variables, add:

Variable	Example	Required
AZURE_ANTHROPIC_RESOURCE	polycode-solutions	Yes (Azure)
AZURE_ANTHROPIC_API_KEY	your-key	Yes (Azure)
AZURE_ANTHROPIC_MODEL	your-deployment-name	Yes (Azure)

Or for direct Anthropic API (instead of Azure):

Variable	Required
ANTHROPIC_API_KEY	Yes
ANTHROPIC_MODEL	No

Get Azure values from Azure AI Foundry → Build → Models → your deployment → Details tab.

4. Deploy

Click Deploy. Vercel builds the frontend and deploys /api/chat as a serverless function.

5. Test

curl -N -X POST https://your-app.vercel.app/api/chat \
  -H "Content-Type: application/json" \
  -d '{"messages":[{"role":"user","content":"Hello"}]}'

Local Vercel preview

Test the production setup locally (frontend + serverless API):

npm install -g vercel   # once
cp .env.example .env    # add your keys
npm run dev:vercel

Vercel notes

• Streaming timeout: api/chat is configured for 60s (maxDuration). Hobby plan may limit this; Pro recommended for long responses.
• Secrets: Never prefix API keys with VITE_ — they must stay server-side only.
• Same-origin API: Frontend calls /api/chat directly — no CORS or VITE_API_URL needed on Vercel.

---

API Reference

POST /api/chat

Streams an AI response using Server-Sent Events.

Request body:

{
  "messages": [
    { "role": "user", "content": "What is RAG?" }
  ],
  "systemPrompt": "Optional override for the default system prompt"
}

SSE response stream:

data: {"chunk":"Retrieval"}

data: {"chunk":"-Augmented Generation"}

data: [DONE]

Error (before streaming starts):

{
  "error": {
    "message": "Validation error message",
    "status": 400
  }
}

GET /health

Returns { "status": "ok" }.

---

Scripts

Frontend (root)

Command	Description
npm run dev	Start Vite dev server
npm run build	Type-check and build for production
npm run preview	Preview production build
npm run lint	Run oxlint

Backend (backend/)

Command	Description
npm run dev	Start with hot reload (tsx)
npm run build	Compile TypeScript to dist/
npm start	Run compiled production server
npm run typecheck	Type-check without emitting

---

Architecture

Backend — Route → Controller → Service

POST /api/chat
      │
      ▼
  chat.routes.ts        # HTTP wiring
      │
      ▼
  chat.controller.ts    # Validation, SSE piping, abort handling
      │
      ▼
  anthropic.service.ts  # client.messages.stream()
      │
      ▼
  Anthropic Claude API

Frontend — Streaming flow

User sends message
      │
      ▼
  Chat.tsx              # State: messages, isStreaming
      │
      ▼
  streamChat.ts         # fetch + ReadableStream reader
      │
      ▼
  sseParser.ts          # Parse data: {"chunk":"..."} events
      │
      ▼
  appendChunkToMessage  # Incremental React state update
      │
      ▼
  ChatMessageBubble     # Renders with streaming cursor

SSE chunk path

Claude API → Anthropic SDK → Service (onChunk)
  → Controller (writeSseChunk) → Express res.write()
  → Browser ReadableStream → TextDecoder → SseParser
  → React setState → UI re-render

---

System Prompt

The backend ships with a default AI Engineering Mentor system prompt (backend/src/config/systemPrompt.ts). It is applied to every request unless overridden via the systemPrompt field in the request body.

The assistant specializes in LLMs, RAG, agentic AI, prompt engineering, LangChain, LangGraph, MCP, MLOps, vector databases, and cloud AI platforms (Azure OpenAI, AWS Bedrock, Anthropic, Hugging Face).

---

Environment Variables

Azure Anthropic (recommended)

Variable	Required	Description
AZURE_ANTHROPIC_RESOURCE	Yes*	Resource name (e.g. polycode-solutions)
AZURE_ANTHROPIC_API_KEY	Yes	API key from deployment Details tab
AZURE_ANTHROPIC_MODEL	Yes	Deployment name from Azure portal
AZURE_ANTHROPIC_ENDPOINT	Alt*	Full URL instead of AZURE_ANTHROPIC_RESOURCE

Direct Anthropic API

Variable	Required	Description
ANTHROPIC_API_KEY	Yes*	Anthropic API key
ANTHROPIC_MODEL	No	Model ID (default: claude-sonnet-4-20250514)

* Azure vars take priority. If set, Anthropic vars are ignored.

Local Express server only

Variable	Default	Description
PORT	3001	Backend port
NODE_ENV	development	Environment

Never commit .env files. Copy .env.example as a template.

---

Roadmap

Features architected for but not yet implemented:

• Markdown rendering and syntax highlighting
• Tool calling and MCP server integration
• RAG with vector database citations
• Conversation persistence and multi-chat sessions
• Streaming cancellation (AbortController on frontend)
• Authentication and rate limiting
• Multi-model provider support
• Observability and structured logging

---

Tech Stack

Layer	Technologies
Frontend	React 19, TypeScript 5, Tailwind CSS 3, Vite 8
Backend	Node.js 20, Express 4, TypeScript 5
AI	Anthropic Claude (claude-sonnet-4-20250514)
Streaming	Server-Sent Events (SSE), ReadableStream, TextDecoder

---

License

This project is private. All rights reserved.

---

Author

StagMindVRithul — GitHub