diff --git a/packages/web-ui/example/src/main.ts b/packages/web-ui/example/src/main.ts
index ad1c1ae..8a8b181 100644
--- a/packages/web-ui/example/src/main.ts
+++ b/packages/web-ui/example/src/main.ts
@@ -71,13 +71,33 @@ import "./components/typing-indicator.js";
 import "./components/context-peek.js";
 
 // ===== STORAGE =====
-const backend = new IndexedDBStorageBackend();
-setAppStorage(new AppStorage(backend));
-const sessionsStore = new SessionsStore();
+// 1. Create all stores first (to collect their configs)
 const settingsStore = new SettingsStore();
 const providerKeysStore = new ProviderKeysStore();
+const sessionsStore = new SessionsStore();
 const customProvidersStore = new CustomProvidersStore();
 
+// 2. Create IndexedDB backend with all store configs
+const backend = new IndexedDBStorageBackend({
+  dbName: "jae-web-ui",
+  version: 1,
+  stores: [
+    settingsStore.getConfig(),
+    providerKeysStore.getConfig(),
+    sessionsStore.getConfig(),
+    customProvidersStore.getConfig(),
+  ],
+});
+
+// 3. Wire backend into each store
+settingsStore.setBackend(backend);
+providerKeysStore.setBackend(backend);
+sessionsStore.setBackend(backend);
+customProvidersStore.setBackend(backend);
+
+// 4. Create and register global AppStorage with ALL required args
+setAppStorage(new AppStorage(settingsStore, providerKeysStore, sessionsStore, customProvidersStore, backend));
+
 // ===== STATE =====
 let chatPanel: ChatPanel;
 let agent: Agent | null = null;