What this lesson covers.
This module is one of 42 in the curriculum. Below is the canonical interactive lesson — tabs, cards, and diagrams from the source repo, rendered inside the course shell. There is no audio narration for this module - it ships as text + interactive lesson only.
If you prefer to read first and play with the demos after, the interactive lesson sits below this section. If you'd rather hear it narrated while you scroll, hit play on the sticky audio bar at the top — or just let it autoplay.
The lesson itself.
Consumer AI Interfaces
How chat portals evolved from simple text boxes natively into fully functioning Interactive IDEs.
Claude absolutely pioneered the "Artifact" UI model. Instead of dumping 500 lines of raw React code into a chat log, it seamlessly generates a specialized right-side panel where it physically executes and renders the HTML/React code live visually.
To combat Claude, OpenAI rolled out the "Canvas" interface. By hijacking the rightmost panel, users can highlight localized snippets of massive code structures and tell the AI to specifically alter only that variable natively within the document.
Leveraging the Google Docs and Workspace monopolies, Gemini embeds completely natively. Developers and writers can execute models iteratively inside live documents without ever opening a standalone "chat window" application.
Try it: chat ui streaming.
Token-by-token streaming, tool calls with results, throughput counter, adjustable speed - the chat UX patterns you have used a thousand times.
What to read next.
Use the pager below to move sequentially through the curriculum, or jump to any module from the course index. Each track has a "Prereq: ↑ foundation" callout so you can backfill anything that wasn't clear.