Challenge
Make an AI assistant feel alive and trustworthy: stream responses incrementally instead of dumping a block of text, ground answers in real portfolio content, and support spoken replies in two languages — all on self-hosted infrastructure.
Objective
Deliver a low-latency, streaming chat experience with bilingual voice output and a playful retro persona, served from a self-hosted VPS.
Results
A live, production assistant that streams answers token-by-token, renders Markdown, and reads replies aloud in English and Arabic — deployed via Docker behind nginx.
Overview
Clippy is a conversational AI assistant built into this portfolio. It answers visitors' questions about my experience, skills, and projects, grounded in the site's own content. Responses stream token-by-token over Server-Sent Events for a live "thinking out loud" feel, render Markdown inline, and can be played back as speech in both English and Arabic.
Scope
Designed and built the full chatbot: a streaming Next.js API route that proxies an OpenAI-compatible LLM, an SSE parser and incremental React renderer, a bilingual text-to-speech layer (Hakim API) with playback controls, and an animated retro Clippy character. Self-hosted via Docker behind nginx.
Tech Stack
- Languages:
- TypeScript
- Frontend:
- Next.js (App Router), React, Framer Motion, Tailwind CSS
- Backend:
- Next.js API routes (Edge/Node), Server-Sent Events
- Databases:
- N/A — grounded in typed site content
- Developer Tools:
- OpenAI-compatible LLM API, Hakim TTS API, Docker, nginx
Get In Touch
Interested in working together? Let's connect.