Command Palette

Search for a command to run...

Hectal
Phase 8Advanced9 of 16 in AI Frontend

Tools and Human Approval

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.

Until now Mitra only talked. In this phase it starts to act. A model cannot look at your orders table or cancel an order by itself. What it can do is write a small request, "please run lookupOrder with ORD-1042", and your code decides whether to run it. That request-and-answer cycle is called tool calling. This phase is about the frontend half of it: what the screen shows while a tool runs, how a tool call arrives in the browser, and how to put a person in charge of anything that matters.

You will learn the real shapes the Vercel AI SDK uses: how to define a tool, the states a tool call moves through (input-streaming, input-available, output-available, output-error, and the approval states), tools that run in the browser, and human approval, where the server pauses a tool until the person says yes. You will also see what goes wrong: bad input from the model, a tool that throws, a loop that never ends, an approval nobody answers, a browser that lies.

Everything runs live against a scripted stand-in model, with the real AI SDK. By the end, Mitra can look up an order for anyone, and cancel one only after the customer has read exactly what will happen and pressed Yes. How a model decides which tool to call is taught in /llm-engineering. Hostile text that tries to steer the model is the subject of Phase 9, and Phase 8 already shows the defence that does not depend on the model behaving: the approval gate.

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

Tool Calling from the UI's Side

A tool call is a loop: the model asks for an action by name, your code runs it, and the result goes back to the model, which then writes the answer. The model never runs anything itself, and the screen has to show each step of the loop.

27 min 3 code practice

2
8.2

Defining Tools

A tool is a name, a description, an input schema and an execute function. The description and schema are what the model sees, the schema also checks what the model sends back, and bad input or an unknown tool name becomes an error the model is told about, not a crash.

23 min 2 code practice

3
8.3

Tool Parts and Their States

Each tool call in a message is a part whose state moves from input-streaming to input-available to output-available or output-error. With approval, two more states appear. Your component draws one thing per state, and must never read an output that is not there yet.

26 min 2 code practice

4
8.4

Designing Tool UI

Tool activity needs its own small design: a progress line while it runs, a result card when it is done, details tucked away for the curious, and an error message that says what to do next. Several tools in one answer run side by side and finish in any order.

26 min 2 code practice

5
8.5

Client-Side Tools

Some actions can only happen in the browser: opening a panel, reading the clipboard, asking for the user's location. A tool declared without execute is handed to the browser, which runs it, reports the result with addToolOutput, and the chat is sent again so the model can continue.

25 min 2 code practice

6
8.6

Human Approval

For actions that matter, the server pauses the tool call and asks the person first. The tool part enters approval-requested, the card shows exactly what will happen, and the answer (yes or no, with a reason) is sent back. If the answer is no, the tool never runs and the model is told why.

32 min 3 code practice

7
8.7

Multi-Step Loops

An answer can take several model calls: each one is a step. stopWhen sets the most steps allowed, the UI can show each step as it happens, a model that keeps asking for tools must be stopped by a limit, and every step re-sends the conversation, so cost grows with each one.

26 min 3 code practice

8
8.8

Tool Safety in the UI

A tool is a door the model can open, so the safe design is a small door: give each request only the tools it needs, check every call on the server, ask a person before anything destructive, show exactly what will happen, and never run actions because of text the assistant read.

29 min 3 code practice

9
8.9

Build: Mitra Takes Actions

Mitra gets two tools. It looks up an order and shows it as a card, and it cancels an order only after the customer reads exactly what will happen and presses Yes. Failures, refusals and double clicks are handled, and the server checks everything again.

29 min 1 code practice

Practise this phase

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