Every live example, in one place.
Standalone, full-page demos that exercise the renderer end to end — tools, streaming, multi-page routing, JavaScript interactions, and the rich-layout patterns the LLM should reach for. Each card opens a focused page with editable source.
How to use this page
Filter the catalog by tag (LLM streaming, JavaScript, routing, patterns…) and pop the demo into a new tab. Each demo shows the full Streaming UI Script source, the tools wiring, and the rendered UI — so you can copy any pattern straight into your own app.
All live examples
Tap a tag to narrow the catalog. Reset to "All" to see every demo.
Chat bot
OpenAI-powered chat that streams replies straight into the renderer. Bring your own API key.
Open demo →Tools integration
Read, write, and poll patterns wired to in-page setTools() handlers.
External data
Live GitHub repository explorer powered by a single tool function.
Open demo →Support agent
AI triage workspace: pick a ticket, the agent suggests priority, routing, and a draft reply.
Open demo →Analytics assistant
Type a question about revenue, signups, or churn — the renderer composes the right chart, KPIs, and breakdown.
Open demo →Todo app (localStorage)
A full reactive todo list with filters, keyboard shortcut, and localStorage persistence — wired via Query, Mutation, and a single Script.
Pomodoro timer
Phases, audio chime, and optional notifications. The script owns the countdown; the host owns the policy.
Open demo →Stopwatch + laps
Sub-second precision via requestAnimationFrame, lap splits, and proper teardown when the timer pauses.
Multi-page routing
A four-page app driven by Routes + NavLink + @Navigate. Deep links, browser back/forward, and $route reactivity.
App workspace
A full SaaS workspace with sticky Sidebar, topbar, MetricGrid, status pips, timeline, and a DescriptionList summary — all from one program.
Project dashboard
A full engineering program dashboard: banner, PageHeader, KPI strip, kanban board, activity timeline — every section is one pattern.
Marketing landing
Hero, feature grid, pricing tiers, testimonials, team line-up, FAQ, and a closing banner — generated from one program.
Open demo →Team directory
Profile cards, avatar groups, search-with-pagination, an empty state, and a slide-in Sheet for full member detail.
Settings app
Tabs, Switch, ToggleGroup, Progress, Kbd, and a danger-zone confirmation Sheet.
Product detail
An end-to-end product page — Cover hero, MediaCard related items, Rating, ProgressRing, Stats, and review chat bubbles.
Inbox app
A focused mail/chat inbox — SplitView, SearchBar, PersonChip, Notification, and a threaded conversation built from ChatBubbles.
Pricing page
A polished pricing surface: Cover, Stats trust strip, PricingTable, FeatureGrid, Quote, FAQ, and a closing CTA.
CRM contacts
A directory view with SearchBar, segmented filters, Tile quick stats, paginated person cards, and a slide-in detail Sheet.
Status page
A public SRE status page: incident Banner, MetricGrid, latency LineChart, services with StatusDot pulses, and a Timeline of incidents.
Checkout flow
A four-step e-commerce checkout (info → shipping → payment → review) with Steps, a live SplitView order summary, and promo codes that recompute totals.
File manager
A Dropbox-style explorer: Tree sidebar, Toolbar with view toggle, Table of files, slide-in preview Sheet, and a storage ProgressRing.
Calendar & scheduler
Agenda view with DatePicker, category chips, busy-hours ProgressRing, day Timeline, and a detail Sheet with attendees and RSVP.
Docs portal
A help-center surface: SearchBar, Tree categories, Markdown article body, Rating-driven feedback, related MediaCard grid, and FAQ Accordion.