ConnectorPermission
StableOne connected app, and exactly what the AI can do with it.
Also known as oauth consent, connect account, integration permission
Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.
Gmail, connected
Gmail
mira@example.com
The assistant can
- Read your email and attachmentsSee
- Write drafts for you to checkChange
- Send email as youSend
- Delete emailDelete
Last used 2 hours ago
<ConnectorPermission
app="Gmail"
icon={<GmailLogo />}
account="mira@example.com"
status="connected"
lastUsed="2 hours ago"
access={[
{ id: "r", label: "Read your email and attachments", level: "read" },
{ id: "w", label: "Write drafts for you to check", level: "write" },
{ id: "s", label: "Send email as you", level: "send" },
{ id: "d", label: "Delete email", level: "delete" },
]}
onDisconnect={disconnect}
onConnect={connect}
/>Press Disconnect: it asks once, in place. Then Connect again.
When to use it
Makes clear what an AI can reach in each connected app, so people connect with confidence and can cut access in one step.
Made of: App icon and name · Account · Status badge · What the assistant can do · Disconnect or Connect · Last used
Use it for
- A settings page that lists connected apps.
- Asking someone to connect an app, showing what it allows first.
- Telling people a connection has expired.
Not for
- Asking before one action the AI wants to take: use PermissionPrompt.
- Everything the AI can see in this chat: use ContextPanel.
- Setting how much the AI may do without asking: use PermissionModeSwitcher.
Do and avoid
Gmail
mira@example.com
The assistant can
- Read your emailSee
- Send email as youSend
- Delete emailDelete
Gmail
mira@example.com
The assistant can
- Full access to your accountSee
Do
- List every kind of access, including the scary ones.
- Use the app's real name and logo.
- Say when it was last used, so people notice access they forgot.
Avoid
- Do not hide delete or send access in small print.
- Do not disconnect without one question.
- Do not show the list for an app that is not connected.
On a phone
- The status badge drops under the app name when the row is narrow.
- The Disconnect question replaces the button in place, so nothing jumps.
Seen in products
- Claude lets people connect apps and data sources as connectors, through remote MCP servers.
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| apprequired | string | none | The app's name, such as Gmail. |
| icon | ReactNode | none | The app's logo, about 24px. |
| account | string | none | Which account it is connected to. |
| statusrequired | "connected" | "off" | "expired" | none | Whether it is connected, not connected, or needs signing in again. |
| accessrequired | ConnectorAccess[] | none | What the assistant can do: { id, label, level: "read" | "write" | "send" | "delete" }. |
| lastUsed | string | none | When the assistant last used it, such as 2 hours ago. |
| onConnect | () => void | none | Connects or reconnects. Shown when not connected or expired. |
| onDisconnect | () => void | none | Disconnects, after one question in place. |
| labels | ConnectorPermissionLabels | none | Overrides status, canHeading, levels, connect, reconnect, disconnect, disconnectQuestion(app), keep and lastUsed(when). |
| headingLevel | 2 | 3 | 4 | 5 | 6 | 3 | Level of the app name's heading. |
| className | string | none | Extra classes on the root. |
"Show code under the preview gives the code for the example on the stage."
In Figma
In Figma, one ConnectorPermission switches all of this from its properties panel, across 3 variants. Each property sets the React prop beside it, so design and code use the same names.
| Figma property | React | Values |
|---|---|---|
| Status | status | Connected, Off, Expired |
| App | app | Any text |
| Account | account | Any text |
States
States this part has beyond its default look. Build each one your screen can reach. States set by a property are in the Code tab.
- connected
- A green Connected badge, the list of access, Disconnect and when it was last used.
- asking to disconnect
- Disconnect becomes a question in place, with Disconnect and Keep it; focus moves to Keep it.
- not connected
- A neutral badge and a Connect button; the list of access is hidden.
- expired
- An amber Needs you to sign in again badge and a Reconnect button.
- delete access
- A line with delete access uses the danger color and the word Delete.
Tokens
Change one of these and every part that uses it follows.
--surface--bg--line--danger-fg--success--warning--radius-card
Built in
- The card is a region named by the app's name, with a heading for the list.
- Each kind of access is said in words (See, Change, Send, Delete), not only by its icon.
- Disconnect asks in place and moves focus to the safe choice; the question is read out.
What you need to do
- Write each line as an action in plain words, such as Send email as you.
- Set headingLevel so the app name fits your page outline. It is 3 unless you change it.
Built toward WCAG 2.2 AA and checked automatically; no independent audit yet. Read the accessibility guide