AI Frontend · build the screens people use AI through
Build AI features people can trust,
from your first streamed answer to tools, approvals and production.
Start from what an AI feature looks like from the browser: slow, streamed, sometimes wrong, and billed by the word. You need only some JavaScript and a little React, and every word is explained in plain English. You will build one product, a shop assistant called Mitra, phase by phase: streaming answers, stop and retry, conversation state, the Vercel AI SDK, safe Markdown, structured output and generative UI, tools with human approval, defences against prompt injection, product UX and accessibility, files and voice, AI that runs in the browser, cost limits, testing and agents. Every example is real browser code (and the real AI SDK) running against a scripted stand-in model in your browser, so it works with no key and prints the same thing every time, and every topic shows what happens when things go wrong, not only when they work.
- Phases
- 16
- Topics
- 116
- Hours
- 58
- Diagrams
- 117
- Exercises
- 724
By the end you can
What this course makes you able to do
- Stream a model's answer into a page, and handle every state: waiting, streaming, stopped, failed and cut off
- Manage conversation state, history and persistence without races, by hand and with the Vercel AI SDK
- Render AI output safely: streaming Markdown, code, links, sources and structured cards
- Build tool calling with human approval, and defend an AI feature against prompt injection and data leaks
- Design AI product UX that is fast, honest and accessible, including files, voice and on-device models
- Ship it: cost limits, fallbacks, metrics, tests with mock models, and frontend system design interviews
Beginner → Advanced
The curriculum, by level
Where should I start?
Pick a path for your goal
Complete beginner
You know some JavaScript and a little React, and nothing about AI. Start here: every word is explained.
Job-ready AI frontend developer
You can call an API and want to build the AI features teams ship today.
Senior and interviews
You build AI features already and want safety, on-device AI, agents and system design depth.
Helpful before this course