Pick designs in your app.

How it works

@assistant-ui/variants renders the options your agent writes.

// The Plans group from the demo above
<Variants id="variants-demo-plans" label="Plans" default="cards">
  <Variant id="cards" label="Three cards"><PlanCards /></Variant>
  <Variant id="table" label="Comparison table"><PlanTable /></Variant>
  <Variant id="featured" label="One featured plan"><PlanFeatured /></Variant>
</Variants>

• In the page, not a mockup. Options render with your real data and breakpoints.
• Shareable picks. A ?variant= link reproduces what you see.
• Notes for the agent. ⌥-click to leave a note that travels with your pick.
• No wrapper element. Your layout and selectors see exactly what ships.
• Refused in production. A production build won't render an undecided <Variants>.