← All demos

§Demo 02

Edit the page. The agent edits the file.

Select a part of the card and change it. Every change is recorded as an edit, and the panel on the right shows the diff those edits become.

localhost:3000/billingEdit Mode

Click the title, the text, the button or the card. A simulation: nothing leaves this page.

Inspector h2

Only tokens and variants the system already has are on offer. There is no free color picker.

No edits yet

app/billing/page.tsx · what the agent would write

  <AuCard radius="md">    <h2>Team plan</h2>    <p>Unlimited items, five seats and review on every screen.</p>    <AuButton variant="secondary" tone="ink">      Upgrade    </AuButton>  </AuCard>

In a real project

The overlay
Edits are applied on top of the running page. The source file is untouched until an agent materializes them.
The agent
Runs /auis-edit-bridge-solve and writes each approved edit into the canonical TSX, then hands the result back for review.
The limits
You pick from tokens and variants the design system already has. A new token is a foundation change, not an edit.