feat: add beautiful-chat to agno + stub unsupported interrupt demos

Beautiful Chat (simplified) — polished landing-style chat shell over the
shared agentic_chat agent with gradient theming, suggestion pills, and an
example dashboard surface (BarChart + PieChart re-used from byoc-json-
render). Mirrors the spring-ai simplified port; full A2UI demonstration
catalog is out of scope while Agno lacks an A2UI middleware adapter.

gen-ui-interrupt + interrupt-headless — stubbed as not_supported_features
in manifest.yaml. Agno has no graph-level interrupt primitive, so each
stub page documents the gap and links to the closest Agno-supported
pattern (hitl-in-chat for in-chat blocking, hitl-in-app for out-of-chat
blocking via async useFrontendTool).

Author: AlemTuzlak

showcase/integrations/agno/manifest.yaml

@@ -56,6 +56,10 @@ features:
   - tool-rendering-reasoning-chain
   - headless-complete
   - auth
+  - beautiful-chat
+not_supported_features:
+  - gen-ui-interrupt
+  - interrupt-headless
 demos:
   - id: cli-start
     name: CLI Start Command
@@ -474,6 +478,19 @@ demos:
       - src/app/demos/byoc-json-render/registry.tsx
       - src/app/demos/byoc-json-render/catalog.ts
       - src/app/api/copilotkit-byoc-json-render/route.ts
+  - id: beautiful-chat
+    name: Beautiful Chat
+    description: Polished landing-style chat shell over the shared Agno agent — gradient background, suggestion pills, and an example dashboard surface
+    tags:
+      - chat-ui
+    route: /demos/beautiful-chat
+    animated_preview_url:
+    highlight:
+      - src/agents/main.py
+      - src/app/demos/beautiful-chat/page.tsx
+      - src/app/demos/byoc-json-render/charts/bar-chart.tsx
+      - src/app/demos/byoc-json-render/charts/pie-chart.tsx
+      - src/app/api/copilotkit/route.ts
 managed_platform:
   name: Agent OS
   url: https://os.agno.com

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

@@ -0,0 +1,42 @@
+# Beautiful Chat (Agno port — simplified)
+
+## What this demo shows
+
+A polished, landing-style chat surface backed by the shared Agno
+`agentic_chat` agent. The page is split into two columns:
+
+- **Left** — an example app surface with a couple of demonstration charts
+  (weekly sessions bar chart, surface-mix pie chart). Useful as a target
+  for the assistant to talk about.
+- **Right** — a `CopilotChat` panel skinned with the brand gradient,
+  rounded card, and seeded suggestion pills.
+
+## How to interact
+
+Use one of the seeded suggestion pills, or ask the assistant something
+like:
+
+- "Summarize the dashboard on the left."
+- "Plan a 3-day Tokyo trip for a solo traveler."
+- "Draft a launch email for our new chat feature."
+
+## Adaptation note
+
+The canonical `langgraph-python` beautiful-chat ships a much larger
+surface — a full A2UI demonstration catalog, a declarative-generative-UI
+catalog, per-tool renderers wired through `injectA2UITool: false`, custom
+theming, and a `GenerativeUIExamples` hook. That ecosystem depends on
+A2UI middleware that the Agno integration does not yet expose.
+
+The Agno port follows the simplified `spring-ai` pattern: the polished
+chat shell over the shared Agno chat agent, with suggestion pills and a
+few static charts on the side. The cosmetic layer (suggestions, theming,
+composer skin, side canvas) lives entirely on the frontend; the runtime
+stays on the shared `/api/copilotkit` endpoint.
+
+## Related
+
+- Backend agent: `src/agents/main.py` (the same one `agentic-chat` uses)
+- Charts: re-uses `src/app/demos/byoc-json-render/charts/` for the
+  Recharts-backed `BarChart` and `PieChart` components.
+- Full reference: `showcase/integrations/langgraph-python/src/app/demos/beautiful-chat/`

showcase/integrations/agno/src/app/demos/beautiful-chat/page.tsx

@@ -0,0 +1,134 @@
+"use client";
+
+/**
+ * Beautiful Chat (Agno port — simplified).
+ *
+ * A polished landing-style chat cell with brand theming, suggestion pills,
+ * and an example app surface that swaps in a couple of demonstration
+ * charts the user can ask the agent to talk about. The canonical
+ * langgraph-python version of beautiful-chat ships a much larger surface
+ * (full A2UI demonstration catalog, declarative-generative-UI catalog,
+ * per-tool renderers wired through `injectA2UITool: false`, custom
+ * theming + GenerativeUIExamples). Agno does not yet expose an A2UI
+ * adapter, so this port mirrors the `spring-ai` simplified port: it
+ * keeps the polished shell, suggestion pills, and a couple of static
+ * charts on the side, and runs against the main `/api/copilotkit`
+ * endpoint with the shared Agno chat agent.
+ *
+ * Runtime: shared `/api/copilotkit` endpoint (no dedicated runtime). The
+ * Agno backend is the same `agentic_chat` agent the agentic-chat cell
+ * uses — the cosmetic layer (suggestions, theming, composer skin, side
+ * canvas) lives entirely on the frontend.
+ */
+
+import {
+  CopilotKit,
+  CopilotChat,
+  useConfigureSuggestions,
+} from "@copilotkit/react-core/v2";
+import { BarChart } from "../byoc-json-render/charts/bar-chart";
+import { PieChart } from "../byoc-json-render/charts/pie-chart";
+
+const AGENT_ID = "agentic_chat";
+
+const BRAND_SUGGESTIONS = [
+  {
+    title: "Plan a 3-day Tokyo trip",
+    message:
+      "Plan a 3-day Tokyo trip for a solo traveler interested in food, art, and architecture. Keep it concise.",
+  },
+  {
+    title: "Explain RAG like I'm 12",
+    message:
+      "Explain retrieval-augmented generation as if I were 12. Use a simple analogy.",
+  },
+  {
+    title: "Draft a launch email",
+    message:
+      "Draft a short, upbeat launch email announcing a new AI-powered chat feature. 3 short paragraphs max.",
+  },
+  {
+    title: "Summarize this dashboard",
+    message:
+      "Summarize the dashboard on the left. What stands out about the bar and pie charts?",
+  },
+];
+
+const SAMPLE_BAR_DATA = [
+  { label: "Mon", value: 32 },
+  { label: "Tue", value: 48 },
+  { label: "Wed", value: 51 },
+  { label: "Thu", value: 44 },
+  { label: "Fri", value: 67 },
+  { label: "Sat", value: 38 },
+  { label: "Sun", value: 29 },
+];
+
+const SAMPLE_PIE_DATA = [
+  { label: "Chat", value: 42 },
+  { label: "Tools", value: 28 },
+  { label: "Gen UI", value: 18 },
+  { label: "Other", value: 12 },
+];
+
+export default function BeautifulChatPage() {
+  return (
+    <CopilotKit runtimeUrl="/api/copilotkit" agent={AGENT_ID}>
+      <div
+        className="relative flex h-screen w-full overflow-hidden"
+        style={{
+          background:
+            "radial-gradient(1200px 600px at 10% 10%, rgba(99,102,241,0.20), transparent 50%), radial-gradient(1000px 500px at 90% 90%, rgba(133,236,206,0.18), transparent 55%), linear-gradient(180deg, #FBFBFE 0%, #F4F4F8 100%)",
+        }}
+      >
+        <div className="pointer-events-none absolute inset-0 [background:radial-gradient(circle_at_50%_0%,rgba(190,194,255,0.35),transparent_40%)]" />
+
+        {/* App surface (left) */}
+        <div className="relative hidden flex-1 flex-col gap-4 overflow-y-auto px-8 py-10 lg:flex">
+          <header className="space-y-1">
+            <div className="text-[10px] font-medium uppercase tracking-[0.14em] text-[#57575B]">
+              Beautiful chat
+            </div>
+            <h1 className="text-3xl font-semibold tracking-tight text-[#010507]">
+              Polished Agno surface
+            </h1>
+            <p className="max-w-xl text-sm text-[#3A3A46]">
+              A flagship-style chat shell over the shared Agno backend. Ask the
+              assistant a question, pick a suggestion pill, or have it talk
+              through the example dashboard.
+            </p>
+          </header>
+
+          <div className="grid grid-cols-1 gap-4 xl:grid-cols-2">
+            <BarChart
+              title="Weekly active sessions"
+              description="Sessions per day across the demo workspace."
+              data={SAMPLE_BAR_DATA}
+            />
+            <PieChart
+              title="Surface mix"
+              description="Where users are spending their time."
+              data={SAMPLE_PIE_DATA}
+            />
+          </div>
+        </div>
+
+        {/* Chat (right) */}
+        <div className="relative flex w-full max-w-xl flex-col gap-3 px-4 py-8 lg:px-6">
+          <div className="flex-1 overflow-hidden rounded-2xl border border-[#E5E5ED] bg-white/70 shadow-[0_1px_0_0_rgba(0,0,0,0.02),0_10px_40px_-10px_rgba(99,102,241,0.18)] backdrop-blur-sm">
+            <Chat />
+          </div>
+        </div>
+      </div>
+    </CopilotKit>
+  );
+}
+
+function Chat() {
+  useConfigureSuggestions({
+    suggestions: BRAND_SUGGESTIONS,
+    available: "always",
+  });
+
+  return <CopilotChat agentId={AGENT_ID} className="h-full rounded-2xl" />;
+}

showcase/integrations/agno/src/app/demos/gen-ui-interrupt/README.md

@@ -0,0 +1,34 @@
+# Gen UI Interrupt — Not Supported on Agno
+
+## Why this demo is stubbed
+
+The canonical LangGraph version of `gen-ui-interrupt` uses LangGraph's
+graph-level `interrupt()` primitive together with the frontend
+`useInterrupt` hook:
+
+1. Inside a node, the graph calls `interrupt({...payload})` and pauses.
+2. The frontend `useInterrupt` hook renders a card inside the chat from
+   the surfaced payload.
+3. When the user picks a slot, the frontend resumes the run via
+   `copilotkit.runAgent({ forwardedProps: { command: { resume } } })`,
+   carrying the user-supplied value back into the paused node.
+
+Agno has no equivalent graph-level interrupt primitive. An Agno agent
+runs to completion on each invocation, and there is no pause / resume API
+that can carry client-supplied state across a suspension. The demo is
+therefore documented and stubbed here rather than ported.
+
+## What to use instead on Agno
+
+For "agent blocks on user confirmation before proceeding", use Agno's
+`hitl-in-chat` demo (`useHumanInTheLoop`), which renders a card inside
+the chat and waits for the user to act. The user-visible UX is similar
+even though the underlying mechanism differs.
+
+## Related
+
+- Canonical implementation:
+  `showcase/integrations/langgraph-python/src/app/demos/gen-ui-interrupt`
+- Closest Agno-supported pattern:
+  `src/app/demos/hitl-in-chat` (in this integration)
+- Manifest entry: `not_supported_features` in `showcase/integrations/agno/manifest.yaml`

showcase/integrations/agno/src/app/demos/gen-ui-interrupt/page.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+/**
+ * Gen UI Interrupt — NOT SUPPORTED for Agno.
+ *
+ * The canonical LangGraph version of this demo uses LangGraph's native
+ * `interrupt()` graph primitive plus the `useInterrupt` hook to pause a
+ * graph run mid-execution and surface a payload that the frontend renders
+ * inline in the chat. The user picks a slot, the frontend resumes the run
+ * via `copilotkit.runAgent({ forwardedProps: { command: { resume } } })`,
+ * and the agent continues with the user-supplied value.
+ *
+ * Agno has no equivalent graph-level interrupt primitive — an Agno agent
+ * runs to completion on each invocation and does not expose a pause /
+ * resume API that can carry client-supplied state across a suspension.
+ * This demo is therefore stubbed rather than ported.
+ *
+ * See `manifest.yaml` → `not_supported_features` and the README for
+ * details and pointers to the closest available patterns.
+ */
+
+import Link from "next/link";
+
+export default function GenUiInterruptUnsupportedPage() {
+  return (
+    <div
+      data-testid="gen-ui-interrupt-unsupported"
+      className="flex min-h-screen w-full items-center justify-center bg-[#FAFAFC] px-6 py-12"
+    >
+      <div className="w-full max-w-xl rounded-2xl border border-[#DBDBE5] bg-white p-8 shadow-[0_10px_40px_-20px_rgba(1,5,7,0.18)]">
+        <div className="mb-3 inline-flex items-center gap-2 rounded-full border border-[#DBDBE5] bg-[#FAFAFC] px-3 py-1 text-[10px] font-medium uppercase tracking-[0.14em] text-[#57575B]">
+          <span className="inline-flex h-1.5 w-1.5 rounded-full bg-[#F2A2A2]" />
+          Not supported on Agno
+        </div>
+        <h1 className="mb-2 text-2xl font-semibold tracking-tight text-[#010507]">
+          Gen UI Interrupt
+        </h1>
+        <p className="mb-4 text-sm leading-relaxed text-[#3A3A46]">
+          This demo relies on a graph-level <code>interrupt()</code> primitive
+          (LangGraph) that pauses a run mid-execution and resumes it with a
+          client-supplied value. Agno does not currently expose an equivalent
+          primitive, so the demo is documented but not runnable on this
+          integration.
+        </p>
+        <p className="mb-6 text-sm leading-relaxed text-[#3A3A46]">
+          The closest Agno-supported pattern for blocking on user input is{" "}
+          <Link
+            href="/demos/hitl-in-chat"
+            className="font-medium text-[#6366F1] underline-offset-2 hover:underline"
+          >
+            in-chat human-in-the-loop
+          </Link>
+          {" "}via <code>useHumanInTheLoop</code>, which renders a card inside
+          the chat and waits for the user to confirm before the agent
+          proceeds.
+        </p>
+        <div className="text-xs text-[#57575B]">
+          See the canonical implementation in{" "}
+          <code>
+            showcase/integrations/langgraph-python/src/app/demos/gen-ui-interrupt
+          </code>
+          .
+        </div>
+      </div>
+    </div>
+  );
+}

showcase/integrations/agno/src/app/demos/interrupt-headless/README.md

@@ -0,0 +1,31 @@
+# Headless Interrupt — Not Supported on Agno
+
+## Why this demo is stubbed
+
+The canonical LangGraph version of `interrupt-headless` drives a picker
+UI rendered OUTSIDE the chat (in the app surface) using a custom
+`useHeadlessInterrupt` hook on top of `useAgent` + `useCopilotKit`. The
+hook reads LangGraph's native `interrupt()` event from the AG-UI stream
+and resumes the run via
+`copilotkit.runAgent({ forwardedProps: { command: { resume, ... } } })`.
+
+Agno has no equivalent graph-level interrupt primitive. An Agno agent
+runs to completion on each invocation, and there is no pause / resume
+API that can carry client-supplied state across a suspension. The demo
+is therefore documented and stubbed here rather than ported.
+
+## What to use instead on Agno
+
+For "agent blocks on user input rendered as a modal OUTSIDE the chat",
+use Agno's `hitl-in-app` demo. It registers an async `useFrontendTool`
+whose handler returns a Promise that only resolves once the user
+interacts with a host-rendered modal — equivalent UX, different
+underlying mechanism.
+
+## Related
+
+- Canonical implementation:
+  `showcase/integrations/langgraph-python/src/app/demos/interrupt-headless`
+- Closest Agno-supported pattern:
+  `src/app/demos/hitl-in-app` (in this integration)
+- Manifest entry: `not_supported_features` in `showcase/integrations/agno/manifest.yaml`