test(dojo): add langgraph backend tool rendering tests

Signed-off-by: Tyler Slaton <[email protected]>

Author: tylerslaton

typescript-sdk/apps/dojo/e2e/tests/langgraphFastAPITests/backendToolRenderingPage.spec.ts

@@ -0,0 +1,54 @@
+import { test, expect } from "@playwright/test";
+
+test("[MastraAgentLocal] Backend Tool Rendering displays weather cards", async ({ page }) => {
+  // Set shorter default timeout for this test
+  test.setTimeout(30000); // 30 seconds total
+
+  await page.goto("/langgraph-fastapi/feature/backend_tool_rendering");
+
+  // Verify suggestion buttons are visible
+  await expect(page.getByRole("button", { name: "Weather in San Francisco" })).toBeVisible({
+    timeout: 5000,
+  });
+
+  // Click first suggestion and verify weather card appears
+  await page.getByRole("button", { name: "Weather in San Francisco" }).click();
+
+  // Wait for either test ID or fallback to "Current Weather" text
+  const weatherCard = page.getByTestId("weather-card");
+  const currentWeatherText = page.getByText("Current Weather");
+
+  // Try test ID first, fallback to text
+  try {
+    await expect(weatherCard).toBeVisible({ timeout: 10000 });
+  } catch (e) {
+    // Fallback to checking for "Current Weather" text
+    await expect(currentWeatherText.first()).toBeVisible({ timeout: 10000 });
+  }
+
+  // Verify weather content is present (use flexible selectors)
+  const hasHumidity = await page
+    .getByText("Humidity")
+    .isVisible()
+    .catch(() => false);
+  const hasWind = await page
+    .getByText("Wind")
+    .isVisible()
+    .catch(() => false);
+  const hasCityName = await page
+    .locator("h3")
+    .filter({ hasText: /San Francisco/i })
+    .isVisible()
+    .catch(() => false);
+
+  // At least one of these should be true
+  expect(hasHumidity || hasWind || hasCityName).toBeTruthy();
+
+  // Click second suggestion
+  await page.getByRole("button", { name: "Weather in New York" }).click();
+  await page.waitForTimeout(2000);
+
+  // Verify at least one weather-related element is still visible
+  const weatherElements = await page.getByText(/Weather|Humidity|Wind|Temperature/i).count();
+  expect(weatherElements).toBeGreaterThan(0);
+});

typescript-sdk/apps/dojo/e2e/tests/langgraphPythonTests/backendToolRenderingPage.spec.ts

@@ -0,0 +1,54 @@
+import { test, expect } from "@playwright/test";
+
+test("[MastraAgentLocal] Backend Tool Rendering displays weather cards", async ({ page }) => {
+  // Set shorter default timeout for this test
+  test.setTimeout(30000); // 30 seconds total
+
+  await page.goto("/langgraph/feature/backend_tool_rendering");
+
+  // Verify suggestion buttons are visible
+  await expect(page.getByRole("button", { name: "Weather in San Francisco" })).toBeVisible({
+    timeout: 5000,
+  });
+
+  // Click first suggestion and verify weather card appears
+  await page.getByRole("button", { name: "Weather in San Francisco" }).click();
+
+  // Wait for either test ID or fallback to "Current Weather" text
+  const weatherCard = page.getByTestId("weather-card");
+  const currentWeatherText = page.getByText("Current Weather");
+
+  // Try test ID first, fallback to text
+  try {
+    await expect(weatherCard).toBeVisible({ timeout: 10000 });
+  } catch (e) {
+    // Fallback to checking for "Current Weather" text
+    await expect(currentWeatherText.first()).toBeVisible({ timeout: 10000 });
+  }
+
+  // Verify weather content is present (use flexible selectors)
+  const hasHumidity = await page
+    .getByText("Humidity")
+    .isVisible()
+    .catch(() => false);
+  const hasWind = await page
+    .getByText("Wind")
+    .isVisible()
+    .catch(() => false);
+  const hasCityName = await page
+    .locator("h3")
+    .filter({ hasText: /San Francisco/i })
+    .isVisible()
+    .catch(() => false);
+
+  // At least one of these should be true
+  expect(hasHumidity || hasWind || hasCityName).toBeTruthy();
+
+  // Click second suggestion
+  await page.getByRole("button", { name: "Weather in New York" }).click();
+  await page.waitForTimeout(2000);
+
+  // Verify at least one weather-related element is still visible
+  const weatherElements = await page.getByText(/Weather|Humidity|Wind|Temperature/i).count();
+  expect(weatherElements).toBeGreaterThan(0);
+});

typescript-sdk/integrations/langgraph/examples/python/agents/dojo.py

@@ -3,6 +3,7 @@
 from fastapi import FastAPI
 
 from dotenv import load_dotenv
+
 load_dotenv()
 
 os.environ["LANGGRAPH_FAST_API"] = "true"
@@ -15,6 +16,7 @@
 from .agentic_chat.agent import graph as agentic_chat_graph
 from .agentic_generative_ui.agent import graph as agentic_generative_ui_graph
 from .agentic_chat_reasoning.agent import graph as agentic_chat_reasoning_graph
+from .backend_tool_rendering.agent import graph as backend_tool_rendering_graph
 from .subgraphs.agent import graph as subgraphs_graph
 
 app = FastAPI(title="LangGraph Dojo Example Server")
@@ -24,7 +26,12 @@
     "agentic_chat": LangGraphAgent(
         name="agentic_chat",
         description="An example for an agentic chat flow using LangGraph.",
-        graph=agentic_chat_graph
+        graph=agentic_chat_graph,
+    ),
+    "backend_tool_rendering": LangGraphAgent(
+        name="backend_tool_rendering",
+        description="An example for a backend tool rendering flow.",
+        graph=backend_tool_rendering_graph,
     ),
     "tool_based_generative_ui": LangGraphAgent(
         name="tool_based_generative_ui",
@@ -63,60 +70,53 @@
     ),
 }
 
+add_langgraph_fastapi_endpoint(
+    app=app, agent=agents["agentic_chat"], path="/agent/agentic_chat"
+)
+
 add_langgraph_fastapi_endpoint(
     app=app,
-    agent=agents["agentic_chat"],
-    path="/agent/agentic_chat"
+    agent=agents["backend_tool_rendering"],
+    path="/agent/backend_tool_rendering",
 )
 
+
 add_langgraph_fastapi_endpoint(
     app=app,
     agent=agents["tool_based_generative_ui"],
-    path="/agent/tool_based_generative_ui"
+    path="/agent/tool_based_generative_ui",
 )
 
 add_langgraph_fastapi_endpoint(
-    app=app,
-    agent=agents["agentic_generative_ui"],
-    path="/agent/agentic_generative_ui"
+    app=app, agent=agents["agentic_generative_ui"], path="/agent/agentic_generative_ui"
 )
 
 add_langgraph_fastapi_endpoint(
-    app=app,
-    agent=agents["human_in_the_loop"],
-    path="/agent/human_in_the_loop"
+    app=app, agent=agents["human_in_the_loop"], path="/agent/human_in_the_loop"
 )
 
 add_langgraph_fastapi_endpoint(
-    app=app,
-    agent=agents["shared_state"],
-    path="/agent/shared_state"
+    app=app, agent=agents["shared_state"], path="/agent/shared_state"
 )
 
 add_langgraph_fastapi_endpoint(
     app=app,
     agent=agents["predictive_state_updates"],
-    path="/agent/predictive_state_updates"
+    path="/agent/predictive_state_updates",
 )
 
 add_langgraph_fastapi_endpoint(
     app=app,
     agent=agents["agentic_chat_reasoning"],
-    path="/agent/agentic_chat_reasoning"
+    path="/agent/agentic_chat_reasoning",
 )
 
 add_langgraph_fastapi_endpoint(
-    app=app,
-    agent=agents["subgraphs"],
-    path="/agent/subgraphs"
+    app=app, agent=agents["subgraphs"], path="/agent/subgraphs"
 )
 
+
 def main():
     """Run the uvicorn server."""
     port = int(os.getenv("PORT", "8000"))
-    uvicorn.run(
-        "agents.dojo:app",
-        host="0.0.0.0",
-        port=port,
-        reload=True
-    )
+    uvicorn.run("agents.dojo:app", host="0.0.0.0", port=port, reload=True)

typescript-sdk/integrations/langgraph/examples/python/langgraph.json

@@ -4,6 +4,7 @@
   "dependencies": ["."],
   "graphs": {
     "agentic_chat": "./agents/agentic_chat/agent.py:graph",
+    "backend_tool_rendering": "./agents/backend_tool_rendering/agent.py:graph",
     "agentic_generative_ui": "./agents/agentic_generative_ui/agent.py:graph",
     "human_in_the_loop": "./agents/human_in_the_loop/agent.py:graph",
     "predictive_state_updates": "./agents/predictive_state_updates/agent.py:graph",