AI Chat — FE-06 Streaming Chat

A production-quality streaming chat interface built with Next.js 14, Vercel AI SDK, and Llama 3.1 via OpenRouter.

Live Demo

🔗 https://fe06-streaming-chat.vercel.app/

What it does

• Streams AI responses token by token (no waiting for full response)
• NPM package lookup tool — ask about any package, get a rich card
• Thinking indicator → streamed text → success/error states
• Smart auto-scroll (releases when you scroll up)
• Stop button that preserves partial response
• Error handling with retry — network failures show a retry button
• Empty state with example prompts (click to fill)
• Mobile-friendly at 375px
• Rate limited: 10 requests per minute per IP

Screenshots

Chat interface

The main chat page with the empty state and example prompts.

NPM package card

Ask "tell me about zustand" — the AI calls the npm registry and returns a rich card with version, downloads, license, and links.

Error state

Network failures show a designed error with a retry button.

Run locally

Prerequisites

• Node.js 18+
• An OpenRouter API key (free at openrouter.ai)

Setup

git clone https://github.com/nij22370/fe06-streaming-chat.git
cd fe06-streaming-chat
npm install
cp .env.example .env.local

Edit .env.local and add your key:

OPENROUTER_API_KEY=sk-or-v1-your-key-here

npm run dev

Open http://localhost:3000

Environment variables Variable Required Description OPENROUTER_API_KEY ✅ Yes Your OpenRouter API key. Get one free at openrouter.ai

Architecture src/ ├── app/ │ ├── api/chat/route.ts # Server route — streams AI, rate limits │ ├── chat/page.tsx # Main chat UI (client component) │ ├── error.tsx # Root error boundary │ └── chat/error.tsx # Chat route error boundary ├── components/ │ ├── ChatMessage.tsx # Renders user/assistant messages │ ├── ThinkingIndicator.tsx # Animated dots while AI thinks │ ├── StopButton.tsx # Stops streaming mid-response │ ├── ErrorMessage.tsx # Error state with retry │ ├── EmptyState.tsx # Empty chat with example prompts │ ├── MessageSkeleton.tsx # Loading skeleton │ └── tools/ │ ├── NpmPackageCard.tsx # Renders npm package data as card │ └── ToolStates.tsx # 4 tool lifecycle state components ├── hooks/ │ └── useStreamingChat.ts # Chat state, auto-scroll, retry logic ├── lib/ │ └── ai-config.ts # Model config (single source of truth) └── tools/ └── npmPackage.ts # getNpmPackageInfo tool definition Key decisions

Why OpenRouter instead of Anthropic/OpenAI directly? OpenRouter provides a free tier with access to Llama 3.1 8B — no credit card required, sufficient for a portfolio project. The AI SDK abstracts the provider so switching is one line.

Why Vercel AI SDK instead of raw fetch? The SDK handles the SSE stream protocol, provides the useChat hook with built-in state management, and makes tool calling straightforward. It would take ~200 lines to replicate manually.

Why in-memory rate limiting instead of Redis? For a portfolio project, in-memory rate limiting (10 req/min/IP) is sufficient to prevent accidental drain. It resets on server restart, which is acceptable for this use case. A production app would use Upstash Redis with the @upstash/ratelimit library.

Why Llama 3.1 8B for the npm tool? The npm tool requires structured JSON output from the model. Llama 3.1 8B handles tool calling reliably and is fast enough for a demo. The model occasionally hallucinates package details in text — the tool grounds it with real registry data.

How AI tools built this

This project was built during the FlyRank AI Fluency internship using Claude (Sonnet 4.6) as the primary coding assistant.

What AI did:

Scaffolded all component files from detailed prompts Wrote the GLSL shader (FE-AA3 companion project) Generated all test files (Vitest + Playwright) Debugged TypeScript errors from CI output Wrote the Zod schema and execute function for the npm tool

What I did:

Designed the architecture (component split, hook structure) Wrote and iterated on every prompt — specificity mattered Made all stack decisions (OpenRouter vs Anthropic, AI SDK vs raw) Ran every test manually and verified behavior Fixed the rate limiting logic (AI got the window reset wrong) Reviewed and understood every file before merging Diagnosed the CI lockfile sync issue and fixed it

Honest assessment: AI accelerated the boilerplate dramatically — scaffolding components that would take 30 minutes took 2. But the debugging, architectural decisions, and integration work were mine. AI consistently got the "shape" right and the "details" wrong — good first drafts, not finished code.

Tech stack Layer Technology Framework Next.js 14 (App Router) AI SDK Vercel AI SDK (streamText + useChat) Model Llama 3.1 8B via OpenRouter Styling Tailwind CSS Testing Vitest + React Testing Library + Playwright CI GitHub Actions Deployment Vercel Tests bash npm test # unit + component tests (27 tests) npm run test:e2e # Playwright end-to-end (6 tests)

CI runs on every push to main via GitHub Actions.

License

MIT