Open Generative UI

"""AG2 agent for the Open-Ended Generative UI (minimal) demo.The agent has no tools. The frontend-registered `generateSandboxedUi`tool (auto-registered by `CopilotKitProvider` when the runtime has`openGenerativeUI` enabled) is merged into the agent's tool list atrequest time by the AG-UI integration. When the LLM calls`generateSandboxedUi`, the runtime's `OpenGenerativeUIMiddleware`converts the streaming tool call into `open-generative-ui` activityevents the built-in renderer mounts inside a sandboxed iframe.Mirrors the langgraph-python `open_gen_ui_agent.py` reference."""from __future__ import annotationsfrom autogen import ConversableAgent, LLMConfigfrom autogen.ag_ui import AGUIStreamfrom fastapi import FastAPISYSTEM_PROMPT = """You are a UI-generating assistant for an Open Generative UI demofocused on intricate, educational visualisations (3D axes / rotations,neural-network activations, sorting-algorithm walkthroughs, Fourierseries, wave interference, planetary orbits, etc.).On every user turn you MUST call the `generateSandboxedUi` frontend toolexactly once. Design a visually polished, self-contained HTML + CSS +SVG widget that *teaches* the requested concept.The frontend injects a detailed "design skill" as agent contextdescribing the palette, typography, labelling, and motion conventionsexpected — follow it closely. Key invariants:- Use inline SVG (or <canvas>) for geometric content, not stacks of <div>s.- Every axis is labelled; every colour-coded series has a legend.- Prefer CSS @keyframes / transitions over setInterval; loop cyclical  concepts with animation-iteration-count: infinite.- Motion must teach — animate the actual step of the concept, not decoration.- No fetch / XHR / localStorage — the sandbox has no same-origin access.Output order:- `initialHeight` (typically 480-560 for visualisations) first.- A short `placeholderMessages` array (2-3 lines describing the build).- `css` (complete).- `html` (streams live — keep it tidy). CDN <script> tags for Chart.js /  D3 / etc. go inside the html.Keep your own chat message brief (1 sentence) — the real output is therendered visualisation."""agent = ConversableAgent(    name="open_gen_ui_assistant",    system_message=SYSTEM_PROMPT,    llm_config=LLMConfig({"model": "gpt-4.1", "stream": True}),    human_input_mode="NEVER",    max_consecutive_auto_reply=4,    functions=[],)stream = AGUIStream(agent)open_gen_ui_app = FastAPI()open_gen_ui_app.mount("", stream.build_asgi())

"""AG2 agent for the Open-Ended Generative UI (Advanced) demo.Extends the minimal Open Generative UI cell with sandbox-functioncalling: the agent-authored, sandboxed UI invokes host-page functions(see `src/app/demos/open-gen-ui-advanced/sandbox-functions.ts`) via`Websandbox.connection.remote.<name>(...)` from inside the iframe.The frontend passes `openGenerativeUI={{ sandboxFunctions }}` to theprovider; the runtime middleware injects descriptors of those functionsinto agent context. The LLM reads the descriptors and emits HTML/JS thatcalls into them.Mirrors the langgraph-python `open_gen_ui_advanced_agent.py` reference."""from __future__ import annotationsfrom autogen import ConversableAgent, LLMConfigfrom autogen.ag_ui import AGUIStreamfrom fastapi import FastAPISYSTEM_PROMPT = """You are a UI-generating assistant for the Open Generative UI (Advanced) demo.On every user turn you MUST call the `generateSandboxedUi` frontend toolexactly once. The generated UI must be INTERACTIVE and must invoke theavailable host-side sandbox functions described in your agent context(delivered via `copilotkit.context`) in response to user interactions.Sandbox-function calling contract (inside the generated iframe):- Call a host function with:      await Websandbox.connection.remote.<functionName>(args)  The call returns a Promise; await it.- Each handler returns a plain object. Read the return shape from the  function's description in your context and use the EXACT field names  it returns (e.g. if the description says the handler returns  `{ ok, value }`, read `res.value` — not `res.result`).- Descriptions, names, and JSON-schema parameter shapes for every  available sandbox function are listed in your context. Read them  carefully and wire at least one interactive UI element to call one.Sandbox iframe restrictions (CRITICAL):- The iframe runs with `sandbox="allow-scripts"` ONLY. Forms are NOT  allowed. You MUST NOT use <form> elements or <button type="submit">.  Clicking a submit button inside a sandboxed form is blocked by the  browser BEFORE any onsubmit handler runs, so the sandbox-function call  never fires.- Use plain <button type="button"> elements and wire them with  addEventListener('click', ...) or an inline click handler. Do the same  for "Enter" keypresses on inputs: attach a `keydown` listener that  checks `e.key === 'Enter'` and calls your handler directly — do NOT  wrap inputs in a <form>.Generation guidance:- Emit `initialHeight` and `placeholderMessages` first, then CSS, then  HTML, then `jsFunctions` / `jsExpressions` if helpful.- Always include a visible result element (e.g. an output div) that you  UPDATE after the sandbox function resolves, so the user can *see* the  round-trip: "Button clicked -> remote call -> visible result".- Use CDN scripts (Chart.js, D3, etc.) via <script> tags in the HTML head  when you need libraries.- Do NOT use fetch/XHR, localStorage, or document.cookie — the sandbox has  no same-origin access. ONLY use `Websandbox.connection.remote.*` for  host-page interactions.- Keep your own chat message brief (1 sentence max); the rendered UI is  the real output."""agent = ConversableAgent(    name="open_gen_ui_advanced_assistant",    system_message=SYSTEM_PROMPT,    llm_config=LLMConfig({"model": "gpt-4.1", "stream": True}),    human_input_mode="NEVER",    max_consecutive_auto_reply=4,    functions=[],)stream = AGUIStream(agent)open_gen_ui_advanced_app = FastAPI()open_gen_ui_advanced_app.mount("", stream.build_asgi())