docs(showcase/langgraph-fastapi): region markers for agentic-chat + tool-rendering

Same pattern as langgraph-typescript. The weather-tool-backend region
already existed in src/agents/src/tool_rendering_agent.py; just added
the file to the manifest highlight so the bundler picks it up.

Author: samjulien

showcase/integrations/langgraph-fastapi/manifest.yaml

@@ -78,6 +78,9 @@ demos:
       - agent-capabilities
     route: /demos/tool-rendering
     animated_preview_url:
+    highlight:
+      - src/agents/src/tool_rendering_agent.py
+      - src/app/demos/tool-rendering/page.tsx
   - id: hitl
     name: In-Chat Human in the Loop (Original)
     description: User approves agent actions before execution

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

@@ -0,0 +1,28 @@
+// 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 region 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 {
+  CopilotChat,
+  useConfigureSuggestions,
+} from "@copilotkit/react-core/v2";
+
+// @region[chat-component]
+export function Chat() {
+  useConfigureSuggestions({
+    suggestions: [
+      { title: "Write a sonnet", message: "Write a short sonnet about AI." },
+    ],
+    available: "always",
+  });
+
+  return <CopilotChat agentId="agentic_chat" className="h-full rounded-2xl" />;
+}
+// @endregion[chat-component]

showcase/integrations/langgraph-fastapi/src/app/demos/agentic-chat/page.tsx

@@ -13,9 +13,11 @@ import { z } from "zod";
 
 export default function AgenticChatDemo() {
   return (
+    // @region[provider-setup]
     <CopilotKit runtimeUrl="/api/copilotkit" agent="agentic_chat">
       <Chat />
     </CopilotKit>
+    // @endregion[provider-setup]
   );
 }
 
@@ -68,6 +70,7 @@ function Chat() {
     },
   });
 
+  // @region[configure-suggestions]
   useConfigureSuggestions({
     suggestions: [
       {
@@ -81,6 +84,7 @@ function Chat() {
     ],
     available: "always",
   });
+  // @endregion[configure-suggestions]
 
   return (
     <div

showcase/integrations/langgraph-fastapi/src/app/demos/tool-rendering/page.tsx

@@ -27,6 +27,7 @@ export default function ToolRenderingDemo() {
 }
 
 function Chat() {
+  // @region[render-weather-tool]
   useRenderTool({
     name: "get_weather",
     parameters: z.object({
@@ -61,6 +62,7 @@ function Chat() {
       );
     },
   });
+  // @endregion[render-weather-tool]
 
   useConfigureSuggestions({
     suggestions: [

showcase/integrations/langgraph-fastapi/src/app/demos/tool-rendering/render-flight-tool.snippet.tsx

@@ -0,0 +1,87 @@
+// Docs-only snippet — not imported or rendered. Mastra's tool-rendering
+// demo at page.tsx exercises the get_weather renderer only; the docs
+// page at /generative-ui/tool-rendering also teaches the search_flights
+// per-tool pattern and the wildcard catch-all. These two regions show
+// what those would look like in the same Mastra demo shape, so the
+// docs can render real teaching code rather than a missing-snippet box.
+//
+// See chat-component.snippet.tsx in agentic-chat for the same pattern.
+
+import { useRenderTool, useDefaultRenderTool } from "@copilotkit/react-core/v2";
+import { z } from "zod";
+
+type CatchallToolStatus = "in_progress" | "complete" | "error";
+
+interface FlightSearchResult {
+  origin?: string;
+  destination?: string;
+  flights?: unknown[];
+}
+
+function FlightListCard(_props: {
+  loading: boolean;
+  origin: string;
+  destination: string;
+  flights: unknown[];
+}) {
+  return null;
+}
+
+function CustomCatchallRenderer(_props: {
+  name: string;
+  parameters: unknown;
+  status: CatchallToolStatus;
+  result: unknown;
+}) {
+  return null;
+}
+
+function parseJsonResult<T>(_result: unknown): T {
+  return {} as T;
+}
+
+export function FlightToolRenderers() {
+  // @region[render-flight-tool]
+  // Per-tool renderer: search_flights → branded FlightListCard.
+  useRenderTool(
+    {
+      name: "search_flights",
+      parameters: z.object({
+        origin: z.string(),
+        destination: z.string(),
+      }),
+      render: ({ parameters, result, status }) => {
+        const loading = status !== "complete";
+        const parsed = parseJsonResult<FlightSearchResult>(result);
+        return (
+          <FlightListCard
+            loading={loading}
+            origin={parameters?.origin ?? parsed.origin ?? ""}
+            destination={parameters?.destination ?? parsed.destination ?? ""}
+            flights={parsed.flights ?? []}
+          />
+        );
+      },
+    },
+    [],
+  );
+  // @endregion[render-flight-tool]
+
+  // @region[catchall-renderer]
+  // Wildcard catch-all for every remaining tool — anything the agent might
+  // call that doesn't have a dedicated useRenderTool registration.
+  useDefaultRenderTool(
+    {
+      render: ({ name, parameters, status, result }) => (
+        <CustomCatchallRenderer
+          name={name}
+          parameters={parameters}
+          status={status as CatchallToolStatus}
+          result={result}
+        />
+      ),
+    },
+    [],
+  );
+  // @endregion[catchall-renderer]
+}