Command Palette

Search for a command to run...

Hectal
Phase 14Advanced15 of 16 in AI Frontend

Agents in the UI

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.

Until now one question meant one answer, even when a tool ran in the middle. An agent is different: it plans, calls tool after tool, reads each result, changes its mind and keeps going until the job is done. One request can mean ten model calls and several minutes. The screen has to show what is happening, let the user leave and come back, and keep the user in charge.

This phase uses the real Vercel AI SDK: ToolLoopAgent, createAgentUIStreamResponse, step and tool parts, data parts for progress, and resumable streams. You will show a plan and its steps, survive a closed tab, stop a run at step three, take a corrected instruction, read what the Model Context Protocol (MCP) is from a frontend's point of view, and draw several agents without drowning the user in noise.

Every example runs the real SDK against a scripted stand-in model, so nothing here needs a key, and each one prints the same thing every time. By the end, Mitra can handle a multi-step refund: a plan, live progress, an approval before money moves, and a receipt the user can audit.

0/6 · 0%
6 topics ~4 h 21 code blocks & diagrams
Start with the first topic
1
14.1

What Changes with Agents

An agent answers one request with many steps: model calls, tool calls and decisions, over seconds or minutes. The screen must show a plan, the current step and what each step did, say plainly when a step fails or the loop is cut off at its limit, and earn trust by showing real actions instead of vague words.

31 min 3 code practice

2
14.2

Long-Running Work

A run that lasts minutes must not depend on one browser connection. The run lives on the server, the screen is rebuilt from server state when the user comes back, a resumable stream rejoins a live run, and a notification (found by feature detection) tells people who left. Finished and failed runs need their own return screens.

35 min 4 code practice

3
14.3

Interrupting and Steering

The user must be able to stop an agent, refuse one step, change the instruction half way, and undo what it did. Stop is a request that the server may only partly honour, so the screen reports what really happened from a server ledger. A correction after a stop needs the half-finished tool calls cleaned from the history.

38 min 4 code practice

4
14.4

MCP from a Frontend's View

The Model Context Protocol (MCP) is an open standard that lets an AI app connect to outside servers that offer tools, resources and prompts. A frontend never speaks MCP itself, but it must show which tool came from which server, ask permission with the real arguments, and cope with a server that is slow, down or changing.

40 min 5 code practice

5
14.5

Showing Several Agents

When an orchestrating agent hands work to specialist agents, one request holds a tree of steps. The screen must say who said what, nest the specialists' steps under the call that started them, bubble a failure up from the branch it happened in, and collapse the noise so the user reads three lines instead of thirty.

33 min 3 code practice

6
14.6

Build: Mitra Handles a Multi-Step Refund

Mitra learns a real multi-step job: refund an order. A server-owned plan shows progress, reads run on their own, the money step waits for the user's approval, a Stop button works, ineligible orders end early, and the user gets a receipt and a list of what happened that they can audit.

38 min 2 code practice

Practise this phase

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

1

List the Steps of a Run

The route /api/agent runs an agent with three tools. When #start is clicked, send the message Refund ORD-1042.

Intermediate
2

Show Progress from a Data Part

The route sends a plan as a data-plan part and updates it after every step. Its data is a list of { label, done } objects. When #start is clicked, send Refund ORD-1042.

Intermediate
3

Say Why the Run Stopped

Two buttons start two runs: #normal (the agent finishes with a sentence) and #loop (the agent keeps calling a tool until its limit of 3 steps). The starter already sends which in the request body.

Advanced
4

Stop a Run Half Way

A run has three steps of 120 ms. The server sends a data-step part ({ id, state: "done" }) when each step finishes. When #start is clicked, send Refund ORD-1042.

Advanced
5

Ask Before the Refund

The refund tool waits for the user's approval. Click #start to send Refund ORD-1042. When the tool part is in the state approval-requested, show a card #card with the server's reason (part.approval.requestReason) and two buttons, #approve and #deny.

Advanced