Command Palette

Search for a command to run...

Hectal
Phase 6Intermediate7 of 16 in AI Frontend

Rendering AI Output Safely

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.

A model does not send a web page. It sends text, and that text is written by a machine that has read the whole internet, your documents, and whatever the user typed. This phase is about the moment that text reaches the screen: how to draw Markdown while it is still arriving, and how to do it without ever giving the text a chance to act.

You will build a small Markdown renderer by hand so that every rule is visible, then meet the real tools (react-markdown, Streamdown, DOMPurify, Shiki) and learn what each one does for you. You will handle code blocks and copy buttons, links and images that can leak data, very long answers, citations to sources, and the model's visible reasoning.

The phase ends by upgrading Mitra, the shop assistant, so its answers are formatted, safe and sourced. Everything here is defensive: the threats are described, detected and blocked, with harmless stand-ins instead of working attacks.

0/8 · 0%
8 topics ~5 h 27 code blocks & diagrams
Start with the first topic
1
6.1

Markdown While It Streams

Models write Markdown, and a stream delivers it a few characters at a time, so every update shows half a bold mark, half a link or half a code fence. You fix it by closing unfinished marks before drawing, and by drawing React elements instead of HTML strings.

44 min 4 code practice

2
6.2

Code Blocks

Code in an answer must be exact, readable on a phone, easy to copy and, if you like, coloured. A block also has three states while it streams (writing, ready, cut off), and the copy button and the colouring must respect them.

42 min 4 code practice

3
6.3

Model Output Is Untrusted Input

Whatever the model writes is built from text that other people can influence, so it must be treated like input from a stranger. Never hand it to the HTML parser, allow only safe link schemes, and draw only elements you chose.

38 min 4 code practice

4
6.4

Links and Images in Answers

A link can lie about where it goes, and an image makes the browser send a request the moment it is drawn. Check the host of every link and image against an allow-list, never draw a half-finished image, and put a content security policy underneath as a safety net.

39 min 4 code practice

5
6.5

Long Answers and Performance

Parsing and drawing the whole answer again on every token costs more as the answer grows. Keep finished blocks as they are, parse only the paragraph still being written, draw only the part of a long chat that is in view, and measure before you tune.

41 min 4 code practice

6
6.6

Sources and Citations

A cited answer lets the user check it. Sources travel in the stream as their own parts, the numbers in the text are matched to them, and every odd case (a number that points nowhere, a duplicate, an unsafe address, no sources at all) gets an honest display.

43 min 3 code practice

7
6.7

Showing Reasoning and Progress

Some models send their reasoning before the answer, and your server can send progress lines such as "Looking up your order…". Show them as a calm, collapsible aside, keep progress lines out of the saved message, clear them when work ends or fails, and hide reasoning when it should not be seen.

39 min 3 code practice

8
6.8

Build: Mitra Formats Its Answers

Mitra on the AI SDK now draws its answers as safe, streaming Markdown: healed marks, code blocks with a copy button that waits for the closing fence, links that are checked, and numbered sources the user can open.

30 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.

1

Show the Reply as Text

The button #show puts a model reply into #answer. The reply contains a tag with a harmless handler that adds 1 to window.bananas. Right now the page parses the reply as HTML and the handler runs.

Intermediate
2

Check a Link's Scheme

Type a URL into #url and press #check. #verdict must say safe or blocked.

Intermediate
3

Hide Half a Citation

While an answer streams, a citation marker such as [1] arrives one character at a time. Type text into #text; #shown must show it, except that a trailing [ or [ followed by digits (an unfinished marker) must be removed.

Intermediate
4

A Copy Button With Every Outcome

copyText(text, clipboard) must return copied when clipboard.writeText works, denied when it rejects with an error named NotAllowedError, failed for any other error, and unavailable when there is no clipboard object.

Intermediate
5

Build the Source List

Two buttons feed a list of source parts to renderSources(parts). #with sends five parts and #without sends none.

Advanced