Connection Components
Connection List
Tool connection interface for Gmail, Calendar, and Notion.
html
<configure-connection-list api-key="pk_live_xxxxx" tools="gmail,calendar,notion"></configure-connection-list>tsx
<ConnectionList tools="gmail,calendar,notion" onToolConnect={(tool) => {}} />| Attribute / Prop | Type | Default | Description |
|---|---|---|---|
api-key / apiKey | string | — | Configure API key |
tools | string | 'gmail,calendar,notion' | Comma-separated tool IDs |
connections | ConnectionData[] | [] | Connection data (JS property) |
| Event / Callback | Detail | Description |
|---|---|---|
configure:tool-connect / onToolConnect | { tool: string } | User clicked connect |
configure:tool-disconnect / onToolDisconnect | { tool: string } | User clicked disconnect |
Connection Row
Single tool connection row with icon, name, and status.
html
<configure-connection-row tool-id="gmail" name="Gmail"></configure-connection-row>
<configure-connection-row tool-id="calendar" name="Google Calendar" connected></configure-connection-row>
<configure-connection-row tool-id="notion" name="Notion" loading></configure-connection-row>| Attribute / Prop | Type | Default | Description |
|---|---|---|---|
tool-id / toolId | string | '' | Tool identifier (gmail, calendar, notion, drive) |
name | string | '' | Display name |
connected | boolean | false | Connection status |
loading | boolean | false | Show loading spinner |
| Event / Callback | Detail | Description |
|---|---|---|
configure:tool-connect / onToolConnect | { tool } | User clicked connect |
configure:tool-disconnect / onToolDisconnect | { tool } | User clicked disconnect |
configure:tool-error / onToolError | { tool, error } | Connection error |
Single Connector
Inline single-tool connection with optional message.
html
<configure-single-connector api-key="pk_live_xxxxx" tool-id="gmail" message="Connect Gmail to search your emails"></configure-single-connector>tsx
<SingleConnector toolId="gmail" message="Connect Gmail to search your emails" />