Components

Drop-in UI components for Configure. Available as Web Components (any framework) and React components with Shadow DOM isolation.

Install

npm (Web Components)

npm install configure

npm (React)

npm install configure/react configure

CDN

<script src="https://unpkg.com/configure/dist/configure-components.global.js"></script>

Quick Start

HTML

<script src="https://unpkg.com/configure/dist/configure-components.global.js"></script>

<configure-phone-input api-key="pk_your_publishable_key"></configure-phone-input>

React

import { ConfigureProvider, PhoneInput } from 'configure/react';

function App() {
  return (
    <ConfigureProvider apiKey="pk_your_publishable_key">
      <PhoneInput onPhoneSubmit={(phone) => console.log(phone)} />
    </ConfigureProvider>
  );
}

API Key Types

Use a publishable key (pk_) for client-side components. Publishable keys can only perform safe operations like OTP auth and tool connections.

Never expose your secret key (sk_) in HTML. Secret keys have full API access and should only be used server-side.

---

How It Works

All interactive components require an API key. They call the Configure backend automatically — no manual event wiring needed.

The flow:

1. <configure-auth> handles the full phone → OTP → success flow as a single component
2. On success, it broadcasts configure:authenticated with { token, userId }
3. All connection components on the page auto-receive the auth token
4. Connection rows call tools.connect() + open OAuth popup + poll tools.confirm()

Auth persists in localStorage so page refreshes don't lose the session. Events fire on every action so you can hook into the flow.

---

Theming

Components auto-detect light/dark mode via prefers-color-scheme. Force a theme with the theme attribute (HTML) or prop (React):

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>