fix(showcase): switch langgraph-python gen-ui-agent to v2 useAgent

The langgraph-python gen-ui-agent demo was the only one of 18
integrations using the V1 `useCoAgentStateRender` hook. That hook
binds renders to messages via per-message claims, so each
state-changing tool call (each `set_steps` invocation) produced its
own card snapshot in the chat — a typical 3-step plan run pushed
~7+ stacked cards instead of one updating card.

Migrate the page to the canonical V2 pattern already used by every
other gen-ui-agent demo (mastra, strands, ag2, agno, crewai-crews,
langgraph-typescript, pydantic-ai, ...): subscribe to live state via
`useAgent` and render a single `InlineAgentStateCard` inside
`messageView.children`. The card now re-renders in place as state
streams — no per-message claims, no duplicates.

Also tighten the agent system prompt with an explicit numbered tool
sequence (1 plan + 6 transitions + final message) to make the
"step 3 stuck in_progress" tail-of-run failure less likely with
gpt-4o-mini. The UI is robust to a missed final transition either
way: when `agent.isRunning` flips to false, the card headlines
"All N steps complete" regardless of step.status.

Replace the stale e2e spec (which targeted a long-removed
`task-progress` test id) with one that pins the contract:
- exactly one `agent-state-card` rendered, even after the run
  finishes
- every `agent-step` ends in `data-status="completed"`

Author: AlemTuzlak

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

@@ -59,14 +59,24 @@ class _GenUiStateMiddleware(AgentMiddleware):
 
 
 SYSTEM_PROMPT = (
-    "You are an agentic planner. For each user request: (1) plan exactly 3 "
-    "concrete steps and call `set_steps` ONCE to publish them all with "
-    "status=pending; (2) for each step in order: call `set_steps` with that "
-    "step flipped to in_progress (all others unchanged); briefly simulate the "
-    "work; then call `set_steps` with that step flipped to completed. Finally "
-    "respond conversationally. Never call set_steps in parallel - always wait "
-    "for one call to return before the next. Do NOT use write_todos - use "
-    "set_steps only."
+    "You are an agentic planner. For each user request, follow this exact "
+    "sequence:\n"
+    "1. Plan exactly 3 concrete steps and call `set_steps` ONCE with all "
+    "three steps at status=\"pending\".\n"
+    "2. Step 1: call `set_steps` with step 1 at status=\"in_progress\", "
+    "then call `set_steps` again with step 1 at status=\"completed\".\n"
+    "3. Step 2: call `set_steps` with step 2 at status=\"in_progress\", "
+    "then call `set_steps` again with step 2 at status=\"completed\".\n"
+    "4. Step 3: call `set_steps` with step 3 at status=\"in_progress\", "
+    "then call `set_steps` again with step 3 at status=\"completed\".\n"
+    "5. Send ONE final conversational assistant message summarizing the "
+    "plan, then stop. Do not call any more tools after step 3 is "
+    "completed.\n"
+    "\n"
+    "Rules: never call set_steps in parallel — always wait for one call to "
+    "return before the next. Do NOT use write_todos — use set_steps only. "
+    "After all three steps are completed you MUST send a final assistant "
+    "message and terminate."
 )
 
 graph = create_deep_agent(

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

@@ -1,27 +1,33 @@
 "use client";
 
 import React from "react";
-// v1 CopilotKit provider enables the v1 `useCoAgentStateRender` hook.
-// Under the hood it also wraps the v2 provider, so v2 components such as
-// `<CopilotChat />` and `useConfigureSuggestions` still work inside it.
-import { CopilotKit, useCoAgentStateRender } from "@copilotkit/react-core";
+import { CopilotKit } from "@copilotkit/react-core";
 import {
   CopilotChat,
+  useAgent,
+  UseAgentUpdate,
   useConfigureSuggestions,
 } from "@copilotkit/react-core/v2";
-import { InlineAgentStateCard, type Step } from "./InlineAgentStateCard";
+import { InlineAgentStateCard } from "./InlineAgentStateCard";
+import type { Step } from "./InlineAgentStateCard";
 
 /**
- * Agentic Generative UI — v1 In-Chat State Rendering
+ * Agentic Generative UI — In-Chat State Rendering
  *
- * A minimal deep agent defines its OWN state schema (`steps: list[Step]`) on
- * the backend and exposes a custom `set_steps` tool that the model calls to
- * mutate that state. Every `set_steps` call streams the updated `steps` to
- * the client. The v1 `useCoAgentStateRender` hook subscribes to that state
- * and renders an inline progress tracker inside the chat transcript — no
- * `messageView` plumbing, no manual `useAgent` subscription.
+ * The deep agent on the backend defines its own state schema
+ * (`steps: list[Step]`) and exposes a custom `set_steps` tool that the model
+ * calls to mutate that state. Every `set_steps` call streams the updated
+ * `steps` to the client.
  *
- * Reference: https://docs.copilotkit.ai/reference/v1/hooks/useCoAgentStateRender
+ * On the client we subscribe to that live state via `useAgent` (v2) and
+ * render a single `InlineAgentStateCard` inside the chat transcript via
+ * `messageView.children`. The card re-renders in place as state arrives —
+ * no per-message claims, no duplicate cards.
+ *
+ * This mirrors the pattern used by every other integration's gen-ui-agent
+ * demo (mastra, strands, ag2, agno, crewai-crews, langgraph-typescript,
+ * pydantic-ai, ...) and replaces the earlier `useCoAgentStateRender`
+ * approach which produced one card per state-changing message.
  */
 export default function GenUiAgentDemo() {
   return (
@@ -35,13 +41,16 @@ export default function GenUiAgentDemo() {
   );
 }
 
-// State shape mirrors the deep agent's explicit `steps` field, declared in
-// `GenUiAgentState` on the backend and mutated by the custom `set_steps` tool.
 type AgentState = {
   steps?: Step[];
 };
 
 function Chat() {
+  const { agent } = useAgent({
+    agentId: "gen-ui-agent",
+    updates: [UseAgentUpdate.OnStateChanged],
+  });
+
   useConfigureSuggestions({
     suggestions: [
       {
@@ -61,21 +70,24 @@ function Chat() {
     available: "always",
   });
 
-  // @region[use-coagent-state-render]
-  // Subscribe to the deep agent's `steps` state. The custom `set_steps` tool
-  // updates it every time the model advances a step, streaming each
-  // transition to the UI where this `render` callback re-runs with the
-  // fresh state and an updated `status` ("inProgress" while the agent is
-  // running, "complete" when done).
-  useCoAgentStateRender<AgentState>({
-    name: "gen-ui-agent",
-    render: ({ state, status }) => {
-      const steps = state?.steps ?? [];
-      if (steps.length === 0) return null;
-      return <InlineAgentStateCard steps={steps} status={status} />;
-    },
-  });
-  // @endregion[use-coagent-state-render]
+  const steps = (agent.state as AgentState | undefined)?.steps ?? [];
+  const status = agent.isRunning ? "inProgress" : "complete";
 
-  return <CopilotChat agentId="gen-ui-agent" className="h-full rounded-2xl" />;
+  return (
+    <CopilotChat
+      agentId="gen-ui-agent"
+      className="h-full rounded-2xl"
+      messageView={{
+        children: ({ messageElements, interruptElement }) => (
+          <div data-testid="copilot-message-list" className="flex flex-col">
+            {messageElements}
+            {steps.length > 0 && (
+              <InlineAgentStateCard steps={steps} status={status} />
+            )}
+            {interruptElement}
+          </div>
+        ),
+      }}
+    />
+  );
 }

showcase/integrations/langgraph-python/tests/e2e/gen-ui-agent.spec.ts

@@ -20,44 +20,62 @@ test.describe("Agentic Generative UI", () => {
   });
 
   test("message list container exists", async ({ page }) => {
-    // The custom messageView renders a container with data-testid
     await expect(
       page.locator('[data-testid="copilot-message-list"]'),
     ).toBeVisible({ timeout: 10000 });
   });
 
-  test("complex task triggers task progress tracker", async ({ page }) => {
+  // Regression: every set_steps tool call used to push a brand-new card into
+  // the chat (one card per state-changing message), so a 7-call run produced
+  // 7+ stacked duplicate cards. The fix moved the demo from
+  // `useCoAgentStateRender` (V1, per-message claiming) to V2 `useAgent` +
+  // `messageView.children`, which renders a single live-updating card. This
+  // test pins that contract — one card, regardless of how many state updates
+  // arrive during the run.
+  test("renders a single agent-state-card that updates in place", async ({
+    page,
+  }) => {
     const input = page.getByPlaceholder("Type a message");
-    await input.fill(
-      "Create a comprehensive dashboard showing sales metrics, revenue trends, and customer segments",
-    );
+    await input.fill("Plan a product launch for a new mobile app.");
     await input.press("Enter");
 
-    // The TaskProgress component should appear when the agent reports steps
-    const taskProgress = page.locator('[data-testid="task-progress"]');
-    await expect(taskProgress).toBeVisible({ timeout: 60000 });
-
-    // Should show a "Task Progress" heading
-    await expect(taskProgress.getByText("Task Progress")).toBeVisible();
+    const card = page.locator('[data-testid="agent-state-card"]');
+    await expect(card).toBeVisible({ timeout: 60000 });
 
-    // Should show a completion counter like "X/Y Complete"
-    await expect(taskProgress.getByText(/\d+\/\d+\s*Complete/)).toBeVisible();
+    // Wait for at least one step to be published, then assert there is still
+    // only one card (not one per state update).
+    await expect(
+      page.locator('[data-testid="agent-step"]').first(),
+    ).toBeVisible({ timeout: 60000 });
+    await expect(card).toHaveCount(1);
 
-    // Step descriptions should be visible
-    const stepTexts = page.locator('[data-testid="task-step-text"]');
-    await expect(stepTexts.first()).toBeVisible({ timeout: 5000 });
+    // Wait until the agent finishes the run, then re-assert single card.
+    // `agent.isRunning` flips to false → the card's spinner becomes a check.
+    await expect(card.locator(".animate-spin")).toHaveCount(0, {
+      timeout: 120000,
+    });
+    await expect(card).toHaveCount(1);
   });
 
-  test("task progress shows progress bar", async ({ page }) => {
+  test("eventually marks every step as completed", async ({ page }) => {
     const input = page.getByPlaceholder("Type a message");
-    await input.fill("Build a report analyzing quarterly performance data");
+    await input.fill("Plan a product launch for a new mobile app.");
     await input.press("Enter");
 
-    const taskProgress = page.locator('[data-testid="task-progress"]');
-    await expect(taskProgress).toBeVisible({ timeout: 60000 });
+    // Wait for the run to settle (no in-progress markers anywhere on the page).
+    await expect(
+      page.locator('[data-testid="agent-step"][data-status="in_progress"]'),
+    ).toHaveCount(0, { timeout: 120000 });
+
+    const steps = page.locator('[data-testid="agent-step"]');
+    const total = await steps.count();
+    expect(total).toBeGreaterThan(0);
 
-    // The progress bar is a rounded-full div inside the tracker
-    const progressBar = taskProgress.locator(".rounded-full").first();
-    await expect(progressBar).toBeVisible();
+    // Every step must end in `completed` — guards against the "step 3 stuck"
+    // regression where the agent terminated without flipping the last step.
+    const completed = page.locator(
+      '[data-testid="agent-step"][data-status="completed"]',
+    );
+    await expect(completed).toHaveCount(total);
   });
 });