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 surfaces.

Connection List

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

<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"],
  });
</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">
</configure-connection-list>

Attribute	Type	Default	Description
api-key	string	-	Configure publishable key.
connectors	string	gmail,calendar,notion	Comma-separated connector IDs.
connections	array	[]	Connection data when assigned as a JS property.

Event	Detail	Description
configure:tool-connect	{ tool }	User clicked connect.
configure:tool-disconnect	{ tool }	User clicked disconnect.
configure:tool-error	{ tool, error }	Connection error.

Single Connector

Use a focused single-connector surface 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>