diff --git a/packages/web-ui/example/src/main.ts b/packages/web-ui/example/src/main.ts
index d330e2e..ad1c1ae 100644
--- a/packages/web-ui/example/src/main.ts
+++ b/packages/web-ui/example/src/main.ts
@@ -240,18 +240,18 @@ async function createAgent(initialState?: AgentState) {
   const memTools = createMemoryTools();
   const allTools = [replTool, webSearch, imageGen, tts, bash, browser, ...memTools];
 
-  agent = new Agent({
+agent = new Agent({
+  initialState: {
     model,
     systemPrompt: SYSTEM_PROMPT,
-    tools: allTools.map((t) => t.tool),
-    convertToLlm: customConvertToLlm,
     ...initialState,
-  });
+  },
+});
 
-  chatPanel.setAgent(agent, {
-    toolsFactory: () => allTools,
-    convertToLlm: customConvertToLlm,
-  });
+chatPanel.setAgent(agent, {
+  onApiKeyRequired: (provider: string) => ApiKeyPromptDialog.prompt(provider),
+  toolsFactory: (_agent, _iface, _artifacts, _runtimeFactory) => allTools,
+});
 
   registerCustomMessageRenderers(chatPanel);
 
@@ -612,8 +612,8 @@ function renderApp() {
           <!-- CHAT AREA -->
           <div class="flex flex-col flex-1 min-w-0 min-h-0 relative ${getViewClasses()}">
             ${!hasMessages ? html`
-              <div class="absolute inset-x-0 top-0 z-10 flex flex-col" style="bottom:130px" @suggestion=${handleSuggestion}>
-                <jae-empty-state style="display:flex;flex-direction:column;flex:1;width:100%;min-height:0"></jae-empty-state>
+              <div class="absolute inset-x-0 top-0 z-10 flex flex-col" style="bottom:130px;pointer-events:none" @suggestion=${handleSuggestion}>
+                <jae-empty-state style="display:flex;flex-direction:column;flex:1;width:100%;min-height:0;pointer-events:auto"></jae-empty-state>
               </div>
             ` : html``}
             <div id="chat-wrapper" class="flex flex-col flex-1 min-h-0">