feat: ag2 simplified beautiful-chat — A2UI Dynamic + Open Generative UI in one cell

Simplified port of the langgraph-python flagship beautiful-chat. The
canonical reference combines THREE features (A2UI Dynamic + Open
Generative UI + MCP Apps); the AG2 port ships the first two together
in a single dedicated runtime so users can see them coexist. MCP is
left to the existing /demos/mcp-apps cell, and the canonical's app-mode
toggle / todos canvas is intentionally out of scope.

Components:
- src/agents/beautiful_chat.py — ConversableAgent that owns generate_a2ui
  explicitly (mirrors a2ui_dynamic.py); system prompt steers the LLM toward
  generate_a2ui for catalog-bound visuals and generateSandboxedUi for
  free-form / educational visualisations.
- src/agent_server.py — mounted at /beautiful-chat.
- src/app/api/copilotkit-beautiful-chat/route.ts — dedicated runtime with
  a2ui.injectA2UITool: false (agent owns the tool) and
  openGenerativeUI.agents: ['beautiful-chat']. Both flags scoped to this
  cell so they don't leak into the shared /api/copilotkit endpoint.
- src/app/demos/beautiful-chat/page.tsx — single CopilotKit provider with
  both a2ui catalog and openGenerativeUI design skill; reuses the catalog
  from /demos/declarative-gen-ui to avoid duplication.
- src/app/demos/beautiful-chat/README.md — per-demo doc.

Manifest: added beautiful-chat to features list and demos section.

Author: AlemTuzlak

showcase/integrations/ag2/src/agent_server.py

@@ -22,6 +22,7 @@
 from agents.a2ui_dynamic import a2ui_dynamic_app
 from agents.a2ui_fixed import a2ui_fixed_app
 from agents.agent_config_agent import agent_config_app
+from agents.beautiful_chat import beautiful_chat_app
 from agents.byoc_hashbrown_agent import byoc_hashbrown_app
 from agents.byoc_json_render_agent import byoc_json_render_app
 from agents.headless_complete import headless_complete_app
@@ -73,6 +74,7 @@ async def dispatch(self, request, call_next):
 app.mount("/headless-complete", headless_complete_app)
 app.mount("/declarative-gen-ui", a2ui_dynamic_app)
 app.mount("/a2ui-fixed-schema", a2ui_fixed_app)
+app.mount("/beautiful-chat", beautiful_chat_app)
 app.mount("/mcp-apps", mcp_apps_app)
 app.mount("/open-gen-ui", open_gen_ui_app)
 app.mount("/open-gen-ui-advanced", open_gen_ui_advanced_app)

showcase/integrations/ag2/src/agents/beautiful_chat.py

@@ -0,0 +1,138 @@
+"""AG2 agent for the simplified Beautiful Chat demo.
+
+This is a SIMPLIFIED port of the langgraph-python `beautiful_chat` graph.
+The canonical version simultaneously exercises three big features:
+
+1. A2UI Dynamic Schema (a `generate_a2ui` tool whose secondary LLM emits
+   schema-validated component compositions).
+2. Open Generative UI (the runtime auto-registers `generateSandboxedUi`
+   on the frontend; the agent calls it for richer free-form widgets).
+3. MCP Apps (an mcpApps server is mounted on the runtime; its tools and
+   UI resources are surfaced to the agent).
+
+For AG2 we ship the FIRST TWO surfaces in a single cell: A2UI dynamic
+generation for branded, component-bound visuals (KPIs, dashboards, status
+reports, simple charts) AND Open Generative UI for free-form / educational
+visualisations the catalog cannot express. We deliberately leave MCP out
+to keep the AG2 port focused — `/demos/mcp-apps` already covers MCP on
+its own.
+
+The agent owns `generate_a2ui` explicitly (mirroring `a2ui_dynamic.py`).
+The runtime route at `src/app/api/copilotkit-beautiful-chat/route.ts`
+sets `a2ui.injectA2UITool: false` so the runtime doesn't double-bind a
+second A2UI tool, and turns on `openGenerativeUI` for this agent so the
+runtime injects `generateSandboxedUi` on the frontend.
+"""
+
+from __future__ import annotations
+
+import json
+import os
+from typing import Annotated
+
+import openai
+from autogen import ConversableAgent, LLMConfig
+from autogen.ag_ui import AGUIStream
+from fastapi import FastAPI
+
+from tools import (
+    build_a2ui_operations_from_tool_call,
+    RENDER_A2UI_TOOL_SCHEMA,
+)
+
+
+SYSTEM_PROMPT = """You are the Beautiful Chat assistant — a CopilotKit
+showcase agent that answers user questions with rich, branded visuals.
+
+You have TWO complementary visual surfaces. Pick whichever fits the
+request best, but ALWAYS render something visual rather than replying
+with plain text when the question warrants it.
+
+1. `generate_a2ui` — for STRUCTURED, branded visuals composed from a
+   registered React catalog. Use it for:
+     - KPI dashboards (Metric + Card + Row/Column layouts)
+     - Status reports (StatusBadge / Card)
+     - Pie charts of part-of-whole breakdowns (PieChart)
+     - Bar charts comparing categories (BarChart)
+     - Info panels and quick summaries
+
+   Pass a single `context` argument summarising the conversation; the
+   secondary LLM will design the composition against the registered
+   catalog (Card, StatusBadge, Metric, InfoRow, PrimaryButton,
+   PieChart, BarChart, plus the basic A2UI primitives).
+
+2. `generateSandboxedUi` — auto-registered by the frontend when Open
+   Generative UI is enabled. Use it for FREE-FORM visualisations the
+   catalog cannot express:
+     - Educational visualisations (algorithm walkthroughs, neural-net
+       activations, geometric proofs, physics simulations)
+     - Custom illustrations / diagrams
+     - Anything intricate that needs inline SVG, CSS animation, or an
+       interactive sandboxed widget
+
+   Output `initialHeight` (typically 480-560), a short
+   `placeholderMessages` array, complete `css`, then `html` with inline
+   SVG. No fetch / XHR / localStorage.
+
+Decision rule of thumb: if the request maps to a chart, dashboard,
+status report, or KPI summary, prefer `generate_a2ui`. If it asks for a
+diagram, animation, or anything outside the catalog's components,
+prefer `generateSandboxedUi`. Either way, keep the chat reply to one
+short sentence — let the visual do the talking.
+"""
+
+
+async def generate_a2ui(
+    context: Annotated[str, "Conversation context summary the secondary LLM should design UI from"],
+) -> str:
+    """Generate dynamic A2UI components based on the conversation.
+
+    Mirrors `a2ui_dynamic.py`: a secondary LLM is bound to the
+    `render_a2ui` tool with `tool_choice` forced, and the resulting
+    arguments are wrapped into an `a2ui_operations` container the
+    runtime A2UI middleware detects and forwards to the frontend.
+    """
+    client = openai.OpenAI()
+    response = client.chat.completions.create(
+        model="gpt-4.1",
+        messages=[
+            {
+                "role": "system",
+                "content": context or "Generate a useful dashboard UI.",
+            },
+            {
+                "role": "user",
+                "content": "Generate a dynamic A2UI dashboard based on the conversation.",
+            },
+        ],
+        tools=[{
+            "type": "function",
+            "function": RENDER_A2UI_TOOL_SCHEMA,
+        }],
+        tool_choice={"type": "function", "function": {"name": "render_a2ui"}},
+    )
+
+    choice = response.choices[0]
+    if choice.message.tool_calls:
+        args = json.loads(choice.message.tool_calls[0].function.arguments)
+        result = build_a2ui_operations_from_tool_call(args)
+        return json.dumps(result)
+
+    return json.dumps({"error": "LLM did not call render_a2ui"})
+
+
+agent = ConversableAgent(
+    name="beautiful_chat_assistant",
+    system_message=SYSTEM_PROMPT,
+    llm_config=LLMConfig({"model": "gpt-4.1", "stream": True}),
+    human_input_mode="NEVER",
+    # The agent may call generate_a2ui (its own backend tool) and
+    # generateSandboxedUi (frontend tool injected by the OGUI runtime
+    # middleware). Cap the loop to keep tool storms bounded.
+    max_consecutive_auto_reply=8,
+    functions=[generate_a2ui],
+)
+
+stream = AGUIStream(agent)
+beautiful_chat_app = FastAPI()
+beautiful_chat_app.mount("", stream.build_asgi())

showcase/integrations/ag2/src/app/api/copilotkit-beautiful-chat/route.ts

@@ -0,0 +1,69 @@
+// Dedicated runtime for the (simplified) Beautiful Chat showcase cell.
+//
+// Beautiful Chat combines TWO of the canonical reference's three flagship
+// features in a single cell:
+//   - A2UI Dynamic Schema (branded React catalog, agent-owned `generate_a2ui`)
+//   - Open Generative UI (auto-injected `generateSandboxedUi` frontend tool)
+//
+// Splitting into its own endpoint matters because:
+//   - `openGenerativeUI` flips a global probe flag that, on the shared
+//     `/api/copilotkit` route, would wipe per-cell `useFrontendTool` /
+//     `useComponent` registrations (see comment in `copilotkit-ogui/route.ts`).
+//   - `a2ui.injectA2UITool: false` is required so the runtime doesn't
+//     double-bind a second A2UI tool over the agent-owned `generate_a2ui`.
+//
+// References:
+// - showcase/integrations/langgraph-python/src/app/api/copilotkit-beautiful-chat/route.ts
+// - src/app/api/copilotkit-declarative-gen-ui/route.ts (a2ui scoping pattern)
+// - src/app/api/copilotkit-ogui/route.ts (openGenerativeUI scoping pattern)
+
+import { NextRequest, NextResponse } from "next/server";
+import {
+  CopilotRuntime,
+  ExperimentalEmptyAdapter,
+  copilotRuntimeNextJSAppRouterEndpoint,
+} from "@copilotkit/runtime";
+import { HttpAgent } from "@ag-ui/client";
+
+const AGENT_URL = process.env.AGENT_URL || "http://localhost:8000";
+
+const beautifulChatAgent = new HttpAgent({
+  url: `${AGENT_URL}/beautiful-chat/`,
+});
+
+const runtime = new CopilotRuntime({
+  // @ts-ignore -- see main route.ts
+  agents: { "beautiful-chat": beautifulChatAgent },
+  // The agent owns `generate_a2ui` explicitly (see
+  // src/agents/beautiful_chat.py). The runtime middleware still serialises
+  // the registered client catalog into agent context and detects
+  // `a2ui_operations` containers in the tool result; it just must NOT bind
+  // a second A2UI tool on top.
+  a2ui: {
+    injectA2UITool: false,
+  },
+  // Turn on Open Generative UI for this agent. The runtime middleware
+  // injects `generateSandboxedUi` as a frontend tool the LLM can call,
+  // and converts streaming tool-call deltas into `open-generative-ui`
+  // activity events the built-in renderer mounts in a sandboxed iframe.
+  openGenerativeUI: {
+    agents: ["beautiful-chat"],
+  },
+});
+
+export const POST = async (req: NextRequest) => {
+  try {
+    const { handleRequest } = copilotRuntimeNextJSAppRouterEndpoint({
+      endpoint: "/api/copilotkit-beautiful-chat",
+      serviceAdapter: new ExperimentalEmptyAdapter(),
+      runtime,
+    });
+    return await handleRequest(req);
+  } catch (error: unknown) {
+    const e = error as { message?: string; stack?: string };
+    return NextResponse.json(
+      { error: e.message, stack: e.stack },
+      { status: 500 },
+    );
+  }
+};

showcase/integrations/ag2/src/app/demos/beautiful-chat/README.md

@@ -0,0 +1,76 @@
+# Beautiful Chat (Simplified — AG2)
+
+## What This Demo Shows
+
+A simplified port of the langgraph-python `beautiful-chat` flagship cell.
+The canonical reference combines THREE big features on a single runtime
+(A2UI Dynamic + Open Generative UI + MCP Apps); the AG2 port ships the
+first two together in a single cell so you can see them coexist:
+
+- **A2UI Dynamic Schema** — the agent calls `generate_a2ui` to render
+  branded compositions from a registered React catalog (Card,
+  StatusBadge, Metric, InfoRow, PieChart, BarChart, plus the basic A2UI
+  primitives).
+- **Open Generative UI** — the runtime auto-injects
+  `generateSandboxedUi` as a frontend tool, and the agent picks it for
+  free-form visuals the catalog cannot express (educational
+  illustrations, algorithm walkthroughs, animations).
+
+MCP Apps is NOT bundled here — see `/demos/mcp-apps` for a dedicated
+MCP cell. Keeping MCP separate keeps the AG2 port focused.
+
+## How to Interact
+
+Try asking the agent for both kinds of visuals:
+
+**A2UI (catalog-bound):**
+
+- "Show me a quick KPI dashboard with 3-4 metrics."
+- "Show a pie chart of sales by region."
+- "Render a bar chart of quarterly revenue."
+- "Give me a status report on system health."
+
+**Open Generative UI (free-form):**
+
+- "Animate how a simple feed-forward neural network processes an input."
+- "Visualize quicksort on ~10 bars of varying heights."
+- "Show a 3D axis visualisation with pitch/yaw/roll labels."
+
+The agent's system prompt (`src/agents/beautiful_chat.py`) has a
+decision rule: structured / catalog-shaped requests go through
+`generate_a2ui`; everything else goes through `generateSandboxedUi`.
+
+## Technical Details
+
+- **Frontend page:** `./page.tsx` — single combined `<CopilotKit>` with
+  `a2ui={{ catalog: myCatalog }}` AND
+  `openGenerativeUI={{ designSkill: ... }}`.
+- **Frontend catalog:** imported directly from
+  `../declarative-gen-ui/a2ui/catalog` — no duplicate copy. That same
+  catalog backs the dedicated `/demos/declarative-gen-ui` cell.
+- **Backend agent:** `src/agents/beautiful_chat.py` — owns
+  `generate_a2ui` explicitly (mirrors `a2ui_dynamic.py`); the system
+  prompt steers the LLM toward `generate_a2ui` for structured outputs
+  and `generateSandboxedUi` for free-form visuals.
+- **Backend mount:** `/beautiful-chat` in `src/agent_server.py`.
+- **Runtime route:** `src/app/api/copilotkit-beautiful-chat/route.ts` —
+  dedicated endpoint with `a2ui.injectA2UITool: false` (agent owns the
+  tool) and `openGenerativeUI.agents: ["beautiful-chat"]`. Both flags
+  are scoped to this cell so they don't leak into the shared
+  `/api/copilotkit` endpoint.
+
+## Reference
+
+- Canonical (langgraph-python):
+  `showcase/integrations/langgraph-python/src/app/demos/beautiful-chat/`
+- A2UI: https://docs.copilotkit.ai/integrations/langgraph/generative-ui/a2ui
+- Open Generative UI: https://docs.copilotkit.ai/generative-ui/open-generative-ui
+
+## What's NOT Ported From the Canonical Reference
+
+- **MCP Apps** — covered separately by `/demos/mcp-apps`.
+- **App-mode toggle** (todos canvas, mode-toggle, theme provider,
+  layout-level chrome) — out of scope for the simplified port; the AG2
+  cell focuses on the dual-surface chat.
+- **A2UI Fixed Schema** inside the same cell — covered separately by
+  `/demos/a2ui-fixed-schema`.