Components

Internal UI primitives used by Configure-hosted iframe surfaces.

Production Integration

These components are internal to Configure-owned hosted surfaces. For production browser integration, use the hosted iframe script at https://configure.dev/js/configure.js — see Getting Started. Methods like Configure.auth(), Configure.connections(), and others mount these components inside secure cross-origin iframes automatically.

Production Usage

<div id="configure-auth"></div>
<script src="https://configure.dev/js/configure.js"></script>
<script>
  Configure.auth({
    el: "#configure-auth",
    publishableKey: "pk_...",
    agent: "your-agent",
    theme: "light"
  });
</script>

The hosted script creates cross-origin iframes and loads these components inside Configure-owned pages. The parent app should not import or mount raw <configure-*> elements for auth, profile approval, connections, or memory import.

Internal Component Development

Raw component bundles are useful for Configure maintainers when developing iframe surfaces, visual labs, and design parity checks.

<!-- Internal/development only. Production integrations use configure.js above. -->
<script src="/components/configure-components.global.js"></script>

Key Types

Use a publishable key (pk_) only with hosted browser surfaces. Never expose your secret key (sk_) in HTML. Secret keys have full API access and should only be used server-side.

---

How It Works

The hosted iframe API owns sensitive state and wires events back to the parent page.

The flow:

1. The app calls Configure.auth() from https://configure.dev/js/configure.js
2. configure.js mounts /embed/auth/ in a Configure-owned iframe
3. The iframe renders raw Lit components internally
4. On success, the parent app receives configure:authenticated with { token, userId }
5. Follow-up hosted surfaces like Configure.connections() and Configure.memoryImport() receive that agent-scoped token from the parent app

---

Theming

Hosted surfaces accept an explicit theme: 'light' | 'dark' option. Pass it deliberately so the iframe matches your host shell. Raw internal components also support the theme attribute:

HTML

<configure-phone-input api-key="pk_live_xxxxx" theme="light"></configure-phone-input>

React

<ConfigureProvider apiKey="pk_live_xxxxx" theme="light">
  <PhoneInput />
</ConfigureProvider>

Override design tokens with CSS custom properties:

configure-phone-input {
  --cfg-bg: #FFFFFF;
  --cfg-text: #1C1C1E;
  --cfg-border: #E5E7EB;
  --cfg-accent: #007AFF;
}

Design Tokens

Token	Dark	Light	Description
--cfg-bg	#000000	#FFFFFF	Background
--cfg-bg-secondary	#121212	#F5F5F7	Secondary background
--cfg-bg-card	#212121	#F0F0F2	Card background
--cfg-text	#FFFFFF	#1C1C1E	Primary text
--cfg-text-secondary	#A4A4A4	#6B7280	Secondary text
--cfg-text-muted	#7D7D7D	#9CA3AF	Muted text
--cfg-border	#5A5A5A	#E5E7EB	Border color
--cfg-icon	#7D7D7D	#9CA3AF	Icon color
--cfg-accent	#007AFF	#007AFF	Accent / action
--cfg-success	#34C759	#34C759	Success states
--cfg-error	#FF3B30	#FF3B30	Error states

---

Events

All events use the configure: prefix and are composed: true (cross Shadow DOM boundaries):

// Listen on individual components
document.querySelector('configure-phone-input')
  .addEventListener('configure:phone-submit', (e) => {
    console.log('Phone:', e.detail.phone);
  });

// Or listen globally (events bubble up)
document.addEventListener('configure:tool-connect', (e) => {
  console.log('Connecting:', e.detail.tool);
});

In React, use callback props instead of event listeners:

<PhoneInput onPhoneSubmit={(phone, success) => console.log('Phone:', phone)} />
<ConnectionList onToolConnect={(tool) => console.log('Connected:', tool)} />

---

React Reference

ConfigureProvider

Wrap your app to supply the API key, auth state, and theme to all child components.

import { ConfigureProvider } from 'configure/react';

<ConfigureProvider apiKey="pk_live_xxx" theme="dark">
  {/* All Configure components go here */}
</ConfigureProvider>

Prop	Type	Default	Description
apiKey	string	required	Publishable key (pk_* only)
theme	'dark' | 'light'	'dark'	Color theme
baseUrl	string	'https://api.configure.dev'	API base URL

Hooks

import { useConfigureAuth, useConfigureClient, useConfigureTheme } from 'configure/react';

const { token, userId, isAuthenticated, setAuth, clearAuth } = useConfigureAuth();
const client = useConfigureClient();   // ConfigureClient instance
const theme = useConfigureTheme();     // 'dark' | 'light'

All Components

Every HTML component has a React equivalent. Import from configure/react:

import {
  // Auth
  PhoneInput, OtpInput, AuthModal,
  // Connections
  ConnectionList, ConnectionRow, SingleConnector,
  // Chat
  ChatBubble, ChatInput,
  // Actions
  ToolApproval, Confirmation,
  // Status
  Status, Searching, SdkStatus,
  // Memory
  MemoryCard, MemoryBadge, MemoryImport,
  // Export
  ExportButton, ExportPrompt,
  // Utilities
  ShadowRoot,
} from 'configure/react';

ShadowRoot Utility

Render custom content inside Shadow DOM with Configure design tokens:

import { ShadowRoot } from 'configure/react';

<ShadowRoot styles=".custom { padding: 16px; }">
  <div className="custom" style={{ color: 'var(--cfg-text)' }}>
    Isolated from the host page.
  </div>
</ShadowRoot>