docs(showcase/agno): region markers across 12 cells

Bring agno to feature parity with the langgraph-python reference for
shell-docs region markers. Round 5 of the per-framework sweep
(mastra CopilotKit#4326, smalls batch CopilotKit#4361, ms-agent CopilotKit#4363, google-adk CopilotKit#4369).

Cells advanced (12):
- agentic-chat: sibling chat-component.snippet.tsx (chat-component,
  configure-suggestions, provider-setup) — production page.tsx mixes
  unrelated frontend tools / agent context for QA.
- chat-customization-css: in-place css-variables in theme.css,
  theme-css-import in page.tsx.
- chat-slots: in-place register-welcome-slot, register-disclaimer-slot,
  register-assistant-message-slot in page.tsx.
- headless-simple: in-place use-agent-simple, message-list-simple in
  page.tsx.
- prebuilt-popup: in-place popup-basic-setup in page.tsx.
- prebuilt-sidebar: in-place sidebar-basic-setup, sidebar-configuration
  in page.tsx.
- readonly-state-agent-context: in-place context-provider-sketch,
  use-agent-context-call in page.tsx.
- shared-state-read-write: in-place use-agent-read, use-agent-write
  in page.tsx; preferences-card-render in preferences-card.tsx;
  notes-card-render in notes-card.tsx.
- subagents: in-place delegation-log-frontend in delegation-log.tsx;
  subagent-setup, supervisor-delegation-tools in agents/subagents.py.
- tool-rendering: sibling render-flight-tool.snippet.tsx with
  render-weather-tool, render-flight-tool, catchall-renderer; in-place
  weather-tool-backend on get_weather in agents/main.py — the docs page
  teaches per-tool + catchall patterns the production page.tsx doesn't
  exercise (weather-only render, shared god-file backend).
- tool-rendering-custom-catchall: in-place
  use-default-render-tool-wildcard in page.tsx.
- tool-rendering-default-catchall: in-place default-catchall-zero-config
  in page.tsx.

Manifest: no changes — sibling .snippet.tsx files are picked up by the
demo-content bundler walking the demo folder, no explicit highlight
needed.

Verification: re-ran the audit script; missing-region count for agno
dropped from 12 cells → 0.

Author: samjulien

showcase/integrations/agno/src/agents/main.py

@@ -20,6 +20,7 @@
 load_dotenv()
 
 
+# @region[weather-tool-backend]
 @tool
 def get_weather(location: str):
     """
@@ -32,6 +33,7 @@ def get_weather(location: str):
         str: Weather data as JSON.
     """
     return json.dumps(get_weather_impl(location))
+# @endregion[weather-tool-backend]
 
 
 @tool

showcase/integrations/agno/src/agents/subagents.py

@@ -37,6 +37,11 @@
 _SUB_MODEL_ID = "gpt-4o-mini"
 
 
+# @region[subagent-setup]
+# Each sub-agent is a full Agno `Agent(...)` with its own system prompt.
+# They don't share memory or tools with the supervisor — the supervisor
+# only sees their final text response, which is returned via the
+# delegation tool below.
 _research_agent = Agent(
     model=OpenAIChat(id=_SUB_MODEL_ID, timeout=120),
     description="Research sub-agent.",
@@ -64,6 +69,7 @@
         "2-3 crisp, actionable critiques. No preamble."
     ),
 )
+# @endregion[subagent-setup]
 
 
 def _invoke_sub_agent(sub_agent: Agent, task: str) -> str:
@@ -182,6 +188,12 @@ def _delegate(
 # ---------------------------------------------------------------------------
 
 
+# @region[supervisor-delegation-tools]
+# Each function is a tool exposed to the supervisor agent. The supervisor
+# LLM "calls" these to delegate work; each call synchronously runs the
+# matching sub-agent, records the delegation into shared state, and
+# returns the sub-agent's output as the tool result the supervisor reads
+# on its next step.
 def research_agent(run_context: RunContext, task: str) -> dict[str, Any]:
     """Delegate a research task to the research sub-agent.
 
@@ -224,6 +236,7 @@ def critique_agent(run_context: RunContext, task: str) -> dict[str, Any]:
         sub_agent=_critique_agent,
         task=task,
     )
+# @endregion[supervisor-delegation-tools]
 
 
 # ---------------------------------------------------------------------------

showcase/integrations/agno/src/app/demos/agentic-chat/chat-component.snippet.tsx

@@ -0,0 +1,46 @@
+// Docs-only snippet — not imported or rendered. The actual route is served
+// by page.tsx, which carries QA hooks (frontend tools, render tools, agent
+// context) that aren't relevant to the prebuilt-chat docs page. This file
+// gives the docs a minimal Chat definition to point at via the
+// chat-component / configure-suggestions / provider-setup regions without
+// disturbing the runtime demo.
+//
+// Why a sibling file: the bundler walks every file in the demo folder and
+// extracts region markers from each, so a docs-targeted teaching example
+// can live alongside the production demo without being wired into the
+// route. See: showcase/scripts/bundle-demo-content.ts.
+
+import { CopilotKit } from "@copilotkit/react-core";
+import {
+  CopilotChat,
+  useConfigureSuggestions,
+} from "@copilotkit/react-core/v2";
+
+// @region[chat-component]
+function Chat() {
+  // @region[configure-suggestions]
+  useConfigureSuggestions({
+    suggestions: [
+      { title: "Write a sonnet", message: "Write a short sonnet about AI." },
+    ],
+    available: "always",
+  });
+  // @endregion[configure-suggestions]
+
+  return <CopilotChat agentId="agentic_chat" className="h-full rounded-2xl" />;
+}
+// @endregion[chat-component]
+
+export function AgenticChatPage() {
+  return (
+    // @region[provider-setup]
+    <CopilotKit runtimeUrl="/api/copilotkit" agent="agentic_chat">
+      <div className="flex justify-center items-center h-screen w-full">
+        <div className="h-full w-full max-w-4xl">
+          <Chat />
+        </div>
+      </div>
+    </CopilotKit>
+    // @endregion[provider-setup]
+  );
+}

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

@@ -7,7 +7,9 @@
 import React from "react";
 import { CopilotKit } from "@copilotkit/react-core";
 import { CopilotChat } from "@copilotkit/react-core/v2";
+// @region[theme-css-import]
 import "./theme.css";
+// @endregion[theme-css-import]
 
 export default function ChatCustomizationCssDemo() {
   return (

showcase/integrations/agno/src/app/demos/chat-customization-css/theme.css

@@ -3,6 +3,7 @@
  * leak out and affect the rest of the showcase app.
  */
 
+/* @region[css-variables] */
 /* CopilotKit CSS variable overrides (accent colors, etc.) */
 .chat-css-demo-scope {
   --copilot-kit-primary-color: #ff006e;
@@ -14,6 +15,7 @@
   --copilot-kit-separator-color: #ff006e;
   --copilot-kit-muted-color: #c2185b;
 }
+/* @endregion[css-variables] */
 
 /* Messages container */
 .chat-css-demo-scope .copilotKitMessages {

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

@@ -33,12 +33,18 @@ function Chat() {
     available: "always",
   });
 
+  // @region[register-welcome-slot]
   const welcomeScreen = CustomWelcomeScreen;
+  // @endregion[register-welcome-slot]
+  // @region[register-disclaimer-slot]
   const input = { disclaimer: CustomDisclaimer };
+  // @endregion[register-disclaimer-slot]
+  // @region[register-assistant-message-slot]
   const messageView = {
     assistantMessage:
       CustomAssistantMessage as unknown as typeof CopilotChatAssistantMessage,
   };
+  // @endregion[register-assistant-message-slot]
 
   return (
     <CopilotChat

showcase/integrations/agno/src/app/demos/headless-simple/page.tsx

@@ -34,6 +34,7 @@ function ShowCard({ title, body }: { title: string; body: string }) {
 }
 
 function HeadlessChat() {
+  // @region[use-agent-simple]
   const { agent } = useAgent({ agentId: "headless-simple" });
   const { copilotkit } = useCopilotKit();
   const [input, setInput] = useState("");
@@ -49,6 +50,7 @@ function HeadlessChat() {
   });
 
   const renderToolCall = useRenderToolCall();
+  // @endregion[use-agent-simple]
 
   const send = () => {
     const text = input.trim();
@@ -66,6 +68,7 @@ function HeadlessChat() {
     <div className="flex flex-col gap-3">
       <h1 className="text-xl font-semibold">Headless Chat (Simple)</h1>
       <div className="flex flex-col gap-2 rounded-xl border border-gray-200 bg-white p-4 min-h-[300px]">
+        {/* @region[message-list-simple] */}
         {agent.messages.length === 0 && (
           <div className="text-sm text-gray-400">No messages yet. Say hi!</div>
         )}
@@ -106,6 +109,7 @@ function HeadlessChat() {
         {agent.isRunning && (
           <div className="text-xs text-gray-400">Agent is thinking...</div>
         )}
+        {/* @endregion[message-list-simple] */}
       </div>
       <div className="flex gap-2">
         <textarea

showcase/integrations/agno/src/app/demos/prebuilt-popup/page.tsx

@@ -10,6 +10,7 @@ import {
 // Outer layer — provider + main content + floating popup launcher.
 export default function PrebuiltPopupDemo() {
   return (
+    // @region[popup-basic-setup]
     <CopilotKit runtimeUrl="/api/copilotkit" agent="prebuilt-popup">
       <MainContent />
       <CopilotPopup
@@ -21,6 +22,7 @@ export default function PrebuiltPopupDemo() {
       />
       <Suggestions />
     </CopilotKit>
+    // @endregion[popup-basic-setup]
   );
 }
 

showcase/integrations/agno/src/app/demos/prebuilt-sidebar/page.tsx

@@ -10,11 +10,15 @@ import {
 // Outer layer — provider + main content + sidebar.
 export default function PrebuiltSidebarDemo() {
   return (
+    // @region[sidebar-basic-setup]
     <CopilotKit runtimeUrl="/api/copilotkit" agent="prebuilt-sidebar">
       <MainContent />
+      {/* @region[sidebar-configuration] */}
       <CopilotSidebar agentId="prebuilt-sidebar" defaultOpen={true} />
+      {/* @endregion[sidebar-configuration] */}
       <Suggestions />
     </CopilotKit>
+    // @endregion[sidebar-basic-setup]
   );
 }
 

showcase/integrations/agno/src/app/demos/readonly-state-agent-context/page.tsx

@@ -37,13 +37,16 @@ const ACTIVITIES = [
 ];
 
 function DemoContent() {
+  // @region[context-provider-sketch]
   const [userName, setUserName] = useState("Atai");
   const [userTimezone, setUserTimezone] = useState("America/Los_Angeles");
   const [recentActivity, setRecentActivity] = useState<string[]>([
     ACTIVITIES[0],
     ACTIVITIES[2],
   ]);
+  // @endregion[context-provider-sketch]
 
+  // @region[use-agent-context-call]
   useAgentContext({
     description: "The currently logged-in user's display name",
     value: userName,
@@ -56,6 +59,7 @@ function DemoContent() {
     description: "The user's recent activity in the app, newest first",
     value: recentActivity,
   });
+  // @endregion[use-agent-context-call]
 
   useConfigureSuggestions({
     suggestions: [