Components

Configure hosted surfaces cover user consent, account linking, connector status, profile editing, and action approval. They are UI elements, not model tools.

Production browser integrations should use the hosted iframe script. Configure.link() is the public account-linking surface and is the only browser path that returns the agent-scoped token used by configure.profile({ token }).

Replace pk_... with the publishable key from your approved Configure account.

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

<script>
  Configure.link({
    el: "#configure-link",
    publishableKey: "pk_...",
    agent: "your-agent",
    displayName: "Your Agent",
  });
</script>

For chat products, the suggested entry point is a compact + menu item next to image/file attachments. Use Configure.personalizationButton() for that affordance, and pass linkEl so Link mounts in a dismissible inline chat panel instead of inside the composer row. Let that panel span the assistant message lane; do not cap the Link host at 420px.

<script src="https://configure.dev/js/configure.js"></script>
<style>
  #configure-link-host {
    width: min(100%, var(--chat-max, 640px));
    max-width: 100%;
  }
</style>
<div id="configure-entry"></div>
<div id="configure-link-host"></div>

<script>
  Configure.personalizationButton({
    el: "#configure-entry",
    linkEl: "#configure-link-host",
    publishableKey: "pk_...",
    agent: "your-agent",
    displayName: "Your Agent",
    font: "Inter, -apple-system, BlinkMacSystemFont, sans-serif",
    onImage: () => openImagePicker(),
    onFile: () => openFilePicker(),
  });
</script>

displayName is cosmetic UI copy. The agent handle is the identity used for approvals, tokens, storage, and attribution.

Component Set

Component	Purpose
Configure.link()	Hosted linking and consent surface that returns an agent-scoped token.
Configure.personalizationButton() / <configure-personalization-button>	Suggested chat-input entry point: + menu, Personalization row, and linkEl inline chat-panel Link mount.
<configure-auth-modal>	Internal auth UI primitive used by hosted Configure surfaces; do not mount directly for PR1 linking.
<configure-connection-list>	Show available connectors and connection state.
<configure-profile-editor>	Let a user inspect and edit profile details.
<configure-tool-approval>	Collect approval for actions such as sending email or creating calendar events.

The server-side SDK still owns memory reads, search, remembers, commits, and model tool execution.

All hosted surfaces accept font in JS and data-font in declarative HTML. Raw components accept a font attribute or the --cfg-font CSS variable.

Raw Lit components are packaged with the public configure npm package for local labs and advanced self-hosted surfaces:

import "configure/components";

The hosted script is still the recommended production path because it owns iframe isolation, consent sequencing, resizing, and event delivery.