feat(showcase/langgraph-python): Generative UI tool-rendering family

Five demos exercising the per-tool / catch-all / agent-state rendering
patterns. The three tool-rendering cells share the tool_rendering_agent
graph; they differ only in how the frontend renders the same tool
calls.

- tool-rendering (Tool Rendering - Specific) — per-tool useRenderTool
  for get_weather + search_flights, plus a useDefaultRenderTool wildcard
  for everything else.
- tool-rendering-default-catchall (Tool Rendering - Default) — single
  shadcn-styled wildcard via useDefaultRenderTool. Without registering
  *some* renderer the runtime has no `*` entry and tool calls render
  invisibly; this demo shows the minimum-viable shape.
- tool-rendering-custom-catchall (Tool Rendering - Custom Default) —
  same single-wildcard shape, branded with a custom card.

Backend system prompt (src/agents/tool_rendering_agent.py) defaults to
ONE tool per user question. Chaining is opt-in via a "Chain tools"
suggestion that triggers an explicit-ask exception in the prompt — the
previous default-on-chaining generated extra unsolicited tool-call
cards on every turn.

- gen-ui-tool-based (Generative UI: useComponent) — useComponent for
  render_bar_chart + render_pie_chart with Zod schemas; backend has
  tools=[] and the runtime injects the tools.
- gen-ui-agent (Generative UI: Agent State) — agent-state-driven step
  list. The Python graph plans steps via a `set_steps` tool that
  returns Command(update={"steps": …}); the frontend reads via
  useAgent({updates: [OnStateChanged]}) + a custom MessageList that
  renders steps inside CopilotChat's messageView.children slot.

Removed: src/app/demos/{tool-rendering,gen-ui-agent}/agent.py — TODO
stubs; real graphs live in src/agents/.

Author: tylerslaton

showcase/integrations/langgraph-python/src/agents/tool_rendering_agent.py

@@ -19,47 +19,37 @@
 from langchain_openai import ChatOpenAI
 from copilotkit import CopilotKitMiddleware
 
-# Multi-tool chaining prompt.
+# One-tool-per-question prompt.
 #
-# The goal of this demo is to surface MULTIPLE tool-call cards per turn so
-# the rendering patterns (per-tool + catch-all) get exercised visibly. The
-# prompt nudges the model toward an explore-then-enrich pattern (e.g.
-# `get_weather("Tokyo")` -> `search_flights(..., "Tokyo")`) without forcing
-# a rigid recipe: we describe the *habit*, not a chain.
+# This backend serves the tool-rendering demos, whose JOB is to show the
+# rendering patterns (per-tool, catch-all, default fallback). One tool
+# call per user turn is enough to demonstrate them — chained calls just
+# clutter the chat and surprise users.
 SYSTEM_PROMPT = (
     "You are a helpful travel & lifestyle concierge. You have mock tools "
-    "for weather, flights, stock prices, and dice rolls - they all return "
-    "fake data, so call them liberally.\n\n"
-    "Your habit is to CHAIN tools when one answer naturally invites another. "
-    "For a single user question, call at least TWO tools in succession when "
-    "the topic allows before composing your final reply. Examples of "
-    "helpful chains you should default to:\n"
-    "  - 'What's the weather in Tokyo?' -> call get_weather('Tokyo'), then "
-    "call search_flights(origin='SFO', destination='Tokyo') so the user "
-    "also sees how to get there.\n"
-    "  - 'How is AAPL doing?' -> call get_stock_price('AAPL'), then call "
-    "get_stock_price on a related ticker (e.g. 'MSFT' or 'GOOGL') for "
-    "comparison.\n"
-    "  - 'Roll a d20' -> call roll_dice(20), then call roll_dice again with "
-    "a different number of sides so the user sees a contrast.\n"
-    "  - 'Find flights from SFO to JFK' -> call search_flights, then call "
-    "get_weather on the destination city.\n\n"
-    "Only skip chaining when the user has clearly asked for a single, "
-    "atomic answer and more tool calls would feel intrusive. Never "
-    "fabricate data that a tool could provide."
+    "for weather, flights, stock prices, and dice rolls — they all return "
+    "fake data.\n\n"
+    "Routing rules:\n"
+    "  - Weather questions → call `get_weather` with the location.\n"
+    "  - Flight questions → call `search_flights` with origin and "
+    "destination (default origin to 'SFO' if the user only names a "
+    "destination).\n"
+    "  - Stock questions → call `get_stock_price` with the ticker.\n"
+    "  - Dice rolls → call `roll_dice` with the requested sides.\n"
+    "  - Anything else → reply in plain text.\n\n"
+    "By default, call exactly ONE tool per user question and do NOT chain "
+    "tools or fetch related data the user didn't ask for. The ONLY "
+    "exception is when the user explicitly asks you to chain or call "
+    "multiple tools in a single turn — then call each tool the user "
+    "requested. After tools return, write one short sentence summarizing "
+    "the result. Never fabricate data a tool could provide."
 )
 
 
 # @region[weather-tool-backend]
 @tool
 def get_weather(location: str) -> dict:
-    """Get the current weather for a given location.
-
-    Useful on its own for weather questions, and a great companion to
-    `search_flights` - always consider checking the weather at a
-    destination the user is flying to, and checking flights to any
-    city whose weather the user has just asked about.
-    """
+    """Get the current weather for a given location."""
     return {
         "city": location,
         "temperature": 68,
@@ -72,13 +62,7 @@ def get_weather(location: str) -> dict:
 
 @tool
 def search_flights(origin: str, destination: str) -> dict:
-    """Search mock flights from an origin airport to a destination airport.
-
-    Pairs naturally with `get_weather`: after searching flights, check
-    the weather at the destination so the user can plan. When the user
-    mentions a city without a matching origin, default the origin to
-    'SFO'.
-    """
+    """Search mock flights from an origin airport to a destination airport."""
     return {
         "origin": origin,
         "destination": destination,
@@ -110,12 +94,7 @@ def search_flights(origin: str, destination: str) -> dict:
 
 @tool
 def get_stock_price(ticker: str) -> dict:
-    """Get a mock current price for a stock ticker.
-
-    When the user asks about a single ticker, consider also pulling a
-    related ticker for context (e.g. if they ask about 'AAPL', also
-    fetch 'MSFT' or 'GOOGL' so the reply can compare).
-    """
+    """Get a mock current price for a stock ticker."""
     return {
         "ticker": ticker.upper(),
         "price_usd": round(100 + randint(0, 400) + randint(0, 99) / 100, 2),
@@ -125,12 +104,7 @@ def get_stock_price(ticker: str) -> dict:
 
 @tool
 def roll_dice(sides: int = 6) -> dict:
-    """Roll a single die with the given number of sides.
-
-    When the user asks for a roll, consider rolling twice with different
-    numbers of sides so the reply can show a contrast (e.g. a d6 AND a
-    d20).
-    """
+    """Roll a single die with the given number of sides."""
     return {"sides": sides, "result": randint(1, max(2, sides))}
 
 

showcase/integrations/langgraph-python/src/app/demos/gen-ui-agent/README.md

@@ -1,22 +1,10 @@
 # Agentic Generative UI
 
-## What This Demo Shows
+The agent renders custom UI as it works through long-running tasks, streaming
+status updates and intermediate results into the chat.
 
-Long-running agent tasks with generated UI
+Frontend uses `useAgentRender` to map agent-emitted UI types to React
+components, so the agent has full control over what appears in the transcript.
 
-## How to Interact
-
-Try asking your Copilot to:
-
-- "What's the weather like in San Francisco?"
-- "Show me current conditions in multiple cities"
-- "What should I wear in Tokyo today?"
-
-The agent generates custom UI components in the chat stream itself, rendering weather cards and interactive elements directly as part of its response.
-
-## Technical Details
-
-- **Agent-driven Generative UI** differs from tool-based — the agent directly emits UI components in the response stream
-- The agent's response includes structured data that CopilotKit renders as React components inline with the chat
-- Unlike tool-based gen UI, this approach gives the agent full control over when and how UI appears
-- The frontend registers renderers that map agent output types to React components
+The canonical description lives in the showcase manifest; this README is just
+a developer note alongside the demo source.

showcase/integrations/langgraph-python/src/app/demos/gen-ui-agent/agent.py

@@ -0,0 +1,26 @@
+"use client";
+
+import React from "react";
+import { InlineAgentStateCard, type Step } from "./InlineAgentStateCard";
+
+export function MessageListWithState({
+  messageElements,
+  interruptElement,
+  steps,
+  status,
+}: {
+  messageElements: React.ReactNode;
+  interruptElement: React.ReactNode;
+  steps: Step[];
+  status: "inProgress" | "complete";
+}) {
+  return (
+    <div data-testid="copilot-message-list" className="flex flex-col">
+      {messageElements}
+      {steps.length > 0 && (
+        <InlineAgentStateCard steps={steps} status={status} />
+      )}
+      {interruptElement}
+    </div>
+  );
+}

showcase/integrations/langgraph-python/src/app/demos/gen-ui-agent/message-list-with-state.tsx

@@ -1,15 +1,15 @@
 "use client";
 
 import React from "react";
-import { CopilotKit } from "@copilotkit/react-core";
 import {
   CopilotChat,
+  CopilotKit,
   useAgent,
   UseAgentUpdate,
-  useConfigureSuggestions,
 } from "@copilotkit/react-core/v2";
-import { InlineAgentStateCard } from "./InlineAgentStateCard";
 import type { Step } from "./InlineAgentStateCard";
+import { MessageListWithState } from "./message-list-with-state";
+import { useSuggestions } from "./suggestions";
 
 /**
  * Agentic Generative UI — In-Chat State Rendering
@@ -51,24 +51,7 @@ function Chat() {
     updates: [UseAgentUpdate.OnStateChanged],
   });
 
-  useConfigureSuggestions({
-    suggestions: [
-      {
-        title: "Plan a product launch",
-        message: "Plan a product launch for a new mobile app.",
-      },
-      {
-        title: "Organize a team offsite",
-        message: "Organize a three-day engineering team offsite.",
-      },
-      {
-        title: "Research a competitor",
-        message:
-          "Research our top competitor and summarize their strengths and weaknesses.",
-      },
-    ],
-    available: "always",
-  });
+  useSuggestions();
 
   const steps = (agent.state as AgentState | undefined)?.steps ?? [];
   const status = agent.isRunning ? "inProgress" : "complete";
@@ -79,13 +62,12 @@ function Chat() {
       className="h-full rounded-2xl"
       messageView={{
         children: ({ messageElements, interruptElement }) => (
-          <div data-testid="copilot-message-list" className="flex flex-col">
-            {messageElements}
-            {steps.length > 0 && (
-              <InlineAgentStateCard steps={steps} status={status} />
-            )}
-            {interruptElement}
-          </div>
+          <MessageListWithState
+            messageElements={messageElements}
+            interruptElement={interruptElement}
+            steps={steps}
+            status={status}
+          />
         ),
       }}
     />

showcase/integrations/langgraph-python/src/app/demos/gen-ui-agent/page.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import { useConfigureSuggestions } from "@copilotkit/react-core/v2";
+
+export function useSuggestions() {
+  useConfigureSuggestions({
+    suggestions: [
+      {
+        title: "Plan a product launch",
+        message: "Plan a product launch for a new mobile app.",
+      },
+      {
+        title: "Organize a team offsite",
+        message: "Organize a three-day engineering team offsite.",
+      },
+      {
+        title: "Research a competitor",
+        message:
+          "Research our top competitor and summarize their strengths and weaknesses.",
+      },
+    ],
+    available: "always",
+  });
+}

showcase/integrations/langgraph-python/src/app/demos/gen-ui-agent/suggestions.ts

@@ -1,25 +1,10 @@
 # Tool-Based Generative UI
 
-## What This Demo Shows
+The agent calls a backend tool that returns structured data; the frontend
+renders that tool result as a custom React component instead of plain text.
 
-Agent uses tools to trigger UI generation
+`useRenderTool` maps each tool name to a renderer that receives `args`,
+`result`, and `status`, so the UI can show loading and complete states.
 
-## How to Interact
-
-Try asking your Copilot to:
-
-- "What's the weather forecast for this week in San Francisco?"
-- "Show me the weather in Paris"
-- "Compare the weather in Tokyo and London"
-
-The agent generates structured data via tools, and the frontend renders it as rich UI components.
-
-## Technical Details
-
-What's happening technically:
-
-- **Generative UI** means the agent's tool calls produce structured data that the frontend renders as custom React components
-- Unlike plain text responses, the agent returns tool results with typed parameters (city, temperature, conditions)
-- `useRenderTool` maps each tool name to a React component, so `get_weather` renders a weather card with icons, temperature displays, and forecast details
-- The agent decides when to call the tool based on context — it can mix tool-based UI generation with regular text responses
-- This pattern enables agents to create dynamic, data-driven interfaces on demand
+The canonical description lives in the showcase manifest; this README is just
+a developer note alongside the demo source.

showcase/integrations/langgraph-python/src/app/demos/gen-ui-tool-based/README.md

@@ -1,14 +1,14 @@
 "use client";
 
 import React from "react";
-import { CopilotKit } from "@copilotkit/react-core";
 import {
   CopilotChat,
+  CopilotKit,
   useComponent,
-  useConfigureSuggestions,
 } from "@copilotkit/react-core/v2";
 import { BarChart, barChartPropsSchema } from "./bar-chart";
 import { PieChart, pieChartPropsSchema } from "./pie-chart";
+import { useSuggestions } from "./suggestions";
 
 export default function ControlledGenUiDemo() {
   return (
@@ -37,23 +37,7 @@ function Chat() {
   });
   // @endregion[pie-chart-renderer]
 
-  useConfigureSuggestions({
-    suggestions: [
-      {
-        title: "Sales bar chart",
-        message: "Show me a bar chart of quarterly sales for Q1, Q2, Q3, Q4.",
-      },
-      {
-        title: "Traffic pie chart",
-        message: "Show me a pie chart of website traffic by source.",
-      },
-      {
-        title: "Market share",
-        message: "Show a pie chart of smartphone market share by brand.",
-      },
-    ],
-    available: "always",
-  });
+  useSuggestions();
 
   return (
     <div className="flex justify-center items-center h-screen w-full">

showcase/integrations/langgraph-python/src/app/demos/gen-ui-tool-based/page.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { useConfigureSuggestions } from "@copilotkit/react-core/v2";
+
+export function useSuggestions() {
+  useConfigureSuggestions({
+    suggestions: [
+      {
+        title: "Sales bar chart",
+        message: "Show me a bar chart of quarterly sales for Q1, Q2, Q3, Q4.",
+      },
+      {
+        title: "Traffic pie chart",
+        message: "Show me a pie chart of website traffic by source.",
+      },
+      {
+        title: "Market share",
+        message: "Show a pie chart of smartphone market share by brand.",
+      },
+    ],
+    available: "always",
+  });
+}

showcase/integrations/langgraph-python/src/app/demos/gen-ui-tool-based/suggestions.ts

@@ -0,0 +1,31 @@
+import * as React from "react";
+
+// Inline-cloned shadcn/ui <Badge />. Plain Tailwind classes — no `cn()`,
+// no `cva`. Local to this demo only.
+
+type Variant = "default" | "secondary" | "outline" | "success" | "warning";
+
+const variantClasses: Record<Variant, string> = {
+  default: "border-transparent bg-neutral-900 text-neutral-50",
+  secondary: "border-transparent bg-neutral-100 text-neutral-700",
+  outline: "border-neutral-200 text-neutral-900",
+  success: "border-transparent bg-emerald-100 text-emerald-700",
+  warning: "border-transparent bg-amber-100 text-amber-700",
+};
+
+export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement> {
+  variant?: Variant;
+}
+
+export function Badge({
+  className = "",
+  variant = "default",
+  ...props
+}: BadgeProps) {
+  return (
+    <div
+      className={`inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-[10px] font-medium uppercase tracking-wider transition-colors ${variantClasses[variant]} ${className}`}
+      {...props}
+    />
+  );
+}