Building an AI Product — Complete Tutorial Index
Building an AI Product — Complete Tutorial Index
Hey everyone! Welcome to the AI series! 🙏
This isn't a "what is ChatGPT" series. This is the engineering series: how you actually bolt an AI assistant onto a real product — streaming its replies, letting it change the UI, giving it tools, giving it a voice, and stopping it from drowning in its own tool list.
Everything here is built on a real app (Strakly AI Chat), so every episode ships working code, not slideware.
┌─────────────────────────────────────────────────────────────────┐ │ BUILDING AN AI PRODUCT — ROADMAP │ ├─────────────────────────────────────────────────────────────────┤ │ │ │ SEASON 1 — STREAMING & THE UI (Episodes 01 – 03) │ │ SEASON 2 — AGENTS & TOOLS (Episodes 04 – 06) │ │ DEEP DIVE — RAG DESIGN PATTERNS (Bonus episode) │ │ │ └─────────────────────────────────────────────────────────────────┘
HOW EVERY EPISODE IS TAUGHT:
────────────────────────────
The problem → ASCII architecture → The code
→ The gotcha → What it costs → Interview Q&A
Legend: ✅ = ready to read 🎉 All 7 episodes are live!
SEASON 1 — Streaming & The UI
"An AI that makes you wait 8 seconds for a wall of text has already lost."
✅ Episode 01 — SSE (Server-Sent Events) in Strakly AI Chat → Read Episode
What you'll learn: ────────────────── ✔ Why AI chat streams token-by-token (and why users demand it) ✔ SSE vs WebSockets vs polling — picking the right one ✔ The EventSource API on the client ✔ Streaming from Express on the server ✔ Handling reconnects, errors and cancellation Key Concept: SSE is one-way streaming — perfect for "server talks, client listens".
✅ Episode 02 — AI Theme Change via Chat (SSE Actions) → Read Episode
What you'll learn: ────────────────── ✔ Making the AI DO things, not just say things ✔ Action events over SSE — a second channel alongside the text ✔ "Switch to dark mode" → the UI actually switches ✔ Keeping the model's output and the app's state in sync Key Concept: Stream actions, not just tokens. That's when chat becomes a UI.
✅ Episode 03 — AI Page Navigation via Chat → Read Episode
What you'll learn: ────────────────── ✔ "Take me to my orders" → the router actually navigates ✔ Mapping intents to routes safely ✔ Guarding against hallucinated routes ✔ Combining navigation with the action-stream from Episode 02 Key Concept: The chatbox becomes a command bar for your whole app.
SEASON 2 — Agents & Tools
"Now we stop chatting and start doing real work."
✅ Episode 04 — AI Email Processing Agent (LangChain + Gmail + Express) → Read Episode
What you'll learn: ────────────────── ✔ A real agent project, end to end ✔ Wiring LangChain to the Gmail API ✔ Reading, classifying and replying to email automatically ✔ Prompt design for reliable classification ✔ Where agents go wrong (and how to keep a human in the loop) Key Concept: An agent = an LLM + tools + a loop. That's the whole idea.
✅ Episode 05 — Siri-like Voice Assistant for AI Chat → Read Episode
What you'll learn: ────────────────── ✔ Speech-to-text in the browser (Web Speech API) ✔ Text-to-speech for the reply ✔ Barge-in — letting the user interrupt the assistant ✔ Streaming audio alongside streaming text ✔ The latency budget of a voice assistant Key Concept: Voice is just another stream — the hard part is the interruptions.
✅ Episode 06 — Dynamic Tool Selection (Solving the 128 Tool Limit) → Read Episode
What you'll learn: ────────────────── ✔ Why models cap out at ~128 tools — and what breaks first ✔ Tool bloat: how too many tools makes the model DUMBER ✔ Retrieving the right tools per request (tools as a search problem) ✔ Embedding tool descriptions and ranking them ✔ Measuring whether your selection actually improved accuracy Key Concept: Don't give the model every tool. Give it the RIGHT tools.
DEEP DIVE — RAG
"The model doesn't know your data. RAG is how you tell it."
✅ Deep Dive — RAG Design Patterns: The Complete Guide (2026) → Read Deep Dive
What you'll learn: ────────────────── ✔ Retrieval-Augmented Generation — the whole pipeline, drawn ✔ Chunking strategies (and why bad chunking ruins everything) ✔ Embeddings & vector databases ✔ Naive RAG vs Advanced RAG vs Agentic RAG ✔ Re-ranking, hybrid search, query rewriting ✔ Evaluating a RAG system — how you know it's actually working Key Concept: RAG = search + prompt. Most "AI problems" are really search problems.
Topic Map
| Topic | Episode | Status |
|---|---|---|
| SSE streaming, EventSource | 01 | ✅ Done |
| AI-driven UI actions (theme, navigation) | 02 – 03 | ✅ Done |
| Agents, LangChain, Gmail automation | 04 | ✅ Done |
| Voice assistant (STT + TTS) | 05 | ✅ Done |
| Tool selection & the 128-tool limit | 06 | ✅ Done |
| RAG, embeddings, vector search | Deep Dive | ✅ Done |
How to Use This Series
1. Start with Episode 01 — every later feature rides on that SSE stream. 2. Episodes 02 and 03 are the same trick applied twice. Read 02 properly and 03 will take you ten minutes. 3. If you only read one: make it the RAG Deep Dive. It's the topic every AI interview asks about. 4. Build along. These episodes ship real code for a reason.
Keep building, keep shipping! See you in the episodes!