Memory & Export Components

Memory Card

Expandable saved memories display with optional edit/delete actions.

HTML

<configure-memory-card id="my-memories" max-visible="4"></configure-memory-card>

<script>
document.getElementById('my-memories').memories = [
  { key: '1', value: 'Prefers window seats on flights' },
  { key: '2', value: 'Software engineer in San Francisco' },
];
</script>

React

<MemoryCard
  memories={[
    { key: '1', value: 'Prefers window seats on flights' },
    { key: '2', value: 'Software engineer in San Francisco' },
  ]}
  maxVisible={4}
  onSettingsPress={() => {}}
  onMemoryEdit={(key) => {}}
  onMemoryDelete={(key) => {}}
/>

Attribute / Prop	Type	Default	Description
memories	MemoryData[]	[]	Memory array (JS property)
max-visible / maxVisible	number	4	Items shown before "see more"
show-settings / showSettings	boolean	true	Show settings gear icon
show-actions / showActions	boolean	false	Show edit/delete buttons

Event / Callback	Detail	Description
configure:settings-press / onSettingsPress	{}	User clicked settings gear
configure:memory-edit / onMemoryEdit	{ key, value }	User edited a memory
configure:memory-delete / onMemoryDelete	{ key }	User deleted a memory

---

Export Button

Single provider export button. Opens an AI service with a pre-filled prompt to export the user's memories.

HTML

<configure-export-button provider="chatgpt"></configure-export-button>
<configure-export-button provider="claude"></configure-export-button>

React

<ExportButton provider="chatgpt" onExportClick={(p) => console.log(p)} />
<ExportButton provider="claude" />

Attribute / Prop	Type	Default	Description
provider	string	—	chatgpt, claude, gemini, grok
prompt	string	built-in	Override the default export prompt
label	string	auto	Override the button label

Event / Callback	Detail	Description
configure:export-click / onExportClick	{ provider }	User clicked the button

---

Memory Import

Full memory import flow: export buttons → paste textarea → stage + auth + import.

HTML

<configure-memory-import api-key="pk_live_xxxxx" providers="chatgpt,claude,gemini,grok"></configure-memory-import>

React

<ConfigureProvider apiKey="pk_live_xxxxx">
  <MemoryImport
    providers="chatgpt,claude,gemini"
    agent="my-agent"
    onImportComplete={() => console.log('Done!')}
  />
</ConfigureProvider>

Attribute / Prop	Type	Default	Description
api-key / apiKey	string	—	Configure API key (required)
providers	string	'chatgpt,gemini,claude,grok'	Comma-separated providers
agent	string	''	Agent name for imported_by attribution

Event / Callback	Detail	Description
configure:export-click / onExportClick	{ provider }	User clicked an export button
configure:import-start / onImportStart	{ provider, stageId }	Paste submitted, staging begun
configure:import-complete / onImportComplete	{ provider, source }	Import fully processed
configure:import-error / onImportError	{ message, phase }	Error during stage, auth, or claim

Flow:

1. User clicks an export button (opens AI service in new tab) or copies the prompt manually
2. User pastes exported memories into the textarea and clicks "Import"
3. If authenticated (via sessionStorage), stages and claims immediately
4. If not authenticated, shows inline phone → OTP flow, then auto-claims on success

---

Export Prompt

Copy-prompt widget. Monospace box with the export prompt and a copy button.

HTML

<configure-export-prompt></configure-export-prompt>

React

<ExportPrompt onCopy={() => console.log('Copied!')} />

Attribute / Prop	Type	Default	Description
prompt	string	built-in	Override the prompt text

Event / Callback	Detail	Description
configure:prompt-copied / onCopy	{ prompt }	User copied the prompt