Auth Components

Production Integration

For production browser linking, use Configure.link() or Configure.personalizationButton() from https://configure.dev/js/configure.js. Raw components are available from import "configure/components" for local labs and advanced self-hosted surfaces.

Personalization Entry

Configure.personalizationButton() is the recommended chat-input affordance when an app wants Configure behind the same + button as images and files. It renders the + menu and Personalization row; pass linkEl so hosted Configure Link appears in a dismissible inline chat panel when the user still needs to link. The inline host should span the assistant message lane and stay out of the composer row.

<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="entry"></div>
<div id="configure-link-host"></div>

<script>
  Configure.personalizationButton({
    el: "#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>

Raw self-hosted surfaces can import <configure-personalization-button> from configure/components. When the hosted script is present, the raw component calls Configure.link() from its Personalization row; otherwise it emits configure:personalization-open so the host can launch Link itself.

import "configure/components";

<configure-personalization-button
  api-key="pk_..."
  agent="your-agent">
</configure-personalization-button>

Attribute	Type	Default	Description
api-key	string	-	Configure publishable key.
agent	string	-	Agent handle receiving approved access.
font	string	host font	Font family override.
show-images	boolean	true	Show host-owned Images row.
show-files	boolean	true	Show host-owned Files row.

Event	Detail	Description
configure:linked	{ token, userId, agent }	Hosted Link completed. Send token to your backend.
configure:personalization-open	{ agent }	Host should launch Link if the hosted script is not present.
configure:personalization-toggle	{ enabled, agent }	Already-linked personalization changed locally.
configure:image-select	{}	Host should open its image picker.
configure:file-select	{}	Host should open its file picker.

Hosted Link

Use a simple Link trigger when you do not need the chat + menu.

<script src="https://configure.dev/js/configure.js"></script>
<button
  data-configure-link
  data-publishable-key="pk_..."
  data-agent="your-agent">
  Personalize
</button>

Listen for configure:linked and send the token to your backend. The model receives formatted profile context from the server, not the raw Link token.

Internal Primitives

<configure-phone-input>, <configure-otp-input>, and <configure-profile-editor> are raw UI primitives used by Configure-owned hosted surfaces and local labs. Production apps should use hosted Link unless they intentionally own the full self-hosted flow.

<configure-phone-input api-key="pk_..."></configure-phone-input>
<configure-otp-input api-key="pk_..." phone="+1 (555) 555-1234"></configure-otp-input>
<configure-profile-editor
  api-key="pk_..."
  auth-token="..."
  user-id="..."
  agent="your-agent">
</configure-profile-editor>

New integrations should listen for configure:linked from hosted Link rather than consuming internal OTP events directly.