chore: import upstream snapshot with attribution

examples/integrations/claude-sdk-python/src/app/api/copilotkit/[[...slug]]/route.ts

@@ -0,0 +1,62 @@
+import {
+  CopilotRuntime,
+  CopilotKitIntelligence,
+  createCopilotEndpoint,
+  InMemoryAgentRunner,
+} from "@copilotkit/runtime/v2";
+import { HttpAgent } from "@ag-ui/client";
+import { handle } from "hono/vercel";
+
+// Claude Agent SDK: the agent runs as its own server (uvicorn) and speaks
+// AG-UI directly over HTTP, so we connect to it with HttpAgent from
+// @ag-ui/client (not LangGraphAgent/LangGraphHttpAgent — those target
+// LangGraph-shaped endpoints). Everything else — runtime config, v2 endpoint
+// wiring, MCP apps, openGenerativeUI, a2ui — mirrors the canonical demo.
+const defaultAgent = new HttpAgent({
+  // Strip any trailing slash so a user-set AGENT_URL like "http://host:8000/"
+  // doesn't produce a double slash (which the agent's POST "/" won't match).
+  url: `${(process.env.AGENT_URL || "http://localhost:8000").replace(/\/+$/, "")}/`,
+});
+
+const runtime = new CopilotRuntime({
+  agents: { default: defaultAgent },
+  // --- copilotkit:intelligence (remove this block to opt out) ---
+  ...(process.env.COPILOTKIT_LICENSE_TOKEN
+    ? {
+        intelligence: new CopilotKitIntelligence({
+          apiKey: process.env.INTELLIGENCE_API_KEY ?? "",
+          apiUrl: process.env.INTELLIGENCE_API_URL ?? "http://localhost:4201",
+          wsUrl:
+            process.env.INTELLIGENCE_GATEWAY_WS_URL ?? "ws://localhost:4401",
+        }),
+        // Demo stub — replace with your real auth-derived user identity before any
+        // multi-user deployment, or all users share one thread history.
+        identifyUser: () => ({ id: "demo-user", name: "Demo User" }),
+        licenseToken: process.env.COPILOTKIT_LICENSE_TOKEN,
+      }
+    : { runner: new InMemoryAgentRunner() }),
+  // --- /copilotkit:intelligence ---
+  openGenerativeUI: true,
+  a2ui: {
+    injectA2UITool: false,
+  },
+  mcpApps: {
+    servers: [
+      {
+        type: "http",
+        url: process.env.MCP_SERVER_URL || "https://mcp.excalidraw.com",
+        serverId: "example_mcp_app",
+      },
+    ],
+  },
+});
+
+const app = createCopilotEndpoint({
+  runtime,
+  basePath: "/api/copilotkit",
+});
+
+export const GET = handle(app);
+export const POST = handle(app);
+export const PATCH = handle(app);
+export const DELETE = handle(app);

examples/integrations/claude-sdk-python/src/app/declarative-generative-ui/definitions.ts

@@ -0,0 +1,184 @@
+/**
+ * Demonstration Catalog — Component Definitions
+ *
+ * Platform-agnostic definitions: component names, props (Zod), descriptions.
+ * This is the contract between the app and the AI agent. Agents receive these
+ * definitions as context so they know what components are available.
+ *
+ * Renderers (React, React Native, etc.) import these definitions and provide
+ * platform-specific implementations, type-checked against the Zod schemas.
+ */
+
+import { z } from "zod";
+
+/**
+ * Dynamic string: accepts either a literal string or a data-model path binding
+ * like `{ path: "airline" }`. The GenericBinder resolves path bindings to the
+ * actual value at render time.
+ */
+const DynString = z.union([z.string(), z.object({ path: z.string() })]);
+
+export const demonstrationCatalogDefinitions = {
+  Title: {
+    description: "A heading. Use for section titles and page headers.",
+    props: z.object({
+      text: z.string(),
+      level: z.string().optional(),
+    }),
+  },
+
+  // Text: removed — the basic catalog's Text uses DynamicStringSchema
+  // which supports path bindings (e.g. { path: "flights[*].airline" }).
+  // Overriding it with z.string() breaks fixed-schema data binding.
+
+  Row: {
+    description: "Horizontal layout container.",
+    props: z.object({
+      gap: z.number().optional(),
+      align: z.string().optional(),
+      justify: z.string().optional(),
+      // Union with { componentId, path } so GenericBinder treats this as
+      // STRUCTURAL and resolves template children from the data model.
+      children: z.union([
+        z.array(z.string()),
+        z.object({ componentId: z.string(), path: z.string() }),
+      ]),
+    }),
+  },
+
+  Column: {
+    description: "Vertical layout container.",
+    props: z.object({
+      gap: z.number().optional(),
+      align: z.string().optional(),
+      // Same union as Row — required for template children support.
+      children: z.union([
+        z.array(z.string()),
+        z.object({ componentId: z.string(), path: z.string() }),
+      ]),
+    }),
+  },
+
+  DashboardCard: {
+    description:
+      "A card container with title and optional subtitle. Has a 'child' slot for content (chart, metrics, etc). Use 'child' with a single component ID.",
+    props: z.object({
+      title: z.string(),
+      subtitle: z.string().optional(),
+      child: z.string().optional(),
+    }),
+  },
+
+  Metric: {
+    description:
+      "A key metric display with label, value, and optional trend indicator. Great for KPIs and stats.",
+    props: z.object({
+      label: z.string(),
+      value: z.string(),
+      trend: z.enum(["up", "down", "neutral"]).optional(),
+      trendValue: z.string().optional(),
+    }),
+  },
+
+  PieChart: {
+    description:
+      "A pie/donut chart. Provide data as array of {label, value, color} objects.",
+    props: z.object({
+      data: z.array(
+        z.object({
+          label: z.string(),
+          value: z.number(),
+          color: z.string().optional(),
+        }),
+      ),
+      innerRadius: z.number().optional(),
+    }),
+  },
+
+  BarChart: {
+    description:
+      "A bar chart. Provide data as array of {label, value} objects.",
+    props: z.object({
+      data: z.array(z.object({ label: z.string(), value: z.number() })),
+      color: z.string().optional(),
+    }),
+  },
+
+  Badge: {
+    description:
+      "A small status badge/tag. Use for labels, statuses, categories.",
+    props: z.object({
+      text: z.string(),
+      variant: z
+        .enum(["success", "warning", "error", "info", "neutral"])
+        .optional(),
+    }),
+  },
+
+  DataTable: {
+    description: "A data table with columns and rows.",
+    props: z.object({
+      columns: z.array(z.object({ key: z.string(), label: z.string() })),
+      rows: z.array(z.record(z.any())),
+    }),
+  },
+
+  Button: {
+    description:
+      "An interactive button with an action event. Use 'child' with a Text component ID for the label. 'action' is dispatched on click.",
+    props: z.object({
+      child: z
+        .string()
+        .describe(
+          "The ID of the child component (e.g. a Text component for the label).",
+        ),
+      variant: z.enum(["primary", "secondary", "ghost"]).optional(),
+      // Union with { event } so GenericBinder resolves this as ACTION → callable () => void.
+      action: z
+        .union([
+          z.object({
+            event: z.object({
+              name: z.string(),
+              context: z.record(z.any()).optional(),
+            }),
+          }),
+          z.null(),
+        ])
+        .optional(),
+    }),
+  },
+
+  FlightCard: {
+    description:
+      "A rich flight result card. Displays airline, flight number, route, times, duration, status, and price. Use inside a Row for side-by-side layout.",
+    props: z.object({
+      airline: DynString,
+      airlineLogo: DynString,
+      flightNumber: DynString,
+      origin: DynString,
+      destination: DynString,
+      date: DynString,
+      departureTime: DynString,
+      arrivalTime: DynString,
+      duration: DynString,
+      status: DynString,
+      statusColor: DynString.optional(),
+      price: DynString,
+      action: z
+        .union([
+          z.object({
+            event: z.object({
+              name: z.string(),
+              context: z.record(z.any()).optional(),
+            }),
+          }),
+          z.null(),
+        ])
+        .optional(),
+    }),
+  },
+};
+
+/** Type helper for renderers */
+export type DemonstrationCatalogDefinitions =
+  typeof demonstrationCatalogDefinitions;

examples/integrations/claude-sdk-python/src/app/declarative-generative-ui/renderers.tsx

@@ -0,0 +1,601 @@
+/**
+ * A2UI Catalog — React Renderers
+ *
+ * Each renderer maps a component name from definitions.ts to a React
+ * implementation. Props are type-checked against the Zod schemas.
+ *
+ * To add a component: define its schema in definitions.ts, then add a
+ * renderer here. See README.md "Adding a custom component" for details.
+ *
+ * The assembled catalog is registered in layout.tsx via
+ * <CopilotKit a2ui={{ catalog: demonstrationCatalog }}>.
+ */
+"use client";
+
+import React, { useState } from "react";
+import {
+  PieChart as RechartsPie,
+  Pie,
+  Cell,
+  ResponsiveContainer,
+  BarChart as RechartsBar,
+  Bar,
+  XAxis,
+  YAxis,
+  Tooltip,
+  CartesianGrid,
+} from "recharts";
+import { createCatalog } from "@copilotkit/a2ui-renderer";
+import type { CatalogRenderers } from "@copilotkit/a2ui-renderer";
+import { demonstrationCatalogDefinitions } from "./definitions";
+import type { DemonstrationCatalogDefinitions } from "./definitions";
+
+// ─── Theme-aware colors ─────────────────────────────────────────────
+
+const c = {
+  card: "var(--card)",
+  cardFg: "var(--card-foreground)",
+  border: "var(--border)",
+  muted: "var(--muted-foreground)",
+  divider: "color-mix(in srgb, var(--border) 50%, var(--card))",
+  shadow: "0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04)",
+  btnBg: "color-mix(in srgb, var(--muted) 40%, var(--card))",
+  btnDoneBg: "color-mix(in srgb, #22c55e 10%, var(--card))",
+};
+
+function ActionButton({
+  label,
+  doneLabel,
+  action,
+  children: child,
+}: {
+  label: string;
+  doneLabel: string;
+  action: any;
+  children?: React.ReactNode;
+}) {
+  const [done, setDone] = useState(false);
+  return (
+    <button
+      disabled={done}
+      style={{
+        width: "100%",
+        padding: "10px 16px",
+        borderRadius: "10px",
+        border: done ? "1px solid #bbf7d0" : `1px solid ${c.border}`,
+        background: done ? c.btnDoneBg : c.btnBg,
+        color: done ? "#059669" : c.cardFg,
+        fontSize: "0.85rem",
+        fontWeight: 500,
+        cursor: done ? "default" : "pointer",
+        transition: "all 0.2s ease",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: "6px",
+      }}
+      onClick={() => {
+        if (!done) {
+          action?.();
+          setDone(true);
+        }
+      }}
+    >
+      {done && (
+        <svg
+          width="16"
+          height="16"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="#059669"
+          strokeWidth="2.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <polyline points="20 6 9 17 4 12" />
+        </svg>
+      )}
+      {done ? doneLabel : (child ?? label)}
+    </button>
+  );
+}
+
+// ─── Renderers (type-checked against schema definitions) ────────────
+
+const demonstrationCatalogRenderers: CatalogRenderers<DemonstrationCatalogDefinitions> =
+  {
+    Title: ({ props }) => {
+      const Tag = (
+        props.level === "h1" ? "h1" : props.level === "h3" ? "h3" : "h2"
+      ) as keyof React.JSX.IntrinsicElements;
+      const sizes: Record<string, string> = {
+        h1: "1.75rem",
+        h2: "1.25rem",
+        h3: "1rem",
+      };
+      return (
+        <Tag
+          style={{
+            margin: 0,
+            fontWeight: 600,
+            fontSize: sizes[props.level ?? "h2"],
+            color: c.cardFg,
+            letterSpacing: "-0.01em",
+          }}
+        >
+          {props.text}
+        </Tag>
+      );
+    },
+
+    // Text: removed — use the basic catalog's Text (supports DynamicStringSchema
+    // for path bindings in fixed-schema templates).
+
+    Row: ({ props, children }) => {
+      const justifyMap: Record<string, string> = {
+        start: "flex-start",
+        center: "center",
+        end: "flex-end",
+        spaceBetween: "space-between",
+      };
+      const items = Array.isArray(props.children) ? props.children : [];
+      return (
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "row",
+            gap: `${props.gap ?? 16}px`,
+            alignItems: props.align ?? "stretch",
+            justifyContent:
+              justifyMap[props.justify ?? "start"] ?? "flex-start",
+            flexWrap: "wrap",
+            width: "100%",
+          }}
+        >
+          {items.map((item: any, i: number) => {
+            if (typeof item === "string")
+              return (
+                <div
+                  key={`${item}-${i}`}
+                  style={{ flex: "1 1 0", minWidth: 0 }}
+                >
+                  {children(item)}
+                </div>
+              );
+            if (item && typeof item === "object" && "id" in item)
+              return (
+                <div
+                  key={`${item.id}-${i}`}
+                  style={{ flex: "1 1 0", minWidth: 0 }}
+                >
+                  {(children as any)(item.id, item.basePath)}
+                </div>
+              );
+            return null;
+          })}
+        </div>
+      );
+    },
+
+    Column: ({ props, children }) => {
+      const items = Array.isArray(props.children) ? props.children : [];
+      return (
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            gap: `${props.gap ?? 12}px`,
+            width: "100%",
+          }}
+        >
+          {items.map((item: any, i: number) => {
+            if (typeof item === "string")
+              return (
+                <React.Fragment key={`${item}-${i}`}>
+                  {children(item)}
+                </React.Fragment>
+              );
+            if (item && typeof item === "object" && "id" in item)
+              return (
+                <React.Fragment key={`${item.id}-${i}`}>
+                  {(children as any)(item.id, item.basePath)}
+                </React.Fragment>
+              );
+            return null;
+          })}
+        </div>
+      );
+    },
+
+    DashboardCard: ({ props, children }) => (
+      <div
+        style={{
+          background: c.card,
+          borderRadius: "12px",
+          border: `1px solid ${c.border}`,
+          padding: "20px",
+          boxShadow: c.shadow,
+          display: "flex",
+          flexDirection: "column",
+          gap: "12px",
+        }}
+      >
+        <div>
+          <div style={{ fontWeight: 600, fontSize: "0.9rem", color: c.cardFg }}>
+            {props.title}
+          </div>
+          {props.subtitle && (
+            <div
+              style={{
+                fontSize: "0.75rem",
+                color: c.muted,
+                marginTop: "2px",
+              }}
+            >
+              {props.subtitle}
+            </div>
+          )}
+        </div>
+        {props.child && children(props.child)}
+      </div>
+    ),
+
+    Metric: ({ props }) => {
+      const trendColors: Record<string, string> = {
+        up: "#059669",
+        down: "#dc2626",
+        neutral: c.muted,
+      };
+      const trendIcons: Record<string, string> = {
+        up: "↑",
+        down: "↓",
+        neutral: "→",
+      };
+      return (
+        <div style={{ display: "flex", flexDirection: "column", gap: "4px" }}>
+          <span
+            style={{
+              fontSize: "0.75rem",
+              color: c.muted,
+              fontWeight: 500,
+              textTransform: "uppercase",
+              letterSpacing: "0.05em",
+            }}
+          >
+            {props.label}
+          </span>
+          <div style={{ display: "flex", alignItems: "baseline", gap: "8px" }}>
+            <span
+              style={{
+                fontSize: "1.5rem",
+                fontWeight: 700,
+                color: c.cardFg,
+                letterSpacing: "-0.02em",
+              }}
+            >
+              {props.value}
+            </span>
+            {props.trend && props.trendValue && (
+              <span
+                style={{
+                  fontSize: "0.8rem",
+                  fontWeight: 500,
+                  color: trendColors[props.trend] ?? c.muted,
+                }}
+              >
+                {trendIcons[props.trend]} {props.trendValue}
+              </span>
+            )}
+          </div>
+        </div>
+      );
+    },
+
+    PieChart: ({ props }) => {
+      const COLORS = [
+        "#3b82f6",
+        "#8b5cf6",
+        "#ec4899",
+        "#f59e0b",
+        "#10b981",
+        "#6366f1",
+      ];
+      const data = props.data ?? [];
+      return (
+        <div style={{ width: "100%", height: 200 }}>
+          <ResponsiveContainer>
+            <RechartsPie>
+              <Pie
+                data={data}
+                dataKey="value"
+                nameKey="label"
+                cx="50%"
+                cy="50%"
+                innerRadius={props.innerRadius ?? 40}
+                outerRadius={80}
+                paddingAngle={2}
+              >
+                {data.map((entry: any, i: number) => (
+                  <Cell
+                    key={i}
+                    fill={entry.color ?? COLORS[i % COLORS.length]}
+                  />
+                ))}
+              </Pie>
+              <Tooltip />
+            </RechartsPie>
+          </ResponsiveContainer>
+        </div>
+      );
+    },
+
+    BarChart: ({ props }) => {
+      const data = props.data ?? [];
+      return (
+        <div style={{ width: "100%", height: 200 }}>
+          <ResponsiveContainer>
+            <RechartsBar data={data}>
+              <CartesianGrid strokeDasharray="3 3" stroke={c.divider} />
+              <XAxis dataKey="label" tick={{ fontSize: 11, fill: c.muted }} />
+              <YAxis tick={{ fontSize: 11, fill: c.muted }} />
+              <Tooltip />
+              <Bar
+                dataKey="value"
+                fill={props.color ?? "#3b82f6"}
+                radius={[4, 4, 0, 0]}
+              />
+            </RechartsBar>
+          </ResponsiveContainer>
+        </div>
+      );
+    },
+
+    Badge: ({ props }) => {
+      const variants: Record<string, { bg: string; color: string }> = {
+        success: { bg: "#dcfce7", color: "#166534" },
+        warning: { bg: "#fef3c7", color: "#92400e" },
+        error: { bg: "#fee2e2", color: "#991b1b" },
+        info: { bg: "#dbeafe", color: "#1e40af" },
+        neutral: { bg: "var(--muted)", color: c.cardFg },
+      };
+      const v = variants[props.variant ?? "neutral"] ?? variants.neutral;
+      return (
+        <span
+          style={{
+            display: "inline-block",
+            padding: "2px 8px",
+            borderRadius: "9999px",
+            fontSize: "0.7rem",
+            fontWeight: 500,
+            background: v.bg,
+            color: v.color,
+          }}
+        >
+          {props.text}
+        </span>
+      );
+    },
+
+    DataTable: ({ props }) => {
+      const cols = props.columns ?? [];
+      const rows = props.rows ?? [];
+      return (
+        <div style={{ overflowX: "auto", width: "100%" }}>
+          <table
+            style={{
+              width: "100%",
+              borderCollapse: "collapse",
+              fontSize: "0.8rem",
+            }}
+          >
+            <thead>
+              <tr>
+                {cols.map((col: any) => (
+                  <th
+                    key={col.key}
+                    style={{
+                      textAlign: "left",
+                      padding: "8px 12px",
+                      borderBottom: `2px solid ${c.border}`,
+                      color: c.muted,
+                      fontWeight: 600,
+                      fontSize: "0.7rem",
+                      textTransform: "uppercase",
+                      letterSpacing: "0.05em",
+                    }}
+                  >
+                    {col.label}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {rows.map((row: any, i: number) => (
+                <tr key={i} style={{ borderBottom: `1px solid ${c.divider}` }}>
+                  {cols.map((col: any) => (
+                    <td
+                      key={col.key}
+                      style={{ padding: "8px 12px", color: c.cardFg }}
+                    >
+                      {String(row[col.key] ?? "")}
+                    </td>
+                  ))}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      );
+    },
+
+    Button: ({ props, children }) => {
+      return (
+        <ActionButton label="Click" doneLabel="Done" action={props.action}>
+          {props.child ? children(props.child) : null}
+        </ActionButton>
+      );
+    },
+
+    FlightCard: ({ props: rawProps }) => {
+      // The binder resolves path bindings to strings at runtime.
+      const props = rawProps as Record<string, any>;
+      const statusColors: Record<string, string> = {
+        "On Time": "#22c55e",
+        Delayed: "#eab308",
+        Cancelled: "#ef4444",
+      };
+      const dotColor =
+        props.statusColor ?? statusColors[props.status] ?? "#22c55e";
+
+      return (
+        <div
+          style={{
+            border: `1px solid ${c.border}`,
+            borderRadius: "16px",
+            padding: "20px",
+            background: c.card,
+            color: c.cardFg,
+            minWidth: 260,
+            maxWidth: 340,
+            flex: "1 1 260px",
+            display: "flex",
+            flexDirection: "column",
+            gap: "12px",
+            boxShadow: c.shadow,
+          }}
+        >
+          {/* Header: airline + price */}
+          <div
+            style={{
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+            }}
+          >
+            <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
+              <img
+                src={props.airlineLogo}
+                alt={props.airline}
+                style={{
+                  width: 28,
+                  height: 28,
+                  borderRadius: "50%",
+                  objectFit: "contain",
+                }}
+              />
+              <span style={{ fontWeight: 600, fontSize: "0.95rem" }}>
+                {props.airline}
+              </span>
+            </div>
+            <span style={{ fontWeight: 700, fontSize: "1.15rem" }}>
+              {props.price}
+            </span>
+          </div>
+
+          {/* Meta */}
+          <div
+            style={{
+              display: "flex",
+              justifyContent: "space-between",
+              fontSize: "0.8rem",
+              color: c.muted,
+            }}
+          >
+            <span>{props.flightNumber}</span>
+            <span>{props.date}</span>
+          </div>
+
+          <hr
+            style={{
+              border: "none",
+              borderTop: `1px solid ${c.divider}`,
+              margin: 0,
+            }}
+          />
+
+          {/* Times */}
+          <div
+            style={{
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+            }}
+          >
+            <span style={{ fontWeight: 700, fontSize: "1.1rem" }}>
+              {props.departureTime}
+            </span>
+            <span style={{ fontSize: "0.75rem", color: c.muted }}>
+              {props.duration}
+            </span>
+            <span style={{ fontWeight: 700, fontSize: "1.1rem" }}>
+              {props.arrivalTime}
+            </span>
+          </div>
+
+          {/* Route */}
+          <div
+            style={{
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+              fontSize: "0.95rem",
+              fontWeight: 600,
+            }}
+          >
+            <span>{props.origin}</span>
+            <span style={{ color: c.muted }}>→</span>
+            <span>{props.destination}</span>
+          </div>
+
+          <div
+            style={{
+              marginTop: "auto",
+              display: "flex",
+              flexDirection: "column",
+              gap: "12px",
+            }}
+          >
+            <hr
+              style={{
+                border: "none",
+                borderTop: `1px solid ${c.divider}`,
+                margin: 0,
+              }}
+            />
+
+            {/* Status */}
+            <div style={{ display: "flex", alignItems: "center", gap: "6px" }}>
+              <span
+                style={{
+                  width: 8,
+                  height: 8,
+                  borderRadius: "50%",
+                  background: dotColor,
+                  display: "inline-block",
+                }}
+              />
+              <span style={{ fontSize: "0.8rem", color: c.muted }}>
+                {props.status}
+              </span>
+            </div>
+
+            <ActionButton
+              label="Select"
+              doneLabel="Selected"
+              action={props.action}
+            />
+          </div>
+        </div>
+      );
+    },
+  };
+
+// ─── Assembled Catalog ───────────────────────────────────────────────
+
+export const demonstrationCatalog = createCatalog(
+  demonstrationCatalogDefinitions,
+  demonstrationCatalogRenderers,
+  {
+    catalogId: "copilotkit://app-dashboard-catalog",
+  },
+);

examples/integrations/claude-sdk-python/src/app/globals.css

@@ -0,0 +1,125 @@
+/* CopilotKit brand fonts */
+@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300..800&family=Spline+Sans+Mono:wght@400;500;600&display=swap");
+
+@import "tailwindcss";
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+:root {
+  --background: #ffffff;
+  --foreground: #010507;
+
+  /* Semantic tokens — CopilotKit brand */
+  --card: #ffffff;
+  --card-foreground: #010507;
+  --primary: #010507;
+  --primary-foreground: #ffffff;
+  --secondary: #ededf5;
+  --secondary-foreground: #010507;
+  --muted: #ededf5;
+  --muted-foreground: #57575b;
+  --accent: #eee6fe;
+  --accent-foreground: #010507;
+  --destructive: #fa5f67;
+  --destructive-foreground: #ffffff;
+  --border: #dbdbe5;
+  --input: #dbdbe5;
+  --ring: #bec2ff;
+
+  /* Chart tokens */
+  --chart-tooltip-bg: #ffffff;
+  --chart-tooltip-border: #dbdbe5;
+  --chart-axis: #57575b;
+
+  --radius: 0.75rem;
+
+  /* Override CopilotKit font */
+  --cpk-default-font-family: var(--font-body);
+
+  /* Fonts */
+  --font-body: "Plus Jakarta Sans", "DM Sans", "Segoe UI", sans-serif;
+  --font-code:
+    "Spline Sans Mono", "SFMono-Regular", Menlo, Monaco, Consolas, monospace;
+
+  /* Brand accent colors */
+  --cpk-mint-400: #85ecce;
+  --cpk-mint-800: #189370;
+  --cpk-lilac-400: #bec2ff;
+  --cpk-orange-400: #ffac4d;
+  --cpk-yellow-400: #fff388;
+  --cpk-ambient-gradient: linear-gradient(
+    90deg,
+    #bec2ff 0%,
+    #85ecce 45.673%,
+    #ffac4d 100%
+  );
+}
+
+:root.dark,
+.dark {
+  --background: #010507;
+  --foreground: #ffffff;
+
+  --card: #191a1e;
+  --card-foreground: #ffffff;
+  --primary: #ffffff;
+  --primary-foreground: #010507;
+  --secondary: #242529;
+  --secondary-foreground: #ffffff;
+  --muted: #242529;
+  --muted-foreground: #adadb2;
+  --accent: #303136;
+  --accent-foreground: #ffffff;
+  --destructive: #fa5f67;
+  --destructive-foreground: #ffffff;
+  --border: #303136;
+  --input: #303136;
+  --ring: #bec2ff;
+
+  --chart-tooltip-bg: #191a1e;
+  --chart-tooltip-border: #303136;
+  --chart-axis: #adadb2;
+}
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+  font-family: var(--font-body);
+}
+
+body,
+html {
+  height: 100%;
+}
+
+/*
+ * Showcase highlight for suggestion pills.
+ * Applied via className in use-example-suggestions.tsx when showcase.json
+ * is set to a non-default mode (e.g. "a2ui", "opengenui"). Uses CopilotKit
+ * brand colors with a subtle tinted background.
+ * Add new showcase variants here following the same pattern.
+ */
+[data-copilotkit] button[data-slot="suggestion-pill"].a2ui-highlight {
+  border-color: var(--cpk-lilac-400);
+  background: color-mix(in srgb, var(--cpk-lilac-400) 15%, var(--background));
+}
+
+[data-copilotkit] button[data-slot="suggestion-pill"].opengenui-highlight {
+  border-color: var(--cpk-mint-400);
+  background: color-mix(in srgb, var(--cpk-mint-400) 15%, var(--background));
+}
+
+/*
+ * Position the CopilotKit inspector FAB BENEATH the Chat/App toggle in the
+ * top-right, instead of the header row where it would overlap it. The gap below
+ * the toggle matches the toggle's own 16px gap from the top of the viewport.
+ * The toggle is 16px from the top and 46px tall (both breakpoints), so its
+ * bottom is at 62px; a 16px gap puts the FAB circle at 78px. The visible circle
+ * renders ~16px below the host's `top`, so host top = 78 - 16 = 62px. Right edge
+ * matches the toggle's 16px inset.
+ */
+cpk-web-inspector {
+  top: 62px !important;
+  bottom: auto !important;
+  right: 16px !important;
+}

examples/integrations/claude-sdk-python/src/app/layout.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import "./globals.css";
+import "@copilotkit/react-core/v2/styles.css";
+
+import { CopilotKit } from "@copilotkit/react-core/v2";
+import { ThemeProvider } from "@/hooks/use-theme";
+// A2UI catalog: definitions + renderers in ./declarative-generative-ui/
+import { demonstrationCatalog } from "./declarative-generative-ui/renderers";
+
+export default function RootLayout({
+  children,
+}: Readonly<{ children: React.ReactNode }>) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <head>
+        <title>CopilotKit</title>
+        <link
+          rel="icon"
+          type="image/svg+xml"
+          href="/copilotkit-logo-mark.svg"
+        />
+        {/*
+          Set the theme class BEFORE first paint to avoid a white→dark flash.
+          ThemeProvider applies the theme in a useEffect (post-hydration), so
+          without this the page paints unthemed (light) first, then flips. This
+          blocking inline script matches ThemeProvider's "system" default so
+          there's no flash and no class mismatch when the provider re-applies.
+        */}
+        <script
+          dangerouslySetInnerHTML={{
+            __html:
+              "(function(){try{var d=window.matchMedia('(prefers-color-scheme: dark)').matches;document.documentElement.classList.add(d?'dark':'light');}catch(e){}})();",
+          }}
+        />
+      </head>
+      {/*
+        suppressHydrationWarning: browser extensions (e.g. Grammarly) inject
+        attributes like data-gr-ext-installed onto <body> before React hydrates,
+        which would otherwise surface as a hydration mismatch on first load.
+        This only relaxes the check for <body>'s own attributes (one level deep);
+        everything rendered inside <body> is still fully hydration-checked.
+      */}
+      <body className={`antialiased`} suppressHydrationWarning>
+        <ThemeProvider>
+          <CopilotKit
+            runtimeUrl="/api/copilotkit"
+            inspectorDefaultAnchor={{ horizontal: "right", vertical: "top" }}
+            a2ui={{ catalog: demonstrationCatalog }}
+            openGenerativeUI={{}}
+            useSingleEndpoint={false}
+          >
+            {children}
+          </CopilotKit>
+        </ThemeProvider>
+      </body>
+    </html>
+  );
+}

examples/integrations/claude-sdk-python/src/app/page.module.css

@@ -0,0 +1,67 @@
+.layout {
+  display: grid;
+  /*
+    Reserve the desktop drawer's width (its default `--cpk-drawer-width`, 320px)
+    as a fixed first column so the layout does NOT shift when the client-only
+    drawer mounts after hydration. Without this the column is `auto` → 0px until
+    the drawer boots, so the chat starts full-width and then "slides over" when
+    the drawer appears. On mobile the drawer is an off-canvas overlay (out of
+    flow), so the column collapses to `auto` (≈0) and the chat fills the width.
+  */
+  grid-template-columns: var(--cpk-drawer-reserved-width, 320px) minmax(0, 1fr);
+  /* Bound the row so the drawer's thread list scrolls internally (pinned
+     header) instead of the panel growing to content height. */
+  grid-template-rows: minmax(0, 1fr);
+  /* The drawer sets --cpk-drawer-reserved-width to 0 when collapsed on desktop,
+     so the reserved column collapses and the chat reclaims the space. */
+  transition: grid-template-columns 0.2s ease;
+  min-height: 100vh;
+  min-height: 100svh;
+  height: 100dvh;
+  width: 100%;
+  overflow: hidden;
+
+  /*
+    Uniform 16px gutter for the collapsed cluster — top AND left — matching the
+    right-side controls' (toggle + inspector) 16px inset. Same on both
+    breakpoints. These inherit into <copilotkit-threads-drawer> and pierce its
+    shadow root.
+  */
+  --cpk-drawer-launcher-top: 16px;
+  --cpk-drawer-launcher-left: 16px;
+}
+
+.mainPanel {
+  /*
+    Pin the chat to the SECOND grid track explicitly. The client-only
+    <CopilotThreadsDrawer> renders NOTHING during SSR/prerender (it is mounted-gated),
+    so at first paint the grid has a single child — this panel. Without an
+    explicit placement it would flow into the FIRST (reserved 320px) track,
+    cramming the chat at x:0, then jump to the second track once the drawer
+    mounts as the first child — the "starts left, then slides over" shift.
+    Forcing column 2 keeps the chat in its final position from first paint; the
+    drawer fills the reserved first track when it mounts.
+  */
+  grid-column: 2;
+  min-width: 0;
+  min-height: 100vh;
+  min-height: 100svh;
+  height: 100dvh;
+  overflow: auto;
+}
+
+/*
+  Mobile (≤768px): the drawer is an off-canvas overlay, so don't reserve a
+  column for it — collapse to a single track and let the chat fill the full
+  width. This block MUST come after the base rules above: media queries do not
+  add specificity, so a same-specificity base rule placed later would otherwise
+  win and leak the desktop two-column layout onto mobile.
+*/
+@media (max-width: 768px) {
+  .layout {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .mainPanel {
+    grid-column: auto;
+  }
+}

examples/integrations/claude-sdk-python/src/app/page.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import { ExampleLayout } from "@/components/example-layout";
+import { ExampleCanvas } from "@/components/example-canvas";
+import { useGenerativeUIExamples, useExampleSuggestions } from "@/hooks";
+
+import {
+  CopilotChat,
+  CopilotChatConfigurationProvider,
+  CopilotThreadsDrawer,
+} from "@copilotkit/react-core/v2";
+
+import styles from "./page.module.css";
+
+export default function HomePage() {
+  useGenerativeUIExamples();
+  useExampleSuggestions();
+
+  return (
+    /*
+      One UNCONTROLLED CopilotChatConfigurationProvider (no `threadId` prop) owns
+      the active thread for the whole surface. The SDK <CopilotThreadsDrawer> drives it
+      directly — picking a row sets the active thread, "+ New" resets to a fresh
+      thread (clearing the chat) — with no host thread-state. The chat and the
+      canvas read the same active thread from the provider (the canvas's
+      `useAgent()` falls back to it), so they stay on the same per-thread agent
+      clone the chat's /connect replay populates. A *controlled* provider would
+      block "+ New" from resetting the chat, so uncontrolled-inside-provider is
+      required, not optional.
+    */
+    <CopilotChatConfigurationProvider agentId="default">
+      <div className={styles.layout}>
+        {/* SDK threads drawer (replaces the hand-rolled fork). License-gated: the locked view's Upgrade CTA opens the Intelligence docs by default. */}
+        <CopilotThreadsDrawer agentId="default" />
+        <div className={styles.mainPanel}>
+          <ExampleLayout
+            chatContent={
+              <CopilotChat
+                attachments={{ enabled: true }}
+                input={{ disclaimer: () => null, className: "pb-6" }}
+              />
+            }
+            appContent={<ExampleCanvas />}
+          />
+        </div>
+      </div>
+    </CopilotChatConfigurationProvider>
+  );
+}

examples/integrations/claude-sdk-python/src/components/example-canvas/index.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import { useAgent } from "@copilotkit/react-core/v2";
+import { TodoList } from "./todo-list";
+
+export function ExampleCanvas() {
+  const { agent } = useAgent();
+
+  return (
+    <div className="h-full overflow-y-auto bg-[var(--background)]">
+      <div className="max-w-4xl mx-auto px-8 py-10 h-full">
+        <TodoList
+          todos={agent.state?.todos || []}
+          onUpdate={(updatedTodos) => agent.setState({ todos: updatedTodos })}
+          isAgentRunning={agent.isRunning}
+        />
+      </div>
+    </div>
+  );
+}

examples/integrations/claude-sdk-python/src/components/example-canvas/todo-card.tsx

@@ -0,0 +1,197 @@
+"use client";
+
+import { useState, useRef, useEffect } from "react";
+import { Card } from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Button } from "@/components/ui/button";
+import { X } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface Todo {
+  id: string;
+  title: string;
+  description: string;
+  emoji: string;
+  status: "pending" | "completed";
+}
+
+interface TodoCardProps {
+  todo: Todo;
+  onToggleStatus: (todo: Todo) => void;
+  onDelete: (todo: Todo) => void;
+  onUpdateTitle: (todoId: string, title: string) => void;
+  onUpdateDescription: (todoId: string, description: string) => void;
+  onUpdateEmoji: (todoId: string, emoji: string) => void;
+}
+
+const EMOJI_OPTIONS = ["✅", "🔥", "🎯", "💡", "🚀"];
+
+export function TodoCard({
+  todo,
+  onToggleStatus,
+  onDelete,
+  onUpdateTitle,
+  onUpdateDescription,
+  onUpdateEmoji,
+}: TodoCardProps) {
+  const [editingField, setEditingField] = useState<
+    "title" | "description" | null
+  >(null);
+  const [editValue, setEditValue] = useState("");
+  const [showEmojiPicker, setShowEmojiPicker] = useState(false);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  const isCompleted = todo.status === "completed";
+  const truncatedDescription =
+    todo.description.length > 120
+      ? todo.description.slice(0, 120) + "..."
+      : todo.description;
+
+  const startEdit = (field: "title" | "description") => {
+    setEditingField(field);
+    setEditValue(field === "title" ? todo.title : todo.description);
+  };
+
+  const saveEdit = (field: "title" | "description") => {
+    if (editValue.trim()) {
+      if (field === "title") {
+        onUpdateTitle(todo.id, editValue.trim());
+      } else {
+        onUpdateDescription(todo.id, editValue.trim());
+      }
+    }
+    setEditingField(null);
+    setEditValue("");
+  };
+
+  const cancelEdit = () => {
+    setEditingField(null);
+    setEditValue("");
+  };
+
+  useEffect(() => {
+    if (textareaRef.current) {
+      textareaRef.current.style.height = "auto";
+      textareaRef.current.style.height =
+        textareaRef.current.scrollHeight + "px";
+    }
+  }, [editValue]);
+
+  return (
+    <Card
+      className={cn(
+        "group relative p-5 transition-all duration-150",
+        isCompleted && "opacity-60",
+      )}
+    >
+      {/* Delete — top right on hover */}
+      <Button
+        variant="ghost"
+        size="icon"
+        onClick={() => onDelete(todo)}
+        className="absolute top-3 right-3 h-7 w-7 opacity-0 group-hover:opacity-100 transition-opacity"
+        aria-label="Delete todo"
+      >
+        <X className="h-3.5 w-3.5" />
+      </Button>
+
+      {/* Emoji avatar */}
+      <div className="relative inline-block mb-3">
+        <button
+          onClick={() => setShowEmojiPicker(!showEmojiPicker)}
+          className={cn(
+            "block text-3xl leading-none cursor-pointer rounded-xl p-2 transition-colors",
+            isCompleted ? "bg-[var(--muted)]" : "bg-[var(--secondary)]",
+          )}
+          aria-label="Change emoji"
+        >
+          {todo.emoji}
+        </button>
+
+        {showEmojiPicker && (
+          <div className="absolute top-0 left-full ml-2 z-10 flex gap-1 p-1.5 rounded-full bg-[var(--card)] border border-[var(--border)] shadow-lg">
+            {EMOJI_OPTIONS.map((emoji) => (
+              <button
+                key={emoji}
+                onClick={() => {
+                  onUpdateEmoji(todo.id, emoji);
+                  setShowEmojiPicker(false);
+                }}
+                className="text-lg w-8 h-8 flex items-center justify-center rounded-full cursor-pointer transition-colors hover:bg-[var(--secondary)]"
+              >
+                {emoji}
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Title */}
+      <div className="flex items-start gap-3">
+        <Checkbox
+          checked={isCompleted}
+          onCheckedChange={() => onToggleStatus(todo)}
+          className="mt-[2px]"
+        />
+
+        <div className="flex-1 min-w-0">
+          {editingField === "title" ? (
+            <input
+              type="text"
+              value={editValue}
+              onChange={(e) => setEditValue(e.target.value)}
+              onBlur={() => saveEdit("title")}
+              onKeyDown={(e) => {
+                if (e.key === "Enter") saveEdit("title");
+                if (e.key === "Escape") cancelEdit();
+              }}
+              className="w-full text-base font-semibold focus:outline-none bg-transparent text-[var(--foreground)] border-b-2 border-[var(--primary)] pb-[2px]"
+              autoFocus
+              aria-label="Edit todo title"
+            />
+          ) : (
+            <div
+              onClick={() => startEdit("title")}
+              className={cn(
+                "text-base font-semibold cursor-text break-words leading-snug",
+                isCompleted
+                  ? "text-[var(--muted-foreground)] line-through"
+                  : "text-[var(--foreground)]",
+              )}
+            >
+              {todo.title}
+            </div>
+          )}
+
+          {editingField === "description" ? (
+            <textarea
+              ref={textareaRef}
+              value={editValue}
+              onChange={(e) => setEditValue(e.target.value)}
+              onBlur={() => saveEdit("description")}
+              onKeyDown={(e) => {
+                if (e.key === "Escape") cancelEdit();
+              }}
+              className="w-full mt-1.5 text-sm leading-relaxed focus:outline-none resize-none bg-transparent text-[var(--muted-foreground)] border-b-2 border-[var(--primary)] pb-[2px]"
+              rows={1}
+              autoFocus
+              aria-label="Edit todo description"
+            />
+          ) : (
+            <p
+              onClick={() => startEdit("description")}
+              className={cn(
+                "mt-1.5 text-sm leading-relaxed cursor-text",
+                isCompleted
+                  ? "text-[var(--muted-foreground)] line-through"
+                  : "text-[var(--muted-foreground)]",
+              )}
+            >
+              {truncatedDescription}
+            </p>
+          )}
+        </div>
+      </div>
+    </Card>
+  );
+}

examples/integrations/claude-sdk-python/src/components/example-canvas/todo-column.tsx

@@ -0,0 +1,88 @@
+"use client";
+
+import { TodoCard } from "./todo-card";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Plus } from "lucide-react";
+
+interface Todo {
+  id: string;
+  title: string;
+  description: string;
+  emoji: string;
+  status: "pending" | "completed";
+}
+
+interface TodoColumnProps {
+  title: string;
+  todos: Todo[];
+  emptyMessage: string;
+  showAddButton?: boolean;
+  onAddTodo?: () => void;
+  onToggleStatus: (todo: Todo) => void;
+  onDelete: (todo: Todo) => void;
+  onUpdateTitle: (todoId: string, title: string) => void;
+  onUpdateDescription: (todoId: string, description: string) => void;
+  onUpdateEmoji: (todoId: string, emoji: string) => void;
+  isAgentRunning: boolean;
+}
+
+export function TodoColumn({
+  title,
+  todos,
+  emptyMessage,
+  showAddButton = false,
+  onAddTodo,
+  onToggleStatus,
+  onDelete,
+  onUpdateTitle,
+  onUpdateDescription,
+  onUpdateEmoji,
+  isAgentRunning,
+}: TodoColumnProps) {
+  return (
+    <section aria-label={`${title} column`} className="flex-1 min-w-0">
+      {/* Header */}
+      <div className="flex items-center justify-between mb-5">
+        <div className="flex items-center gap-3">
+          <h2 className="text-lg font-bold tracking-tight text-[var(--foreground)]">
+            {title}
+          </h2>
+          <Badge variant="secondary">{todos.length}</Badge>
+        </div>
+        {showAddButton && onAddTodo && (
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={onAddTodo}
+            disabled={isAgentRunning}
+            aria-label="Add new todo"
+          >
+            <Plus className="h-4 w-4" />
+          </Button>
+        )}
+      </div>
+
+      {/* Cards */}
+      <div className="space-y-3">
+        {todos.length === 0 ? (
+          <div className="text-center text-sm rounded-[var(--radius)] border-2 border-dashed border-[var(--border)] p-5 min-h-[151px] flex items-center justify-center text-[var(--muted-foreground)]">
+            {emptyMessage}
+          </div>
+        ) : (
+          todos.map((todo) => (
+            <TodoCard
+              key={todo.id}
+              todo={todo}
+              onToggleStatus={onToggleStatus}
+              onDelete={onDelete}
+              onUpdateTitle={onUpdateTitle}
+              onUpdateDescription={onUpdateDescription}
+              onUpdateEmoji={onUpdateEmoji}
+            />
+          ))
+        )}
+      </div>
+    </section>
+  );
+}

examples/integrations/claude-sdk-python/src/components/example-canvas/todo-list.tsx

@@ -0,0 +1,115 @@
+"use client";
+
+import { TodoColumn } from "./todo-column";
+import { Button } from "@/components/ui/button";
+
+interface Todo {
+  id: string;
+  title: string;
+  description: string;
+  emoji: string;
+  status: "pending" | "completed";
+}
+
+interface TodoListProps {
+  todos: Todo[];
+  onUpdate: (todos: Todo[]) => void;
+  isAgentRunning: boolean;
+}
+
+export function TodoList({ todos, onUpdate, isAgentRunning }: TodoListProps) {
+  const pendingTodos = todos.filter((t) => t.status === "pending");
+  const completedTodos = todos.filter((t) => t.status === "completed");
+
+  const toggleStatus = (todo: Todo) => {
+    const updated = todos.map((t) =>
+      t.id === todo.id
+        ? {
+            ...t,
+            status: (t.status === "completed" ? "pending" : "completed") as
+              | "pending"
+              | "completed",
+          }
+        : t,
+    );
+    onUpdate(updated);
+  };
+
+  const deleteTodo = (todo: Todo) => {
+    onUpdate(todos.filter((t) => t.id !== todo.id));
+  };
+
+  const updateTitle = (todoId: string, title: string) => {
+    const updated = todos.map((t) => (t.id === todoId ? { ...t, title } : t));
+    onUpdate(updated);
+  };
+
+  const updateDescription = (todoId: string, description: string) => {
+    const updated = todos.map((t) =>
+      t.id === todoId ? { ...t, description } : t,
+    );
+    onUpdate(updated);
+  };
+
+  const updateEmoji = (todoId: string, emoji: string) => {
+    const updated = todos.map((t) => (t.id === todoId ? { ...t, emoji } : t));
+    onUpdate(updated);
+  };
+
+  const addTodo = () => {
+    const newTodo: Todo = {
+      id: crypto.randomUUID(),
+      title: "New Todo",
+      description: "Add a description",
+      emoji: "🎯",
+      status: "pending",
+    };
+    onUpdate([...todos, newTodo]);
+  };
+
+  if (!todos || todos.length === 0) {
+    return (
+      <div className="flex flex-col items-center justify-center h-full gap-4">
+        <div className="text-5xl">✏️</div>
+        <p className="text-base font-semibold text-[var(--foreground)]">
+          No todos yet
+        </p>
+        <p className="text-sm text-[var(--muted-foreground)]">
+          Create your first task to get started
+        </p>
+        <Button onClick={addTodo} disabled={isAgentRunning} className="mt-2">
+          Add a task
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex gap-8 h-full">
+      <TodoColumn
+        title="To Do"
+        todos={pendingTodos}
+        emptyMessage="No pending todos"
+        showAddButton
+        onAddTodo={addTodo}
+        onToggleStatus={toggleStatus}
+        onDelete={deleteTodo}
+        onUpdateTitle={updateTitle}
+        onUpdateDescription={updateDescription}
+        onUpdateEmoji={updateEmoji}
+        isAgentRunning={isAgentRunning}
+      />
+      <TodoColumn
+        title="Done"
+        todos={completedTodos}
+        emptyMessage="No completed todos yet"
+        onToggleStatus={toggleStatus}
+        onDelete={deleteTodo}
+        onUpdateTitle={updateTitle}
+        onUpdateDescription={updateDescription}
+        onUpdateEmoji={updateEmoji}
+        isAgentRunning={isAgentRunning}
+      />
+    </div>
+  );
+}

examples/integrations/claude-sdk-python/src/components/example-layout/index.tsx

@@ -0,0 +1,83 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { useState } from "react";
+import { ModeToggle } from "./mode-toggle";
+import { useFrontendTool } from "@copilotkit/react-core/v2";
+
+interface ExampleLayoutProps {
+  chatContent: ReactNode;
+  appContent: ReactNode;
+}
+
+export function ExampleLayout({ chatContent, appContent }: ExampleLayoutProps) {
+  const [mode, setMode] = useState<"chat" | "app">("chat");
+
+  useFrontendTool({
+    name: "enableAppMode",
+    description:
+      "Enable app mode, make sure its open when interacting with todos.",
+    handler: async () => {
+      setMode("app");
+    },
+  });
+
+  useFrontendTool({
+    name: "enableChatMode",
+    description: "Enable chat mode",
+    handler: async () => {
+      setMode("chat");
+    },
+  });
+
+  return (
+    <div className="h-full flex flex-row pb-6">
+      <ModeToggle mode={mode} onModeChange={setMode} />
+
+      {/* Chat Content */}
+      <div
+        className={`max-h-full flex flex-col dark:bg-stone-950 ${
+          mode === "app"
+            ? "w-1/2 px-6 max-lg:hidden" // Half/half with the canvas; hidden on mobile in app mode
+            : "flex-1 max-lg:px-4"
+        }`}
+      >
+        {/* Clear the threads drawer's floating launcher/collapsed cluster, which
+            is fixed at the top-left corner. Below 1024px (mobile off-canvas) that
+            is always present → max-lg:pl-24. On desktop it only appears when the
+            drawer is COLLAPSED — detected via --cpk-drawer-reserved-width, which
+            the drawer sets to 0px on collapse (else its 320px default): the pl
+            calc resolves to 1.5rem (pl-6) when expanded and ~6rem when collapsed,
+            so the logo never sits under the cluster. max-lg:pt-2.5 + pb-0
+            vertically center the logo with that launcher and the top-right
+            Chat/App toggle (both pinned at top-2). */}
+        <div className="shrink-0 pt-[23px] pl-[max(1.5rem,calc(7rem_-_var(--cpk-drawer-reserved-width,320px)))] pb-2 max-lg:pl-24 max-lg:pb-4 flex gap-1.5 items-center align-center">
+          <span className="font-extrabold text-2xl">CopilotKit</span>
+          <img
+            src="/copilotkit-logo-mark.svg"
+            alt="CopilotKit"
+            className="h-7"
+          />
+        </div>
+        <div className="flex-1 min-h-0 overflow-y-auto">{chatContent}</div>
+      </div>
+
+      {/* State Panel */}
+      <div
+        className={`h-full overflow-hidden ${
+          mode === "app"
+            ? "w-1/2 max-lg:w-full border-l border-[var(--border)] max-lg:border-l-0" // Half/half with the chat; full width on mobile
+            : "w-0 border-l-0"
+        }`}
+      >
+        {/*
+          Fill the state panel's own width. The previous `lg:w-[66.666vw]` was
+          viewport-relative, so with a reserved drawer column it overflowed this
+          container (clipped by overflow-hidden) and pushed centered content
+          right of the visible box's center.
+        */}
+        <div className="w-full h-full">{appContent}</div>
+      </div>
+    </div>
+  );
+}

examples/integrations/claude-sdk-python/src/components/example-layout/mode-toggle.tsx

@@ -0,0 +1,39 @@
+interface ModeToggleProps {
+  mode: "chat" | "app";
+  onModeChange: (mode: "chat" | "app") => void;
+}
+
+export function ModeToggle({ mode, onModeChange }: ModeToggleProps) {
+  return (
+    <div
+      role="group"
+      aria-label="View mode"
+      className="fixed top-4 right-4 z-50 flex items-center min-h-[46px] rounded-[4px] border border-[var(--border)] bg-[var(--secondary)] p-1.5"
+    >
+      <button
+        type="button"
+        aria-pressed={mode === "chat"}
+        onClick={() => onModeChange("chat")}
+        className={`px-4 py-1.5 rounded-[2px] text-[13px] leading-[20px] font-medium transition-all cursor-pointer ${
+          mode === "chat"
+            ? "bg-[var(--card)] text-[var(--card-foreground)] shadow-sm"
+            : "text-[var(--muted-foreground)]"
+        }`}
+      >
+        Chat
+      </button>
+      <button
+        type="button"
+        aria-pressed={mode === "app"}
+        onClick={() => onModeChange("app")}
+        className={`px-4 py-1.5 rounded-[2px] text-[13px] leading-[20px] font-medium transition-all cursor-pointer ${
+          mode === "app"
+            ? "bg-[var(--card)] text-[var(--card-foreground)] shadow-sm"
+            : "text-[var(--muted-foreground)]"
+        }`}
+      >
+        App
+      </button>
+    </div>
+  );
+}

examples/integrations/claude-sdk-python/src/components/generative-ui/charts/bar-chart.tsx

@@ -0,0 +1,158 @@
+import { useRef } from "react";
+import {
+  BarChart as RechartsBarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  Tooltip,
+  CartesianGrid,
+  Cell,
+  ResponsiveContainer,
+  Rectangle,
+} from "recharts";
+import { z } from "zod";
+import { CHART_COLORS, CHART_CONFIG } from "./config";
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+} from "@/components/ui/card";
+import { BarChart3 } from "lucide-react";
+
+export const BarChartProps = 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(),
+    }),
+  ),
+});
+
+type BarChartProps = z.infer<typeof BarChartProps>;
+
+/** Tracks seen indices so only NEW bars get the fade-in animation. */
+function useSeenIndices() {
+  const seen = useRef(new Set<number>());
+  return {
+    isNew(index: number) {
+      if (seen.current.has(index)) return false;
+      seen.current.add(index);
+      return true;
+    },
+  };
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function AnimatedBar(props: any) {
+  const { isNew, ...rest } = props;
+  return (
+    <g
+      style={
+        isNew
+          ? {
+              animation: "barSlideIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both",
+            }
+          : undefined
+      }
+    >
+      <Rectangle {...rest} />
+    </g>
+  );
+}
+
+export function BarChart({ title, description, data }: BarChartProps) {
+  const { isNew } = useSeenIndices();
+
+  if (!data || !Array.isArray(data) || data.length === 0) {
+    return (
+      <Card className="max-w-2xl mx-auto my-4">
+        <CardHeader>
+          <div className="flex items-center gap-2">
+            <BarChart3 className="h-4 w-4 text-[var(--muted-foreground)]" />
+            <CardTitle>{title}</CardTitle>
+          </div>
+          <CardDescription>{description}</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <p className="text-[var(--muted-foreground)] text-center py-8 text-sm">
+            No data available
+          </p>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card className="max-w-2xl mx-auto my-4 overflow-hidden">
+      {/* Scoped keyframe — no globals.css needed */}
+      <style>{`
+        @keyframes barSlideIn {
+          from { transform: translateY(40px); opacity: 0; }
+          20% { opacity: 1; }
+          to { transform: translateY(0); opacity: 1; }
+        }
+      `}</style>
+      <CardHeader className="pb-2">
+        <div className="flex items-center gap-2">
+          <div className="flex items-center justify-center h-6 w-6 rounded-md bg-[var(--secondary)]">
+            <BarChart3 className="h-3.5 w-3.5 text-[var(--muted-foreground)]" />
+          </div>
+          <CardTitle>{title}</CardTitle>
+        </div>
+        <CardDescription>{description}</CardDescription>
+      </CardHeader>
+      <CardContent className="pt-2">
+        <ResponsiveContainer width="100%" height={280}>
+          <RechartsBarChart
+            data={data}
+            margin={{ top: 12, right: 12, bottom: 4, left: -8 }}
+          >
+            <CartesianGrid
+              strokeDasharray="3 3"
+              stroke="var(--border)"
+              vertical={false}
+            />
+            <XAxis
+              dataKey="label"
+              tick={{ fontSize: 12, fill: "var(--muted-foreground)" }}
+              stroke="var(--border)"
+              tickLine={false}
+              axisLine={false}
+            />
+            <YAxis
+              tick={{ fontSize: 12, fill: "var(--muted-foreground)" }}
+              stroke="var(--border)"
+              tickLine={false}
+              axisLine={false}
+            />
+            <Tooltip
+              contentStyle={CHART_CONFIG.tooltipStyle}
+              cursor={{ fill: "var(--secondary)", opacity: 0.5 }}
+            />
+            <Bar
+              isAnimationActive={false}
+              dataKey="value"
+              radius={[6, 6, 0, 0]}
+              maxBarSize={48}
+              // eslint-disable-next-line @typescript-eslint/no-explicit-any
+              shape={(props: any) => (
+                <AnimatedBar {...props} isNew={isNew(props.index as number)} />
+              )}
+            >
+              {data.map((_, index) => (
+                <Cell
+                  key={index}
+                  fill={CHART_COLORS[index % CHART_COLORS.length]}
+                />
+              ))}
+            </Bar>
+          </RechartsBarChart>
+        </ResponsiveContainer>
+      </CardContent>
+    </Card>
+  );
+}

examples/integrations/claude-sdk-python/src/components/generative-ui/charts/config.ts

@@ -0,0 +1,25 @@
+/**
+ * CopilotKit brand chart palette — Plus Jakarta Sans / brand color system.
+ */
+export const CHART_COLORS = [
+  "#BEC2FF", // lilac-400
+  "#85ECCE", // mint-400
+  "#FFAC4D", // orange-400
+  "#FFF388", // yellow-400
+  "#189370", // mint-800
+  "#EEE6FE", // primary-100
+  "#FA5F67", // red-400
+] as const;
+
+export const CHART_CONFIG = {
+  tooltipStyle: {
+    backgroundColor: "var(--card)",
+    border: "1px solid var(--border)",
+    borderRadius: "10px",
+    padding: "10px 14px",
+    color: "var(--foreground)",
+    fontSize: "13px",
+    fontFamily: "var(--font-body)",
+    boxShadow: "0 4px 12px rgba(0,0,0,0.08)",
+  },
+};

examples/integrations/claude-sdk-python/src/components/generative-ui/charts/pie-chart.tsx

@@ -0,0 +1,155 @@
+import { z } from "zod";
+import { CHART_COLORS } from "./config";
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+} from "@/components/ui/card";
+
+export const PieChartProps = 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(),
+    }),
+  ),
+});
+
+type PieChartProps = z.infer<typeof PieChartProps>;
+
+/** Custom SVG donut chart built with <circle> + stroke-dasharray. */
+function DonutChart({
+  data,
+  size = 240,
+  strokeWidth = 40,
+}: {
+  data: { label: string; value: number }[];
+  size?: number;
+  strokeWidth?: number;
+}) {
+  const radius = (size - strokeWidth) / 2;
+  const circumference = 2 * Math.PI * radius;
+  const center = size / 2;
+
+  const total = data.reduce((sum, d) => sum + (Number(d.value) || 0), 0);
+
+  // Calculate each slice's arc length and starting position
+  let accumulated = 0;
+  const slices = data.map((item, index) => {
+    const val = Number(item.value) || 0;
+    const ratio = total > 0 ? val / total : 0;
+    const arc = ratio * circumference;
+    const startAt = accumulated;
+    accumulated += arc;
+    return {
+      ...item,
+      arc,
+      gap: circumference - arc,
+      // Negative dashoffset shifts the dash forward (clockwise) to the correct position
+      dashoffset: -startAt,
+      color: CHART_COLORS[index % CHART_COLORS.length],
+    };
+  });
+
+  return (
+    <svg
+      width="100%"
+      viewBox={`0 0 ${size} ${size}`}
+      className="block mx-auto"
+      style={{ maxWidth: size, transform: "scaleX(-1)" }}
+    >
+      {/* Background ring */}
+      <circle
+        cx={center}
+        cy={center}
+        r={radius}
+        fill="none"
+        stroke="var(--secondary)"
+        strokeWidth={strokeWidth}
+      />
+      {/* Data slices */}
+      {slices.map((slice, i) => (
+        <circle
+          key={i}
+          cx={center}
+          cy={center}
+          r={radius}
+          fill="none"
+          stroke={slice.color}
+          strokeWidth={strokeWidth}
+          strokeDasharray={`${slice.arc} ${slice.gap}`}
+          strokeDashoffset={slice.dashoffset}
+          strokeLinecap="butt"
+          transform={`rotate(-90 ${center} ${center})`}
+        />
+      ))}
+    </svg>
+  );
+}
+
+export function PieChart({ title, description, data }: PieChartProps) {
+  if (!data || !Array.isArray(data) || data.length === 0) {
+    return (
+      <Card className="max-w-lg mx-auto my-4">
+        <CardHeader>
+          <CardTitle>{title}</CardTitle>
+          <CardDescription>{description}</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <p className="text-[var(--muted-foreground)] text-center py-8 text-sm">
+            No data available
+          </p>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  const total = data.reduce((sum, d) => sum + (Number(d.value) || 0), 0);
+
+  return (
+    <Card className="max-w-lg mx-auto my-4 overflow-hidden">
+      <CardHeader className="pb-0">
+        <CardTitle>{title}</CardTitle>
+        <CardDescription>{description}</CardDescription>
+      </CardHeader>
+      <CardContent className="pt-4">
+        <DonutChart data={data} />
+
+        {/* Legend */}
+        <div className="space-y-2 pt-4">
+          {data.map((item, index) => {
+            const val = Number(item.value) || 0;
+            const pct = total > 0 ? ((val / total) * 100).toFixed(0) : 0;
+            return (
+              <div
+                key={index}
+                className="flex items-center gap-3 text-sm transition-opacity duration-300 ease-out"
+                style={{ opacity: 1 }}
+              >
+                <span
+                  className="inline-block h-3 w-3 rounded-full shrink-0"
+                  style={{
+                    backgroundColor: CHART_COLORS[index % CHART_COLORS.length],
+                  }}
+                />
+                <span className="flex-1 text-[var(--foreground)] truncate">
+                  {item.label}
+                </span>
+                <span className="text-[var(--muted-foreground)] tabular-nums">
+                  {val.toLocaleString()}
+                </span>
+                <span className="text-[var(--muted-foreground)] text-sm w-10 text-right tabular-nums">
+                  {pct}%
+                </span>
+              </div>
+            );
+          })}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

examples/integrations/claude-sdk-python/src/components/generative-ui/meeting-time-picker.tsx

@@ -0,0 +1,177 @@
+import { useState } from "react";
+import { Card, CardContent } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Spinner } from "@/components/ui/spinner";
+import { Check, X, Clock, ChevronRight } from "lucide-react";
+
+export interface TimeSlot {
+  date: string;
+  time: string;
+  duration?: string;
+}
+
+export interface MeetingTimePickerProps {
+  status: "inProgress" | "executing" | "complete";
+  respond?: (response: string) => void;
+  reasonForScheduling?: string;
+  meetingDuration?: number;
+  title?: string;
+  timeSlots?: TimeSlot[];
+}
+
+export function MeetingTimePicker({
+  status,
+  respond,
+  reasonForScheduling,
+  meetingDuration,
+  title = "Schedule a Meeting",
+  timeSlots = [
+    { date: "Tomorrow", time: "2:00 PM", duration: "30 min" },
+    { date: "Friday", time: "10:00 AM", duration: "30 min" },
+    { date: "Next Monday", time: "3:00 PM", duration: "30 min" },
+  ],
+}: MeetingTimePickerProps) {
+  const displayTitle = reasonForScheduling || title;
+  const slots = meetingDuration
+    ? timeSlots.map((slot) => ({ ...slot, duration: `${meetingDuration} min` }))
+    : timeSlots;
+  const [selectedSlot, setSelectedSlot] = useState<TimeSlot | null>(null);
+  const [declined, setDeclined] = useState(false);
+
+  const handleSelectSlot = (slot: TimeSlot) => {
+    setSelectedSlot(slot);
+    respond?.(
+      `Meeting scheduled for ${slot.date} at ${slot.time}${slot.duration ? ` (${slot.duration})` : ""}.`,
+    );
+  };
+
+  const handleDecline = () => {
+    setDeclined(true);
+    respond?.(
+      "The user declined all proposed meeting times. Please suggest alternative times or ask for their availability.",
+    );
+  };
+
+  // Confirmed state
+  if (selectedSlot) {
+    return (
+      <Card className="max-w-md w-full mx-auto mb-4 overflow-hidden">
+        <CardContent className="p-6">
+          <div className="flex flex-col items-center text-center gap-3">
+            <div className="flex items-center justify-center h-10 w-10 rounded-full bg-[#189370]">
+              <Check className="h-5 w-5 text-white" strokeWidth={3} />
+            </div>
+            <div>
+              <h3 className="text-lg font-bold text-[var(--foreground)]">
+                Meeting Scheduled
+              </h3>
+              <p className="text-sm text-[var(--muted-foreground)] mt-1">
+                {selectedSlot.date} at {selectedSlot.time}
+              </p>
+            </div>
+            {selectedSlot.duration && (
+              <Badge variant="secondary">
+                <Clock className="h-3 w-3 mr-1" />
+                {selectedSlot.duration}
+              </Badge>
+            )}
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  // Declined state
+  if (declined) {
+    return (
+      <Card className="max-w-md w-full mx-auto mb-4 overflow-hidden">
+        <CardContent className="p-6">
+          <div className="flex flex-col items-center text-center gap-3">
+            <div className="flex items-center justify-center h-12 w-12 rounded-full bg-[var(--secondary)]">
+              <X className="h-6 w-6 text-[var(--muted-foreground)]" />
+            </div>
+            <div>
+              <h3 className="text-lg font-bold text-[var(--foreground)]">
+                No Time Selected
+              </h3>
+              <p className="text-sm text-[var(--muted-foreground)] mt-1">
+                Looking for a better time that works for you
+              </p>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  // Selection state
+  return (
+    <Card className="max-w-md w-full mx-auto mb-4 overflow-hidden">
+      <CardContent className="p-6">
+        <div className="flex flex-col items-center text-center mb-5">
+          <div className="flex items-center justify-center h-12 w-12 rounded-full bg-[var(--accent)] mb-3">
+            <Clock className="h-6 w-6 text-[#BEC2FF]" />
+          </div>
+          <h3 className="text-lg font-bold text-[var(--foreground)]">
+            {displayTitle}
+          </h3>
+          <p className="text-sm text-[var(--muted-foreground)] mt-1">
+            {status === "inProgress"
+              ? "Finding available times..."
+              : "Pick a time that works for you"}
+          </p>
+        </div>
+
+        {status === "inProgress" && (
+          <div className="flex justify-center py-6">
+            <Spinner size="lg" />
+          </div>
+        )}
+
+        {status === "executing" && (
+          <div className="space-y-3">
+            {slots.map((slot, index) => (
+              <button
+                key={index}
+                onClick={() => handleSelectSlot(slot)}
+                className="group w-full px-6 py-5 rounded-[var(--radius)]
+                  border border-[var(--border)]
+                  hover:border-[var(--ring)] hover:bg-[var(--accent)]
+                  transition-all duration-150 cursor-pointer
+                  flex items-center gap-4"
+              >
+                <div className="flex-1 text-left">
+                  <div className="font-semibold text-base text-[var(--foreground)]">
+                    {slot.date}
+                  </div>
+                  <div className="text-sm text-[var(--muted-foreground)] mt-0.5">
+                    {slot.time}
+                  </div>
+                </div>
+                {slot.duration && (
+                  <Badge
+                    variant="secondary"
+                    className="shrink-0 text-sm px-3 py-1"
+                  >
+                    {slot.duration}
+                  </Badge>
+                )}
+                <ChevronRight className="h-4 w-4 text-[var(--muted-foreground)] opacity-0 group-hover:opacity-100 transition-opacity shrink-0" />
+              </button>
+            ))}
+
+            <Button
+              variant="ghost"
+              size="sm"
+              className="w-full mt-1 text-xs text-[var(--muted-foreground)]"
+              onClick={handleDecline}
+            >
+              None of these work
+            </Button>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

examples/integrations/claude-sdk-python/src/components/headless-chat.tsx

@@ -0,0 +1,48 @@
+import { useAgent } from "@copilotkit/react-core/v2";
+import { useCallback, useState } from "react";
+
+export const HeadlessChat = () => {
+  const { agent } = useAgent();
+  const [message, setMessage] = useState("");
+
+  const sendMessage = useCallback(
+    (message: string) => {
+      agent.addMessage({
+        role: "user",
+        id: crypto.randomUUID(),
+        content: message,
+      });
+      agent.runAgent();
+      setMessage("");
+    },
+    [agent],
+  );
+
+  return (
+    <div>
+      <h1>Chat</h1>
+      {agent.messages.map((message) => (
+        <div key={message.id}>
+          <p>{JSON.stringify(message.content)}</p>
+        </div>
+      ))}
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+          if (!message.trim()) return;
+          sendMessage(message);
+        }}
+      >
+        <input
+          type="text"
+          aria-label="Message"
+          value={message}
+          onChange={(e) => setMessage(e.target.value)}
+        />
+        <button type="submit" disabled={!message.trim()}>
+          Send
+        </button>
+      </form>
+    </div>
+  );
+};

examples/integrations/claude-sdk-python/src/components/tool-rendering.tsx

@@ -0,0 +1,84 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import { Wrench, Check, ChevronDown } from "lucide-react";
+import { Spinner } from "@/components/ui/spinner";
+
+interface ToolReasoningProps {
+  name: string;
+  args?: unknown;
+  status: string;
+}
+
+function formatValue(value: unknown): string {
+  if (Array.isArray(value)) return `[${value.length} items]`;
+  if (typeof value === "object" && value !== null)
+    return `{${Object.keys(value).length} keys}`;
+  if (typeof value === "string") return `"${value}"`;
+  return String(value);
+}
+
+export function ToolReasoning({ name, args, status }: ToolReasoningProps) {
+  const entries = args ? Object.entries(args) : [];
+  const detailsRef = useRef<HTMLDetailsElement>(null);
+  const isRunning = status === "executing" || status === "inProgress";
+
+  // Auto-open while executing, auto-close when complete
+  useEffect(() => {
+    if (!detailsRef.current) return;
+    detailsRef.current.open = isRunning;
+  }, [isRunning]);
+
+  const statusIcon = isRunning ? (
+    <Spinner size="sm" className="h-3 w-3" />
+  ) : (
+    <Check className="h-3 w-3 text-emerald-500" />
+  );
+
+  return (
+    <div className="my-1.5">
+      {entries.length > 0 ? (
+        <details ref={detailsRef} open className="group">
+          <summary className="flex items-center gap-2 cursor-pointer list-none text-sm text-[var(--muted-foreground)] hover:text-[var(--foreground)] transition-colors">
+            {statusIcon}
+            <Wrench className="h-3 w-3" />
+            <span
+              className="font-medium"
+              style={{ fontFamily: "var(--font-code)" }}
+            >
+              {name}
+            </span>
+            <ChevronDown className="h-3 w-3 ml-auto transition-transform group-open:rotate-180" />
+          </summary>
+          <div className="ml-5 mt-1.5 rounded-md bg-[var(--secondary)] px-3 py-2 space-y-1">
+            {entries.map(([key, value]) => (
+              <div
+                key={key}
+                className="flex gap-2 min-w-0 text-xs"
+                style={{ fontFamily: "var(--font-code)" }}
+              >
+                <span className="text-[var(--muted-foreground)] shrink-0">
+                  {key}:
+                </span>
+                <span className="text-[var(--foreground)] truncate">
+                  {formatValue(value)}
+                </span>
+              </div>
+            ))}
+          </div>
+        </details>
+      ) : (
+        <div className="flex items-center gap-2 text-sm text-[var(--muted-foreground)]">
+          {statusIcon}
+          <Wrench className="h-3 w-3" />
+          <span
+            className="font-medium"
+            style={{ fontFamily: "var(--font-code)" }}
+          >
+            {name}
+          </span>
+        </div>
+      )}
+    </div>
+  );
+}

examples/integrations/claude-sdk-python/src/components/ui/badge.tsx

@@ -0,0 +1,35 @@
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import type { VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-[var(--primary)] text-[var(--primary-foreground)]",
+        secondary:
+          "border-transparent bg-[var(--secondary)] text-[var(--secondary-foreground)]",
+        outline: "border-[var(--border)] text-[var(--foreground)]",
+      },
+    },
+    defaultVariants: {
+      variant: "secondary",
+    },
+  },
+);
+
+export interface BadgeProps
+  extends
+    React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  );
+}
+
+export { Badge, badgeVariants };

examples/integrations/claude-sdk-python/src/components/ui/button.tsx

@@ -0,0 +1,52 @@
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import type { VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-[var(--radius)] text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)] disabled:pointer-events-none disabled:opacity-50 cursor-pointer",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-[var(--primary)] text-[var(--primary-foreground)] hover:opacity-90",
+        secondary:
+          "bg-[var(--secondary)] text-[var(--secondary-foreground)] hover:opacity-80",
+        outline:
+          "border border-[var(--border)] bg-[var(--background)] hover:bg-[var(--secondary)]",
+        ghost:
+          "hover:bg-[var(--secondary)] hover:text-[var(--secondary-foreground)]",
+        destructive:
+          "bg-[var(--destructive)] text-[var(--destructive-foreground)] hover:opacity-90",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-6",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+export interface ButtonProps
+  extends
+    React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, ...props }, ref) => (
+    <button
+      className={cn(buttonVariants({ variant, size, className }))}
+      ref={ref}
+      {...props}
+    />
+  ),
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };

examples/integrations/claude-sdk-python/src/components/ui/card.tsx

@@ -0,0 +1,85 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-[var(--radius)] border border-[var(--border)] bg-[var(--card)] text-[var(--card-foreground)] shadow-sm",
+      className,
+    )}
+    {...props}
+  />
+));
+Card.displayName = "Card";
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+));
+CardHeader.displayName = "CardHeader";
+
+const CardTitle = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className,
+    )}
+    {...props}
+  />
+));
+CardTitle.displayName = "CardTitle";
+
+const CardDescription = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm text-[var(--muted-foreground)]", className)}
+    {...props}
+  />
+));
+CardDescription.displayName = "CardDescription";
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+));
+CardContent.displayName = "CardContent";
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+));
+CardFooter.displayName = "CardFooter";
+
+export {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+};

examples/integrations/claude-sdk-python/src/components/ui/checkbox.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { Check } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+const Checkbox = React.forwardRef<
+  React.ComponentRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-5 w-5 shrink-0 rounded-md border border-[var(--border)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)] disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-[var(--primary)] data-[state=checked]:text-[var(--primary-foreground)] data-[state=checked]:border-transparent cursor-pointer transition-colors",
+      className,
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator className="flex items-center justify-center text-current">
+      <Check className="h-3.5 w-3.5" strokeWidth={3} />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+
+export { Checkbox };

examples/integrations/claude-sdk-python/src/components/ui/input.tsx

@@ -0,0 +1,19 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
+  ({ className, type, ...props }, ref) => (
+    <input
+      type={type}
+      className={cn(
+        "flex h-9 w-full rounded-[var(--radius)] border border-[var(--input)] bg-transparent px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-[var(--muted-foreground)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)] disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      ref={ref}
+      {...props}
+    />
+  ),
+);
+Input.displayName = "Input";
+
+export { Input };

examples/integrations/claude-sdk-python/src/components/ui/separator.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import * as React from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import { cn } from "@/lib/utils";
+
+const Separator = React.forwardRef<
+  React.ComponentRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = "horizontal", decorative = true, ...props },
+    ref,
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-[var(--border)]",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+
+export { Separator };

examples/integrations/claude-sdk-python/src/components/ui/spinner.tsx

@@ -0,0 +1,24 @@
+import { cn } from "@/lib/utils";
+
+interface SpinnerProps {
+  className?: string;
+  size?: "sm" | "md" | "lg";
+}
+
+const sizeMap = {
+  sm: "h-4 w-4 border-2",
+  md: "h-6 w-6 border-2",
+  lg: "h-8 w-8 border-[3px]",
+};
+
+export function Spinner({ className, size = "md" }: SpinnerProps) {
+  return (
+    <span
+      className={cn(
+        "inline-block rounded-full border-[var(--muted)] border-t-[var(--primary)] animate-spin",
+        sizeMap[size],
+        className,
+      )}
+    />
+  );
+}

examples/integrations/claude-sdk-python/src/hooks/index.ts

@@ -0,0 +1,3 @@
+export * from "./use-example-suggestions";
+export * from "./use-generative-ui-examples";
+export * from "./use-theme";

examples/integrations/claude-sdk-python/src/hooks/use-example-suggestions.tsx

@@ -0,0 +1,69 @@
+/**
+ * Suggestion pills shown in the chat UI. Each suggestion triggers a specific
+ * demo feature when clicked.
+ *
+ * Ordered from most constrained (fixed UI) to most open (freeform UI).
+ *
+ * Showcase mode (showcase.json) controls which pills are visually highlighted.
+ * Highlight styling: globals.css (.a2ui-highlight, .opengenui-highlight)
+ * A2UI agent tools: agent/src/a2ui_fixed_schema.py, a2ui_dynamic_schema.py
+ * A2UI catalog: src/app/declarative-generative-ui/
+ */
+import { useConfigureSuggestions } from "@copilotkit/react-core/v2";
+import showcaseConfig from "../../showcase.json";
+
+const showcase = showcaseConfig.showcase;
+
+export const useExampleSuggestions = () => {
+  useConfigureSuggestions({
+    suggestions: [
+      {
+        title: "Pie Chart (Controlled Generative UI)",
+        message:
+          "Show me a pie chart of our revenue distribution by category. Use the query_data tool to fetch the data first, then render it with the pieChart component.",
+      },
+      {
+        title: "Bar Chart (Controlled Generative UI)",
+        message:
+          "Show me a bar chart of our expenses by category. Use the query_data tool to fetch the data first, then render it with the barChart component.",
+      },
+      {
+        title: "Schedule Meeting (Human In The Loop)",
+        message:
+          "I'd like to schedule a 30-minute meeting to learn about CopilotKit. Please use the scheduleTime tool to let me pick a time.",
+      },
+      {
+        title: "Search Flights (A2UI Fixed Schema)",
+        message: "Find flights from SFO to JFK for next Tuesday.",
+        className: showcase === "a2ui" ? "a2ui-highlight" : undefined,
+      },
+      {
+        title: "Sales Dashboard (A2UI Dynamic)",
+        message:
+          "First use the query_data tool to fetch the financial sales data, then using A2UI, show me a sales dashboard with total revenue, new customers, and conversion rate metrics. Include a pie chart of revenue by category and a bar chart of monthly sales.",
+        className: showcase === "a2ui" ? "a2ui-highlight" : undefined,
+      },
+      {
+        title: "Excalidraw Diagram (MCP App)",
+        message:
+          "Use Excalidraw to create a simple network diagram showing a router connected to two switches, each connected to two computers.",
+      },
+      {
+        title: "Calculator App (Open Generative UI)",
+        message:
+          "Using the generateSandboxedUi tool, build a modern calculator with standard buttons plus labeled metric shortcut buttons that insert their values into the display when clicked. Use sample company data.",
+        className: showcase === "opengenui" ? "opengenui-highlight" : undefined,
+      },
+      {
+        title: "Toggle Theme (Frontend Tools)",
+        message: "Toggle the app theme using the toggleTheme tool.",
+      },
+      {
+        title: "Task Manager (Shared State)",
+        message:
+          "Enable app mode and add three todos about learning CopilotKit: one about reading the docs, one about building a prototype, and one about exploring agent state.",
+      },
+    ],
+    available: "always",
+  });
+};

examples/integrations/claude-sdk-python/src/hooks/use-generative-ui-examples.tsx

@@ -0,0 +1,83 @@
+import { z } from "zod";
+import { useTheme } from "@/hooks/use-theme";
+
+import {
+  useComponent,
+  useFrontendTool,
+  useHumanInTheLoop,
+  useDefaultRenderTool,
+} from "@copilotkit/react-core/v2";
+
+import {
+  PieChart,
+  PieChartProps,
+} from "@/components/generative-ui/charts/pie-chart";
+import {
+  BarChart,
+  BarChartProps,
+} from "@/components/generative-ui/charts/bar-chart";
+import { MeetingTimePicker } from "@/components/generative-ui/meeting-time-picker";
+import { ToolReasoning } from "@/components/tool-rendering";
+
+export const useGenerativeUIExamples = () => {
+  const { theme, setTheme } = useTheme();
+
+  // Human-in-the-Loop (frontend tool requiring user decision)
+  useHumanInTheLoop({
+    name: "scheduleTime",
+    description: "Use human-in-the-loop to schedule a meeting with the user.",
+    parameters: z.object({
+      reasonForScheduling: z
+        .string()
+        .describe("Reason for scheduling, very brief - 5 words."),
+      meetingDuration: z
+        .number()
+        .describe("Duration of the meeting in minutes"),
+    }),
+    render: ({ respond, status, args }) => {
+      return <MeetingTimePicker status={status} respond={respond} {...args} />;
+    },
+  });
+
+  // Controlled Generative UI (frontend-defined chart components)
+  useComponent({
+    name: "pieChart",
+    description: "Controlled Generative UI that displays data as a pie chart.",
+    parameters: PieChartProps,
+    render: PieChart,
+  });
+
+  useComponent({
+    name: "barChart",
+    description: "Controlled Generative UI that displays data as a bar chart.",
+    parameters: BarChartProps,
+    render: BarChart,
+  });
+
+  // Default Tool Rendering (backend tool UI)
+  const ignoredTools = [
+    "render_a2ui", // Rendered by A2UI streaming, not as a tool card
+    "generate_a2ui", // Legacy: rendered by A2UI, not as a tool card
+    "log_a2ui_event", // Internal A2UI event tracker
+  ];
+  useDefaultRenderTool({
+    render: ({ name, status, parameters }) => {
+      if (ignoredTools.includes(name)) return <></>;
+      return <ToolReasoning name={name} status={status} args={parameters} />;
+    },
+  });
+
+  // Frontend Tools (direct frontend state manipulation)
+  useFrontendTool(
+    {
+      name: "toggleTheme",
+      description: "Frontend tool for toggling the theme of the app.",
+      parameters: z.object({}),
+      handler: async () => {
+        const isDark = document.documentElement.classList.contains("dark");
+        setTheme(isDark ? "light" : "dark");
+      },
+    },
+    [theme, setTheme],
+  );
+};

examples/integrations/claude-sdk-python/src/hooks/use-theme.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import { createContext, useContext, useEffect, useState } from "react";
+
+type Theme = "dark" | "light" | "system";
+
+const ThemeContext = createContext<{
+  theme: Theme;
+  setTheme: (t: Theme) => void;
+}>({
+  theme: "system",
+  setTheme: () => {},
+});
+
+export function ThemeProvider({ children }: { children: React.ReactNode }) {
+  const [theme, setTheme] = useState<Theme>("system");
+
+  useEffect(() => {
+    const root = document.documentElement;
+    root.classList.remove("light", "dark");
+
+    if (theme === "system") {
+      const mq = window.matchMedia("(prefers-color-scheme: dark)");
+      const apply = () => {
+        root.classList.remove("light", "dark");
+        root.classList.add(mq.matches ? "dark" : "light");
+      };
+      apply();
+      mq.addEventListener("change", apply);
+      return () => mq.removeEventListener("change", apply);
+    }
+
+    root.classList.add(theme);
+  }, [theme]);
+
+  return (
+    <ThemeContext.Provider value={{ theme, setTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}
+
+export const useTheme = () => useContext(ThemeContext);

examples/integrations/claude-sdk-python/src/lib/a2ui-theme.css

@@ -0,0 +1,162 @@
+:root {
+  --n-100: #ffffff;
+  --n-99: #fcfcfc;
+  --n-98: #f9f9f9;
+  --n-95: #f1f1f1;
+  --n-90: #e2e2e2;
+  --n-80: #c6c6c6;
+  --n-70: #ababab;
+  --n-60: #919191;
+  --n-50: #777777;
+  --n-40: #5e5e5e;
+  --n-35: #525252;
+  --n-30: #474747;
+  --n-25: #3b3b3b;
+  --n-20: #303030;
+  --n-15: #262626;
+  --n-10: #1b1b1b;
+  --n-5: #111111;
+  --n-0: #000000;
+
+  --p-100: #ffffff;
+  --p-99: #fffbff;
+  --p-98: #fcf8ff;
+  --p-95: #f2efff;
+  --p-90: #e1e0ff;
+  --p-80: #c0c1ff;
+  --p-70: #a0a3ff;
+  --p-60: #8487ea;
+  --p-50: #6a6dcd;
+  --p-40: #5154b3;
+  --p-35: #4447a6;
+  --p-30: #383b99;
+  --p-25: #2c2e8d;
+  --p-20: #202182;
+  --p-15: #131178;
+  --p-10: #06006c;
+  --p-5: #03004d;
+  --p-0: #000000;
+
+  --s-100: #ffffff;
+  --s-99: #fffbff;
+  --s-98: #fcf8ff;
+  --s-95: #f2efff;
+  --s-90: #e2e0f9;
+  --s-80: #c6c4dd;
+  --s-70: #aaa9c1;
+  --s-60: #8f8fa5;
+  --s-50: #75758b;
+  --s-40: #5d5c72;
+  --s-35: #515165;
+  --s-30: #454559;
+  --s-25: #393a4d;
+  --s-20: #2e2f42;
+  --s-15: #242437;
+  --s-10: #191a2c;
+  --s-5: #0f0f21;
+  --s-0: #000000;
+
+  --t-100: #ffffff;
+  --t-99: #fffbff;
+  --t-98: #fff8f9;
+  --t-95: #ffecf4;
+  --t-90: #ffd8ec;
+  --t-80: #e9b9d3;
+  --t-70: #cc9eb8;
+  --t-60: #af849d;
+  --t-50: #946b83;
+  --t-40: #79536a;
+  --t-35: #6c475d;
+  --t-30: #5f3c51;
+  --t-25: #523146;
+  --t-20: #46263a;
+  --t-15: #3a1b2f;
+  --t-10: #2e1125;
+  --t-5: #22071a;
+  --t-0: #000000;
+
+  --nv-100: #ffffff;
+  --nv-99: #fffbff;
+  --nv-98: #fcf8ff;
+  --nv-95: #f2effa;
+  --nv-90: #e4e1ec;
+  --nv-80: #c8c5d0;
+  --nv-70: #acaab4;
+  --nv-60: #918f9a;
+  --nv-50: #777680;
+  --nv-40: #5e5d67;
+  --nv-35: #52515b;
+  --nv-30: #46464f;
+  --nv-25: #3b3b43;
+  --nv-20: #303038;
+  --nv-15: #25252d;
+  --nv-10: #1b1b23;
+  --nv-5: #101018;
+  --nv-0: #000000;
+
+  --e-100: #ffffff;
+  --e-99: #fffbff;
+  --e-98: #fff8f7;
+  --e-95: #ffedea;
+  --e-90: #ffdad6;
+  --e-80: #ffb4ab;
+  --e-70: #ff897d;
+  --e-60: #ff5449;
+  --e-50: #de3730;
+  --e-40: #ba1a1a;
+  --e-35: #a80710;
+  --e-30: #93000a;
+  --e-25: #7e0007;
+  --e-20: #690005;
+  --e-15: #540003;
+  --e-10: #410002;
+  --e-5: #2d0001;
+  --e-0: #000000;
+
+  --primary: #137fec;
+  --text-color: #fff;
+  --background-light: #f6f7f8;
+  --background-dark: #101922;
+  --border-color: oklch(
+    from var(--background-light) l c h / calc(alpha * 0.15)
+  );
+  --elevated-background-light: oklch(
+    from var(--background-light) l c h / calc(alpha * 0.05)
+  );
+  --bb-grid-size: 4px;
+  --bb-grid-size-2: calc(var(--bb-grid-size) * 2);
+  --bb-grid-size-3: calc(var(--bb-grid-size) * 3);
+  --bb-grid-size-4: calc(var(--bb-grid-size) * 4);
+  --bb-grid-size-5: calc(var(--bb-grid-size) * 5);
+  --bb-grid-size-6: calc(var(--bb-grid-size) * 6);
+  --bb-grid-size-7: calc(var(--bb-grid-size) * 7);
+  --bb-grid-size-8: calc(var(--bb-grid-size) * 8);
+  --bb-grid-size-9: calc(var(--bb-grid-size) * 9);
+  --bb-grid-size-10: calc(var(--bb-grid-size) * 10);
+  --bb-grid-size-11: calc(var(--bb-grid-size) * 11);
+  --bb-grid-size-12: calc(var(--bb-grid-size) * 12);
+  --bb-grid-size-13: calc(var(--bb-grid-size) * 13);
+  --bb-grid-size-14: calc(var(--bb-grid-size) * 14);
+  --bb-grid-size-15: calc(var(--bb-grid-size) * 15);
+  --bb-grid-size-16: calc(var(--bb-grid-size) * 16);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  --font-family: "Google Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  --font-family-flex:
+    "Google Sans Flex", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  --font-family-mono:
+    "Google Sans Code", "Helvetica Neue", Helvetica, Arial, sans-serif;
+
+  background: var(--background-light);
+  font-family: var(--font-family);
+  margin: 0;
+  padding: 0;
+  width: 100svw;
+  height: 100svh;
+}

examples/integrations/claude-sdk-python/src/lib/utils.ts

@@ -0,0 +1,7 @@
+import { clsx } from "clsx";
+import type { ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}