The AI Frontend Roadmap

What a language model looks like from the browser: slow, streamed, sometimes wrong. The three hops of every AI feature, and your first streamed answer.

The chat request and response, every state of one request on screen, every HTTP failure and what to tell the user, timeouts and retries, and your own server route.

How a streamed answer really arrives: bytes, text, Server-Sent Events and the chunk format, then rendering and scrolling it smoothly. Mitra learns to stream.

Real users press Stop, lose their connection, hit rate limits and wait on slow models. Build the controls and the honest messages for each case.

A chat is more than a string: messages with ids and stages, a reducer, resent history, saved chats, edits and branches, and the races that corrupt them.

Phases 1 to 4 built the plumbing by hand. Now a real SDK does it: streamText on the server, useChat in the browser, message parts, errors, metadata and saved chats.

Turn a model's streamed Markdown into a safe, fast screen: half-finished marks, code blocks, untrusted links and images, long answers, sources and reasoning.

Make the model fill a form instead of writing a paragraph: JSON with a zod schema, partial objects while they stream, AI-filled forms, and screens built from a typed registry.

A model can ask your code to do things: look up an order, cancel it. Show every step, ask the person before anything that cannot be undone, and never trust the browser.

Defending an AI feature: untrusted text, prompt injection, unsafe output, data leaks through images and links, least privilege, refusals and privacy.

The details that make an AI feature feel good: waiting well, honest labels, feedback, a first screen, a real input box, screen readers, phones and other languages.

Let people attach files and screenshots, speak their question, and hear the answer: with limits, previews, permissions and every failure handled on screen.

Run small models on the user's own device: Transformers.js, WebGPU and WebAssembly, downloads and caches, workers, on-device search, and a safe fallback to the server.

Show what an answer costs, stop one user from emptying the budget, keep working when a provider is down, cache safely, measure without spying, and test every state.

When one question becomes ten steps over several minutes: plans, progress, leaving and returning, stopping, MCP tools, several agents on one screen, and a refund the user can audit.

Answer the questions that AI frontend interviews ask, design a chat UI on a whiteboard, review real buggy code, and assemble Mitra, the whole assistant, step by step.