Memory & Export Components

Production Integration

For production browser integration, use hosted Configure UI from https://configure.dev/js/configure.js. Raw components are available from import "configure/components" for local labs and advanced self-hosted UI.

Reading state

Show a reading state after configure:linked while your backend performs the first approved profile read and resumes the pending response.

<configure-runtime-reading
  label="Reading approved profile">
</configure-runtime-reading>

Keep it visible for at least 1200ms so the user can perceive that the agent is reading approved profile context, then remove it as soon as the agent response is ready.

Memory Card

Display saved memories or a local preview of memories.

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

<script>
  Configure.memoryCard({
    el: "#memory-card",
    publishableKey: "pk_...",
    agent: "your-agent",
    displayName: "Your Agent",
    memories: [
      { key: "1", value: "Prefers concise responses" },
      { key: "2", value: "Uses dark mode where available" },
    ],
  });
</script>

Raw component example:

import "configure/components";

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

<script>
  document.getElementById("my-memories").memories = [
    { key: "1", value: "Prefers concise responses" },
    { key: "2", value: "Uses dark mode where available" },
  ];
</script>

Attribute	Type	Default	Description
memories	array	[]	Memory array when assigned as a JS property.
max-visible	number	4	Items shown before "see more".
show-settings	boolean	true	Show settings icon.
show-actions	boolean	false	Show edit/delete buttons.

Event	Detail	Description
configure:settings-press	{}	User clicked settings.
configure:memory-edit	{ key }	User opened a memory for editing. The new value is not in the event.
configure:memory-delete	{ key }	User deleted a memory.

Memory Import

Use memory import for user-present export/paste flows from ChatGPT, Claude, Gemini, and similar apps.

Configure.memoryImport({
  el: "#memory-import",
  publishableKey: "pk_...",
  agent: "your-agent",
  displayName: "Your Agent",
  token,
  providers: "chatgpt,claude,gemini,grok",
});

Memory import is onboarding or enrichment UI. It is not a connector and it is not a model tool. Server-side historical backfill uses configure.importProfiles() instead.

Raw component example:

<configure-memory-import
  api-key="pk_..."
  providers="chatgpt,claude,gemini,grok"
  agent="your-agent">
</configure-memory-import>

Export buttons and prompt

Raw local-lab components can show provider export buttons or a copyable export prompt:

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

Hosted import remains the recommended production path because it owns auth, staging, and claim sequencing.