Connector Approval
The screen that grants an assistant access to one site. What it may do ticks in line by line, and the one thing it may not stays where it lands.
Playground
Turn the props on the right; the snippet under them is what you would write to get what you see.
import { Ai52 } from "@/components/beste/component/ai52";
<Ai52
subject="yourdomain.com"
allowed={["Read every page","Write into your draft","Add pages and posts"]}
denied="Publish to the live site"
/>Usage
The import and the props worth knowing about, in one place.
import { Ai52 } from "@/components/beste/piece/ai52";
<Ai52
surface="card"
bordered={true}
inverted={false}
title="Give Claude access"
subject="yourdomain.com"
allowed={[
"Read every page",
"Write into your draft",
"Add pages and posts"
]}
deniedLabel="Never"
denied="Publish to the live site"
approveLabel="Approve"
stepMs={400}
/>More AI pieces
View all AIYou are a concise copywriter. Reply in 2 sentences max and avoid em dashes.
System Prompt
Dashed-border card with a violet scroll icon, uppercase label, and an edit button for the system instructions.
- 1Identify the customer segment behind the refund spike
- 2Check whether the pricing change overlaps the spike
- 3Weigh a targeted email against a pricing rollback
- Final answerSend a clarifying email to annual plan customers first; roll back only if refunds stay high next week.
Thinking Steps
Reasoning panel whose numbered steps stagger in once while a thin connector draws down between them, finishing on a final answer row that stays in place.
Vision Input
Attached image card with a tone-tinted thumbnail tile, a scanning line overlay, filename, dimensions, and detected-object chips.
1
2
3
4Image Variants
Two-by-two grid of AI-generated image variants. The selected tile gets a primary border.