Pick a brand
Each chip swaps just the Theme({...}) block at the top
of the program. The rest of the UI Script is identical across every
brand — the renderer picks up the new tokens between renders.
Pick a brand below — the preview reskins to GitHub, Apple, Stripe,
IONOS, Notion, or Vercel using only a theme = Theme({...})
line at the top of the response. No CSS, no host configuration, no
custom components. Copy any token map into your own LLM response to
brand a single reply, or feed it through
el.setTheme(...) to brand the whole host.
Each chip swaps just the Theme({...}) block at the top
of the program. The rest of the UI Script is identical across every
brand — the renderer picks up the new tokens between renders.
Every brand renders the same Streaming UI Script source. Only the
theme = Theme({...}) line at the top changes — the
runtime applies the new tokens to the host as CSS custom properties,
so the existing components instantly pick up the new palette,
typography, and shape.
head = PageHeader(
"Acme Platform",
"All your operations, one workspace.",
["Workspace", "Dashboard"],
[
Button("Settings", Action([@ToAssistant("Open settings")]), "secondary", "sm", null, "gear"),
Button("New project", Action([@ToAssistant("Start a new project")]), "primary", "sm", null, "plus")
],
Badge("On track", "success")
)
kpis = Stats([
StatCard("Active deals", "1,284", "up", "+12%", "briefcase"),
StatCard("Monthly revenue", "$48.2k", "up", "+8%", "sack-dollar"),
StatCard("Open tickets", "42", "down", "-15%", "ticket"),
StatCard("Churn", "1.4%", "flat", "0", "user-minus")
])
trendChart = Card([
SectionHeader("Revenue trend", "Last 12 weeks", null, null,
[Button("Export", Action([@ToAssistant("Export the trend")]), "ghost", "sm", null, "arrow-up-from-bracket")]
),
LineChart(
["W1","W2","W3","W4","W5","W6","W7","W8","W9","W10","W11","W12"],
[
Series("This quarter", [22, 28, 26, 32, 34, 31, 38, 42, 44, 41, 46, 48]),
Series("Last quarter", [18, 21, 20, 24, 27, 25, 28, 31, 33, 30, 34, 36])
]
)
])
teamCard = Card([
SectionHeader("Team", "6 members", "Engineering"),
Stack([
PersonChip("Asha Patel", "Engineering lead", null, "md", "online"),
PersonChip("Linus Wong", "Senior developer", null, "md", "online"),
PersonChip("Mira Sanchez", "Product designer", null, "md", "away"),
PersonChip("Sam Reyes", "QA engineer", null, "md", "offline")
], "column", "s")
])
activityCard = Card([
SectionHeader("Recent activity", "Last 24h"),
Timeline([
TimelineItem("Deployed v2.4.1", "12:04", null, "rocket", "primary"),
TimelineItem("Closed 4 support tickets", "11:18", null, "circle-check", "success"),
TimelineItem("Updated billing API", "10:02", null, "credit-card", "info"),
TimelineItem("Investigating latency", "08:47", null, "triangle-exclamation", "warning")
])
])
planCard = Card([
SectionHeader("Workspace plan", "Renews in 12 days"),
ProgressRing(72, 100, "12 / 17", "Seats used", "primary"),
Buttons([
Button("Manage seats", Action([@ToAssistant("Manage seats")]), "secondary", "sm"),
Button("Upgrade", Action([@ToAssistant("Upgrade plan")]), "primary", "sm")
])
])
quickForm = Card([
SectionHeader("Quick capture", "Add a new task"),
FormControl("Title", Input("title", "Ship the analytics tab", "text")),
FormControl("Owner", Select("owner", [
SelectItem("asha", "Asha Patel"),
SelectItem("linus","Linus Wong"),
SelectItem("mira", "Mira Sanchez")
], null, null, "asha")),
Buttons([
Button("Add task", Action([@ToAssistant("Add the task")]), "primary"),
Button("Cancel", Action([@ToAssistant("Cancel capture")]), "ghost")
])
])
bottomGrid = Grid([teamCard, activityCard, planCard, quickForm], 2, "l")
root = Stack([head, kpis, trendChart, bottomGrid], "column", "l")
Three equivalent ways to apply a brand: emit a Theme(...)
line from the LLM, call setTheme() from the host page,
or set CSS variables on the host element.
// 1. Brand a single response from inside the script
el.setResponse(`theme = Theme({
colorPrimary: "#0969da",
fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
radiusButton: "6px",
buttonFontWeight: "500"
})
root = Stack([CardHeader("Welcome"), Buttons([Button("Sign in")])])`);
// 2. Or apply the same token map programmatically (host-wide)
import { brandThemes } from "./brand-themes.js";
el.setTheme(brandThemes.github);
// 3. Or set CSS variables on the host element
streaming-ui-script {
--rui-color-primary: #0969da;
--rui-radius-button: 6px;
--rui-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}