QA: Open-Ended Generative UI (Minimal) — LangGraph (Python)

Prerequisites

• Demo is deployed and accessible
• Agent backend is healthy (check /api/health)
• Graph open_gen_ui is registered in the OGUI runtime (api/copilotkit-ogui/route.ts) with openGenerativeUI.agents including "open-gen-ui"

Test Steps

1. Basic Functionality

• Navigate to the open-gen-ui demo page
• Verify the <CopilotChat> renders full-height within the centered max-w-4xl container
• Verify the input composer is visible
• Send a basic message (e.g. "Hi")
• Verify the agent calls generateSandboxedUi and a sandboxed iframe is mounted inside the chat transcript
• Verify the streaming placeholder message(s) appear before the final UI renders

2. Feature-Specific Checks

Suggestions

• Verify "3D axis visualization (model airplane)" suggestion is visible
• Verify "How a neural network works" suggestion is visible
• Verify "Quicksort visualization" suggestion is visible
• Verify "Fourier: square wave from sines" suggestion is visible

Neural Network Prompt (concrete render)

• Click the "How a neural network works" suggestion
• Verify short placeholder lines show while streaming (e.g. "Sketching the scene…", "Labelling axes…", "Wiring up the animation…")
• Verify a sandboxed iframe activity is mounted in the assistant turn
• Inside the iframe, verify an inline <svg> element renders (not stacked <div>s)
• Verify three layers of nodes are visible (input ~4, hidden ~5, output ~2) with connecting lines
• Verify layer labels are present (e.g. "Input", "Hidden", "Output") and a "Forward pass" caption
• Verify activations animate (pulse forward from input to output in a loop) — indigo active, slate quiescent
• Verify the visualization loops continuously without user interaction

Quicksort Prompt (secondary render)

• In a fresh turn, click the "Quicksort visualization" suggestion
• Verify a new sandboxed iframe is rendered with ~10 SVG rect bars
• Verify a caption text element updates as the sort progresses (e.g. "Partition around pivot", "Swap", "Recurse left")
• Verify the pivot highlight uses amber (#f59e0b) and compared elements use indigo (#6366f1)

Design Skill Injection

• In any rendered output, verify the visualization respects the palette: indigo accent, emerald success, amber warning, slate neutrals
• Verify the outer container has a white background with rounded corners and padded content (no bleed to viewport edges)
• Verify the visualization includes a title line and subtitle line at the top

3. Error Handling

• Send a trivially off-topic prompt (e.g. "banana banana banana"); verify the agent still renders a sandboxed UI or a graceful text response — no unhandled exception
• Verify no console errors originating from the host page during rendering (sandbox-internal warnings may be present)
• Verify the sandbox iframe does NOT attempt fetch / XHR / localStorage (network tab: no origin-leaked requests from the iframe)
• Send an empty message — input should be rejected without error
• Refresh the page mid-stream — verify no broken UI persists

Expected Results

• Chat loads within 3 seconds
• First visualization mounts within ~15 seconds of prompt submission
• Sandboxed iframe renders SVG-based content with labeled axes / layers / legend
• Animations loop smoothly with CSS keyframes (no jank from setInterval)
• No UI errors or broken layouts