Command Palette

Search for a command to run...

Hectal
Phase 15Advanced16 of 16 in AI Frontend

Interviews and Capstone

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.

This is the last phase. It does not teach a new tool. It ties the other fourteen together in the four ways you will be tested: interview questions about streaming, state, safety, tools and cost; a frontend system design round ("design a chat UI"); a code review of buggy AI frontend code; and a capstone where you assemble Mitra, the shop assistant, from its parts and watch it work.

Every interview answer names the topic that teaches the mechanism ("Topic 3.1"), so you can go back and practise it. Every claim the browser can show is backed by a live example that runs here, with a failure case next to the happy path, because interviewers like to ask "and what if it goes wrong?".

The capstone is built in five steps and ends with a review checklist. Three live examples carry the steps: the drawing pieces, the chat loop, and the whole app in one file with a scripted visitor who uses it, stops an answer, refuses a cancellation, approves one and runs into a daily limit. Use it as the checklist for your own project.

0/5 · 0%
5 topics ~3 h 15 code blocks & diagrams
Start with the first topic
1
15.1

Interview Questions: Streaming and State

The questions asked about streaming and state in an AI frontend interview, with answers that give the mechanism, an example, the edge case and the trade-off. Three live examples show the byte layer, a stop button and a race.

28 min 3 code practice

2
15.2

Frontend System Design: Design a Chat UI

A frontend system design round asks you to design a product, here a chat UI for an AI assistant, and to defend your choices. This topic walks the whole round in eight steps: requirements, protocol, state, rendering, failure, scale, safety and accessibility, with the decisions that can be shown running live.

28 min 3 code practice

3
15.3

Interview Questions: Safety, Tools and Cost

The questions asked about prompt injection, output handling, tool approvals, quotas and fallbacks, with answers that give the defence, where it must live, and how to prove it works. Three live examples show a hostile document, a link allow-list and a quota race.

27 min 3 code practice

4
15.4

Reviewing AI Frontend Code

A code review for an AI feature looks for a small set of bugs that work in every demo and fail in production: unescaped output, a missing abort, a stale closure, unbounded history. Each bug is shown running, with its symptom, and then the reviewed version.

27 min 3 code practice

5
15.5

Capstone: Mitra, Complete

Mitra, the shop assistant, assembled from the parts of the whole course: streaming with the AI SDK, stop, history, safe Markdown, a validated order card, a lookup tool and a cancel tool behind approval, a daily limit with a 429 path, and an accessible live region. Three live examples build it up, and the last is the whole app with a scripted visitor.

52 min 3 code practice

Practise this phase

Hands-on exercises: write the code, see your page live, and press Check to have it tested automatically.

1

Read Events Cut Across Packets

A stream arrives in four packets that ignore event boundaries (they are in the packets array). Each event is one line data: <text> followed by a blank line. Press #run and show the texts of all events, joined with one space, in #out. With these packets the answer is Hello Mitra.

Beginner
2

Only Safe Links

#links must list the links from the links array. A link whose address starts with https: or mailto: becomes a real <a> with rel="noopener noreferrer". Any other link (like javascript:) must not become an <a>: show only its label as plain text in the <li>.

Beginner
3

Ignore the Stale Answer

Two buttons ask Mitra a question: #slow and #fast. The slow question's answer is held on the server until #release is pressed. Right now, if you press #slow, then #fast, then #release, the slow answer overwrites the fast one in #answer.

Intermediate
4

Fix the Missing Words

A reviewer reported that Mitra's streamed answer shows only its last word. The button #ask starts the answer and the answer should end up in #answer as the whole sentence Returns are accepted within seven days.

Intermediate
5

Show the Daily Limit

This Mitra uses useChat. The server allows 2 questions and then answers 429 with a retry-after header of 90. Today the page shows nothing special when that happens.

Advanced
6

Build Mitra's Core

A capstone-sized build. The server is ready: /api/chat streams answers with streamText, has a tool lookupOrder, and refuses the fourth question with a 429 (retry-after: 3600). You write the whole page.

Advanced