Connection Components

Production Integration

For production browser integration, use Configure.connections() and Configure.singleConnector() from https://configure.dev/js/configure.js. Raw components are available from import "configure/components" for local labs and advanced self-hosted UI.

Connection List

Show connector connection state for Gmail, Calendar, Drive, Notion, and Google Sheets.

<script src="https://configure.dev/js/configure.js"></script>
<div id="configure-connections"></div>

<script>
  Configure.connections({
    el: "#configure-connections",
    publishableKey: "pk_...",
    agent: "your-agent",
    displayName: "Your Agent",
    token,
    connectors: ["gmail", "calendar", "drive", "notion", "sheets"],
  });
</script>

After a user connects an account, opt into the matching server-side connector tool for turns that need it:

const tools = profile.tools({
  connectors: ["gmail", "calendar"],
});

The component handles connection UX. The server still decides which connector tools are exposed to the model and executes Configure tool calls through profile.executeTool().

Raw component example:

import "configure/components";

<configure-connection-list
  api-key="pk_..."
  connectors="gmail,calendar,drive,notion,sheets">
</configure-connection-list>

Attribute	Type	Default	Description
api-key	string	-	Configure publishable key.
auth-token	string	-	Required. The user's token (or agent token for agent-scoped use); rows stay disabled without it.
user-scoped	boolean	false	Call the user-scoped /v1/me surfaces with a user Bearer token instead of the agent-key connectors API. Set this on first-party pages where the signed-in person manages their own apps.
agent	string	-	Agent handle for attribution.
connectors	string	unset (renders gmail,calendar,drive,notion,sheets)	Comma-separated connector IDs. When it names exactly one connector that is not yet connected, the list leads with that connector's connect row (no "Connect more apps" dropdown).
capability	string	-	Scope-upgrade ask (for example gmail:send), forwarded only to the row of its connector so the re-consent grants the extra scope.
connections	array	[]	Connection data when assigned as a JS property.

Event	Detail	Description
configure:tool-connect	{ tool, connected: true, accountId?, providerAccountId?, accountEmail? }	Fires after the OAuth connect and confirmation succeed, not on click.
configure:tool-preserved	{ tool, connected, preserved, newAccountAdded: false, message, permissionRequired, reason }	A re-consent kept the existing grant (for example a weaker reauthorization). Completes WITHOUT tool-connect; listen for it or you will miss the outcome.
configure:tool-error	{ tool, error }	Connection error.

The list also listens for a configure:tool-disconnect event as an external state signal; no packaged component emits it, and clicking a connected row starts a fresh reconnect rather than a disconnect.

Single Connector

Use the single-connector UI when the model attempted a connector-backed tool and the user needs to connect or reconnect that account.

Configure.singleConnector({
  el: "#connector-slot",
  publishableKey: "pk_...",
  agent: "your-agent",
  displayName: "Your Agent",
  token,
  tool: "gmail",
  message: "Connect Gmail to search your emails",
});

Raw component example:

<configure-single-connector
  api-key="pk_..."
  tool-id="gmail"
  message="Connect Gmail to search your emails">
</configure-single-connector>