← All components
Interaction / component
Agent Confirmation
A compact approval request with caller-owned decisions and a complete local design action.
PLAYGROUND
Take it with you.
SOURCE ACCESS
Preview freely. Unlock the files.
Enter the shared password to copy the complete source, download every file, and install components in your app.
Access lasts 24 hours. Your preview settings stay with you.
Component notes
- Complete Demo approves the displayed local accent and actually applies it to its sample. Reject keeps the prior applied accent. Request again creates a new identity; changed accent invalidates the request while preserving the applied result.
- Primitive is caller-owned and performs no work by itself. A missing handler is disabled; repeated clicks on the same request are guarded. Pause and Replay preserve decisions; Reset example restores the selected preset.
- Portable AI Elements derivative preserving a compact alert and right-aligned actions. Native actions have 44px hit areas and visible focus. No AI SDK, network, file deletion or persistence.
React 19.2Modern browsersNative HTML and SVG
AI Elements — Vercel, Inc. · Apache-2.0. Portable derivative; original notice and full license retained.
Geist and Geist Mono — Vercel, Inc. · SIL Open Font License 1.1; full notice and required self-hosted assets included.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | "Update the accent" | Title. Validated live scalar configuration. |
accent | string | "#b8c9ff" | Proposed accent. Validated live scalar configuration. |
requestId | string | 'sample' | Unique stable request identity, up to 200 characters. Use a new ID for a new request. |
state | 'requested' | 'approved' | 'rejected' | 'requested' | Caller-owned outcome. Decisions never silently advance controlled state. |
description | string | undefined | Inert request detail, up to 2,000 characters. |
onDecision | (id: string, approved: boolean) => void | undefined | One decision per request ID; absent handler disables actions. Caller owns real work and outcome. |
disabled | boolean | false | Disables both decisions. |
paused | boolean | false | Static design; preserves useful interaction and existing local state. |
replayToken | number | 0 | Static design; replay preserves useful interaction and existing local state. |
className | string | '' | Additional host class. |
style | CSSProperties | undefined | Caller-owned inline styling. |