Open Generative UI

"""MS Agent Framework agent for the Open-Ended Generative UI demo (minimal).The simplest possible Open Generative UI agent. All the heavy liftinghappens outside the agent:- The CopilotKit runtime is configured with `openGenerativeUI: true` for  this agent (see `src/app/api/copilotkit-ogui/route.ts`). The provider  auto-registers the `generateSandboxedUi` frontend tool, which the  runtime forwards to the MS agent via the AG-UI protocol on each turn.- When the LLM calls `generateSandboxedUi`, the runtime's  `OpenGenerativeUIMiddleware` converts that streaming tool call into  `open-generative-ui` activity events that the built-in renderer mounts  inside a sandboxed iframe.This is the minimal variant: no sandbox functions, no app-side tools.The agent simply asks the LLM to design and emit a single-shotsandboxed UI. The "advanced" sibling (`open_gen_ui_advanced_agent.py`)builds on this with sandbox-to-host function calling via`openGenerativeUI.sandboxFunctions`."""from __future__ import annotationsfrom textwrap import dedentfrom agent_framework import Agent, BaseChatClientfrom agent_framework_ag_ui import AgentFrameworkAgentSYSTEM_PROMPT = dedent(    """    You are a UI-generating assistant for an Open Generative UI demo    focused on intricate, educational visualisations (3D axes / rotations,    neural-network activations, sorting-algorithm walkthroughs, Fourier    series, wave interference, planetary orbits, etc.).    On every user turn you MUST call the `generateSandboxedUi` frontend    tool exactly 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 context    describing the palette, typography, labelling, and motion conventions    expected -- 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 the    rendered visualisation.    """).strip()def create_open_gen_ui_agent(chat_client: BaseChatClient) -> AgentFrameworkAgent:    """Instantiate the minimal Open Generative UI agent."""    base_agent = Agent(        client=chat_client,        name="open_gen_ui_agent",        instructions=SYSTEM_PROMPT,        tools=[],    )    return AgentFrameworkAgent(        agent=base_agent,        name="OpenGenUiAgent",        description=(            "Generates self-contained, educational sandboxed UI "            "(HTML + CSS + SVG) via the `generateSandboxedUi` frontend tool."        ),        require_confirmation=False,    )

"""MS Agent Framework agent for the Open-Ended Generative UI (Advanced) demo.The "advanced" variant of the Open Generative UI demo. The keydistinguishing feature: the agent-authored, sandboxed UI can invokefrontend-registered **sandbox functions** -- functions the app defines onthe host page (see `src/app/demos/open-gen-ui-advanced/sandbox-functions.ts`)and makes callable from inside the iframe via`await Websandbox.connection.remote.<name>(args)`.How it works end-to-end:- The frontend passes `openGenerativeUI={ sandboxFunctions }` to the  `CopilotKit` provider. The provider injects a JSON descriptor of those  functions into the agent context.- The CopilotKit runtime forwards both the auto-registered  `generateSandboxedUi` frontend tool AND the sandbox-function descriptors  (via AG-UI context) to the MS agent on each turn.- The LLM then generates HTML + JS that calls  `Websandbox.connection.remote.<name>(...)` in response to user  interactions.- The runtime's `OpenGenerativeUIMiddleware` converts the streaming  `generateSandboxedUi` tool call into `open-generative-ui` activity  events that the built-in renderer mounts inside a sandboxed iframe.- The renderer wires each `sandboxFunctions` entry as a `localApi`  method on the websandbox connection so in-iframe code can call it.The "minimal" sibling (`open_gen_ui_agent.py`) uses the same OGUIpipeline without sandbox functions."""from __future__ import annotationsfrom textwrap import dedentfrom agent_framework import Agent, BaseChatClientfrom agent_framework_ag_ui import AgentFrameworkAgentSYSTEM_PROMPT = dedent(    """    You are a UI-generating assistant for the Open Generative UI (Advanced) demo.    On every user turn you MUST call the `generateSandboxedUi` frontend    tool exactly once. The generated UI must be INTERACTIVE and must    invoke the available 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.    """).strip()def create_open_gen_ui_advanced_agent(    chat_client: BaseChatClient,) -> AgentFrameworkAgent:    """Instantiate the advanced Open Generative UI agent."""    base_agent = Agent(        client=chat_client,        name="open_gen_ui_advanced_agent",        instructions=SYSTEM_PROMPT,        tools=[],    )    return AgentFrameworkAgent(        agent=base_agent,        name="OpenGenUiAdvancedAgent",        description=(            "Generates interactive sandboxed UI that calls host-side "            "sandbox functions via `Websandbox.connection.remote.*`."        ),        require_confirmation=False,    )