feat(dojo): add backend tool rendering example (#490)

* refactor(dojo): add suggestions, improve styling, simplify code

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

* feat(dojo): add backend_tool_rendering feature

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

* ignore test-results folder

* Add pydantic test

* fix copypasta re mastra vs mastraAgentLocal

* fix prompt for pydantic

* add llamaindex

* fix rendering

* fix typo in prompts

* fix(e2e): server-starter-all backend tool tests

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

* test(dojo): add langgraph backend tool rendering tests

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

* chore(dojo): use create_react_agent in LangGraph backend_tool_rendering

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

* ADK

* agno

* generated files

* fix langgraph tool to match example

* Fix test name copypasta

---------

Signed-off-by: Tyler Slaton <[email protected]>
Co-authored-by: Max Korp <[email protected]>

Author: tylerslaton

.gitignore

@@ -1,5 +1,7 @@
 **/.claude/settings.local.json
 .vscode/
 .idea/
+mastra.db*
 
 .DS_Store
+test-results/

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

@@ -0,0 +1,54 @@
+import { test, expect } from "@playwright/test";
+
+test("[ADK Middleware] Backend Tool Rendering displays weather cards", async ({ page }) => {
+  // Set shorter default timeout for this test
+  test.setTimeout(30000); // 30 seconds total
+
+  await page.goto("/adk-middleware/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/agnoTests/backendToolRenderingPage.spec.ts

@@ -0,0 +1,54 @@
+import { test, expect } from "@playwright/test";
+
+test("[Agno] Backend Tool Rendering displays weather cards", async ({ page }) => {
+  // Set shorter default timeout for this test
+  test.setTimeout(30000); // 30 seconds total
+
+  await page.goto("/agno/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/langgraphFastAPITests/backendToolRenderingPage.spec.ts

@@ -0,0 +1,54 @@
+import { test, expect } from "@playwright/test";
+
+test("[LanggraphFastAPI] 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("[LanggraphPython] 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/apps/dojo/e2e/tests/llamaIndexTests/backendToolRenderingPage.spec.ts

@@ -0,0 +1,54 @@
+import { test, expect } from "@playwright/test";
+
+test("[LlamaIndex] Backend Tool Rendering displays weather cards", async ({ page }) => {
+  // Set shorter default timeout for this test
+  test.setTimeout(30000); // 30 seconds total
+
+  await page.goto("/llama-index/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/mastraAgentLocalTests/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("/mastra-agent-local/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/mastraTests/backendToolRenderingPage.spec.ts

@@ -0,0 +1,54 @@
+import { test, expect } from "@playwright/test";
+
+test("[Mastra] Backend Tool Rendering displays weather cards", async ({ page }) => {
+  // Set shorter default timeout for this test
+  test.setTimeout(30000); // 30 seconds total
+
+  await page.goto("/mastra/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);
+});