feat(showcase/google-adk/gen-ui-tool-based): port frontend from langgraph-python

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: tylerslaton

showcase/integrations/google-adk/src/agents/gen_ui_tool_based_agent.py

@@ -1,8 +1,8 @@
 """Agent backing the Tool-Based Generative UI demo.
 
-The agent has no backend tools; the frontend registers `generate_haiku` (or
-similar) via `useFrontendTool({ render })` so the agent calls it and the
-React-side renderer paints the result.
+The frontend registers `render_bar_chart` and `render_pie_chart` tools via
+`useComponent`. The ADKAgent middleware injects those tools into the model
+request at runtime so the agent can call them.
 """
 
 from __future__ import annotations
@@ -12,12 +12,12 @@
 from agents.shared_chat import get_model
 
 _INSTRUCTION = (
-    "You are a helpful assistant that generates richly-formatted UI via "
-    "frontend tools. When the user asks for a haiku, call the generate_haiku "
-    "tool with three lines in Japanese, three lines translated to English, "
-    "a fitting image_name, and a CSS gradient string for the background. "
-    "Always invoke the tool — never answer with plain text when a tool is "
-    "available."
+    "You are a data visualization assistant.\n\n"
+    "When the user asks for a chart, call `render_bar_chart` or "
+    "`render_pie_chart` with a concise title, short description, and a "
+    "`data` array of `{label, value}` items. Pick bar for comparisons over "
+    "a small set of categories; pick pie for composition / share-of-whole.\n\n"
+    "Keep chat responses brief -- let the chart do the talking."
 )
 
 gen_ui_tool_based_agent = LlmAgent(

showcase/integrations/google-adk/src/app/demos/gen-ui-tool-based/README.md

@@ -1,76 +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
-
-## Building With This
-
-If you're extending this demo or building something similar, here are key things to know:
-
-### Styling Inside the Chat
-
-Content rendered inside CopilotKit's chat area (via `useRenderTool`, `useHumanInTheLoop`, `useFrontendTool`) runs inside CopilotKit's component tree. Standard Tailwind classes may not work here because Tailwind v4 can't statically detect them.
-
-**Use inline styles** for any UI rendered inside the chat:
-
-```tsx
-// Do this
-<div style={{ padding: "24px", borderRadius: "12px", background: "#fff" }}>
-
-// Not this — Tailwind may purge these classes
-<div className="p-6 rounded-xl bg-white">
-```
-
-### Chat Layout
-
-Wrap `CopilotChat` in a constraining div for proper spacing:
-
-```tsx
-<div className="flex justify-center items-center h-screen w-full">
-  <div className="h-full w-full md:w-4/5 md:h-4/5 rounded-lg">
-    <CopilotChat className="h-full rounded-2xl max-w-6xl mx-auto" />
-  </div>
-</div>
-```
-
-### Overriding CopilotKit Styles
-
-CopilotKit uses `cpk:` prefixed classes internally. To override them, create a **separate CSS file** (not in globals.css — Tailwind purges it):
-
-```css
-/* copilotkit-overrides.css */
-.copilotKitInput {
-  border-radius: 0.75rem;
-  border: 1px solid var(--copilot-kit-separator-color) !important;
-}
-```
-
-Import it in `layout.tsx` after `globals.css`.
-
-### Images and Icons
-
-- Don't reference local image files from agent-generated content (they won't exist). Add `onError` fallbacks.
-- Use emoji instead of SVG icons inside chat messages (`fill="currentColor"` renders unpredictably in the chat context).
-
-See the full [Styling Guide](https://github.com/CopilotKit/CopilotKit/blob/main/showcase/STYLING-GUIDE.md) for more details.
+The canonical description lives in the showcase manifest; this README is just
+a developer note alongside the demo source.

showcase/integrations/google-adk/src/app/demos/gen-ui-tool-based/agent.py

@@ -0,0 +1,142 @@
+import React, { useRef } from "react";
+import {
+  BarChart as RechartsBarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  Tooltip,
+  CartesianGrid,
+  Cell,
+  ResponsiveContainer,
+  Rectangle,
+} from "recharts";
+import { z } from "zod";
+
+export const barChartPropsSchema = z.object({
+  title: z.string().describe("Chart title"),
+  description: z.string().describe("Brief description or subtitle"),
+  data: z.array(
+    z.object({
+      label: z.string(),
+      value: z.number(),
+    }),
+  ),
+});
+
+export type BarChartProps = z.infer<typeof barChartPropsSchema>;
+
+export function BarChart({ title, description, data }: BarChartProps) {
+  const CHART_COLORS = [
+    "#BEC2FF",
+    "#85ECCE",
+    "#FFAC4D",
+    "#FFF388",
+    "#189370",
+    "#EEE6FE",
+    "#FA5F67",
+  ];
+
+  const TOOLTIP_STYLE = {
+    backgroundColor: "#ffffff",
+    border: "1px solid #DBDBE5",
+    borderRadius: "12px",
+    padding: "10px 14px",
+    color: "#010507",
+    fontSize: "13px",
+    boxShadow: "0 4px 12px rgba(1,5,7,0.06)",
+  };
+
+  // Track which bars have already been rendered so only newly-arriving ones animate.
+  const seen = useRef(new Set<number>());
+  const isNew = (i: number) => {
+    if (seen.current.has(i)) return false;
+    seen.current.add(i);
+    return true;
+  };
+
+  if (!data || !Array.isArray(data) || data.length === 0) {
+    return (
+      <div className="max-w-2xl mx-auto my-4 rounded-2xl border border-[#DBDBE5] bg-white p-6 shadow-sm">
+        <div className="font-semibold text-[#010507]">{title}</div>
+        <div className="text-sm text-[#57575B]">{description}</div>
+        <p className="text-[#AFAFB7] text-center py-8 text-sm">
+          No data available
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="max-w-2xl mx-auto my-4 overflow-hidden rounded-2xl border border-[#DBDBE5] bg-white shadow-sm">
+      <style>{`
+        @keyframes barSlideIn {
+          from { transform: translateY(40px); opacity: 0; }
+          20% { opacity: 1; }
+          to { transform: translateY(0); opacity: 1; }
+        }
+      `}</style>
+      <div className="p-4 pb-2">
+        <div className="font-semibold text-[#010507]">{title}</div>
+        <div className="text-sm text-[#57575B]">{description}</div>
+      </div>
+      <div className="px-4 pb-4">
+        <ResponsiveContainer width="100%" height={280}>
+          <RechartsBarChart
+            data={data}
+            margin={{ top: 12, right: 12, bottom: 4, left: -8 }}
+          >
+            <CartesianGrid
+              strokeDasharray="3 3"
+              stroke="#E9E9EF"
+              vertical={false}
+            />
+            <XAxis
+              dataKey="label"
+              tick={{ fontSize: 12, fill: "#838389" }}
+              stroke="#E9E9EF"
+              tickLine={false}
+              axisLine={false}
+            />
+            <YAxis
+              tick={{ fontSize: 12, fill: "#838389" }}
+              stroke="#E9E9EF"
+              tickLine={false}
+              axisLine={false}
+            />
+            <Tooltip
+              contentStyle={TOOLTIP_STYLE}
+              cursor={{ fill: "#F0F0F4", opacity: 0.5 }}
+            />
+            <Bar
+              isAnimationActive={false}
+              dataKey="value"
+              radius={[6, 6, 0, 0]}
+              maxBarSize={48}
+              shape={(props: any) => (
+                <g
+                  style={
+                    isNew(props.index as number)
+                      ? {
+                          animation:
+                            "barSlideIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both",
+                        }
+                      : undefined
+                  }
+                >
+                  <Rectangle {...props} />
+                </g>
+              )}
+            >
+              {data.map((_, index) => (
+                <Cell
+                  key={index}
+                  fill={CHART_COLORS[index % CHART_COLORS.length]}
+                />
+              ))}
+            </Bar>
+          </RechartsBarChart>
+        </ResponsiveContainer>
+      </div>
+    </div>
+  );
+}