diff --git a/app/canvas/[id]/page.tsx b/app/canvas/[id]/page.tsx
index c9e44c900..0c0bb2613 100644
--- a/app/canvas/[id]/page.tsx
+++ b/app/canvas/[id]/page.tsx
@@ -800,6 +800,19 @@ export default function CanvasEditorPage({ params }: PageProps) {
     };
   }, []);
 
+  const resolvedWorkflowUiConfig = useMemo(
+    () => normalizeAgentWorkflowUiConfig(siteSettingsData?.agentWorkflowUiConfig),
+    [siteSettingsData?.agentWorkflowUiConfig]
+  );
+
+  const workflowContext = useMemo<AgentWorkflowComposerContext | null>(() => {
+    return buildAgentWorkflowComposerContext({
+      config: resolvedWorkflowUiConfig || defaultAgentWorkflowUiConfig,
+      inputs: workflowInputs,
+      selections: workflowSelections,
+    });
+  }, [resolvedWorkflowUiConfig, workflowInputs, workflowSelections]);
+
   if (isLoading) {
     return (
       <div className="h-full flex items-center justify-center bg-muted/30">
@@ -844,18 +857,6 @@ export default function CanvasEditorPage({ params }: PageProps) {
         </div>
       </div>
     ) : null;
-  const resolvedWorkflowUiConfig = useMemo(
-    () => normalizeAgentWorkflowUiConfig(siteSettingsData?.agentWorkflowUiConfig),
-    [siteSettingsData?.agentWorkflowUiConfig]
-  );
-
-  const workflowContext = useMemo<AgentWorkflowComposerContext | null>(() => {
-    return buildAgentWorkflowComposerContext({
-      config: resolvedWorkflowUiConfig || defaultAgentWorkflowUiConfig,
-      inputs: workflowInputs,
-      selections: workflowSelections,
-    });
-  }, [resolvedWorkflowUiConfig, workflowInputs, workflowSelections]);
 
   if (isAgentMode) {
     return (