Components

Configure hosted UI covers user consent, account linking, connector status, profile editing, and action approval. These components are UI elements, not model tools.

Production browser integrations should use the hosted iframe script. Configure.link() is the public account-linking flow. Configure.signIn() is the sign-in presentation of the same auth grant, and both deliver the agent-scoped token used by configure.profile({ token }). Configure.signInWithPopup() is the only auth path that returns a short-lived code instead of a token.

Replace pk_... with the publishable key from your approved Configure account. Pass an explicit theme ("light" or "dark"); without it the script falls back to the system color scheme and logs a console warning.

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

<script>
  const frame = Configure.link({
    el: "#configure-link",
    publishableKey: "pk_...",
    agent: "your-agent",
    displayName: "Your Agent",
    theme: "light",
    onEvent: (event) => {
      if (event.type === "configure:linked") {
        // event.payload = { token, userId, tokenUse }
        sendTokenToYourBackend(event.payload.token);
      }
    },
  });
</script>

Configure.link() returns a frame handle, not the token. The token arrives in the configure:linked event with payload { token, userId, tokenUse }, via the onEvent callback above or as a DOM CustomEvent on the mount element:

document.querySelector("#configure-link").addEventListener("configure:linked", (event) => {
  sendTokenToYourBackend(event.detail.token);
});

Send the token to your backend and use it there with configure.profile({ token }).

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",
    theme: "light",
    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 flow that delivers an agent-scoped token via configure:linked.
Configure.signIn() / Configure.signInWithPopup()	Sign-in presentation of the same auth grant. signIn() delivers the token via configure:signed_in; the popup variant returns a short-lived code to the opener instead.
Configure.ssoButton() / <configure-sso-button> / data-configure-sso	Google-style Configure SSO button with declarative automount.
Configure.integrationButton()	Connect/manage entry-point button for integration settings surfaces.
Configure.connections() / Configure.singleConnector()	Hosted connector list and single-connector flows.
Configure.memoryImport() / Configure.memoryCard() / Configure.confirmation() / Configure.accessRequest()	Hosted memory import, memory card, confirmation, and access-request surfaces.
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 UI; do not mount directly for production 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 full window.Configure API also exposes mount, profileEditor, toolApproval, and the SSO PKCE helpers. See the auth, connections, and memory pages for each surface.

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

All hosted UI accepts 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 UI. Raw elements also include <configure-memory-import>, <configure-memory-card>, <configure-single-connector>, <configure-access-request>, and <configure-export-button>.

The package declares sideEffects: false, and custom elements register as an import side effect. A bare import "configure/components" can therefore be tree-shaken out of production bundles, leaving <configure-*> elements undefined. Import a named export and reference it so bundlers keep the module:

import { ConfigureAuthModal } from "configure/components";

// Reference the import so the module and its element
// registrations survive tree shaking.
void ConfigureAuthModal;

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