agno

Author: maxkorp

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/src/agents.ts

@@ -265,6 +265,9 @@ export const agentsIntegrations: AgentIntegrationConfig[] = [
         tool_based_generative_ui: new AgnoAgent({
           url: `${envVars.agnoUrl}/tool_based_generative_ui/agui`,
         }),
+        backend_tool_rendering: new AgnoAgent({
+          url: `${envVars.agnoUrl}/backend_tool_rendering/agui`,
+        }),
       };
     },
   },

typescript-sdk/apps/dojo/src/app/[integrationId]/feature/backend_tool_rendering/page.tsx

@@ -31,7 +31,6 @@ const Chat = () => {
     available: "disabled",
     parameters: [{ name: "location", type: "string", required: true }],
     render: ({ args, result, status }) => {
-      console.log(result, args);
       if (status !== "complete") {
         return (
           <div className=" bg-[#667eea] text-white p-4 rounded-lg max-w-md">

typescript-sdk/apps/dojo/src/files.json

@@ -10,6 +10,7 @@ readme = "README.md"
 requires-python = ">=3.12,<4.0"
 dependencies = [
     "agno>=1.7.7",
+    "httpx>=0.27.0",
     "openai>=1.99.1",
     "yfinance>=0.2.63",
     "fastapi>=0.116.1",
@@ -23,4 +24,4 @@ authors = [
 
 
 [project.scripts]
-dev = "server:main"
+dev = "server:main"

typescript-sdk/integrations/agno/examples/pyproject.toml

@@ -16,11 +16,13 @@
 from .api import (
     agentic_chat_app,
     tool_based_generative_ui_app,
+    backend_tool_rendering_app,
 )
 
 app = FastAPI(title='Agno AG-UI server')
 app.mount('/agentic_chat', agentic_chat_app, 'Agentic Chat')
 app.mount('/tool_based_generative_ui', tool_based_generative_ui_app, 'Tool-based Generative UI')
+app.mount('/backend_tool_rendering', backend_tool_rendering_app, 'Backend Tool Rendering')
 
 def main():
     """Main function to start the FastAPI server."""

typescript-sdk/integrations/agno/examples/server/__init__.py

@@ -4,8 +4,10 @@
 
 from .agentic_chat import app as agentic_chat_app
 from .tool_based_generative_ui import app as tool_based_generative_ui_app
+from .backend_tool_rendering import app as backend_tool_rendering_app
 
 __all__ = [
     'agentic_chat_app',
     'tool_based_generative_ui_app',
-]
+    'backend_tool_rendering_app',
+]

typescript-sdk/integrations/agno/examples/server/api/__init__.py

@@ -0,0 +1,134 @@
+"""Example: Agno Agent with Finance tools
+
+This example shows how to create an Agno Agent with tools (YFinanceTools) and expose it in an AG-UI compatible way.
+"""
+
+from agno.agent.agent import Agent
+from agno.app.agui.app import AGUIApp
+from agno.models.openai import OpenAIChat
+from agno.tools.yfinance import YFinanceTools
+from agno.tools import tool
+import httpx
+import json
+
+
+def get_weather_condition(code: int) -> str:
+    """Map weather code to human-readable condition.
+
+    Args:
+        code: WMO weather code.
+
+    Returns:
+        Human-readable weather condition string.
+    """
+    conditions = {
+        0: "Clear sky",
+        1: "Mainly clear",
+        2: "Partly cloudy",
+        3: "Overcast",
+        45: "Foggy",
+        48: "Depositing rime fog",
+        51: "Light drizzle",
+        53: "Moderate drizzle",
+        55: "Dense drizzle",
+        56: "Light freezing drizzle",
+        57: "Dense freezing drizzle",
+        61: "Slight rain",
+        63: "Moderate rain",
+        65: "Heavy rain",
+        66: "Light freezing rain",
+        67: "Heavy freezing rain",
+        71: "Slight snow fall",
+        73: "Moderate snow fall",
+        75: "Heavy snow fall",
+        77: "Snow grains",
+        80: "Slight rain showers",
+        81: "Moderate rain showers",
+        82: "Violent rain showers",
+        85: "Slight snow showers",
+        86: "Heavy snow showers",
+        95: "Thunderstorm",
+        96: "Thunderstorm with slight hail",
+        99: "Thunderstorm with heavy hail",
+    }
+    return conditions.get(code, "Unknown")
+
+
+@tool(external_execution=False)
+async def get_weather(location: str) -> str:
+    """Get current weather for a location.
+
+    Args:
+        location: City name.
+
+    Returns:
+        A json string with weather information including temperature, feels like,
+        humidity, wind speed, wind gust, conditions, and location name.
+    """
+    async with httpx.AsyncClient() as client:
+        # Geocode the location
+        geocoding_url = (
+            f"https://geocoding-api.open-meteo.com/v1/search?name={location}&count=1"
+        )
+        geocoding_response = await client.get(geocoding_url)
+        geocoding_data = geocoding_response.json()
+
+        if not geocoding_data.get("results"):
+            raise ValueError(f"Location '{location}' not found")
+
+        result = geocoding_data["results"][0]
+        latitude = result["latitude"]
+        longitude = result["longitude"]
+        name = result["name"]
+
+        # Get weather data
+        weather_url = (
+            f"https://api.open-meteo.com/v1/forecast?"
+            f"latitude={latitude}&longitude={longitude}"
+            f"&current=temperature_2m,apparent_temperature,relative_humidity_2m,"
+            f"wind_speed_10m,wind_gusts_10m,weather_code"
+        )
+        weather_response = await client.get(weather_url)
+        weather_data = weather_response.json()
+
+        current = weather_data["current"]
+
+        return json.dumps(
+            {
+                "temperature": current["temperature_2m"],
+                "feelsLike": current["apparent_temperature"],
+                "humidity": current["relative_humidity_2m"],
+                "windSpeed": current["wind_speed_10m"],
+                "windGust": current["wind_gusts_10m"],
+                "conditions": get_weather_condition(current["weather_code"]),
+                "location": name,
+            }
+        )
+
+
+agent = Agent(
+    model=OpenAIChat(id="gpt-4o"),
+    tools=[
+        get_weather,
+    ],
+    description="You are a helpful weather assistant that provides accurate weather information.",
+    instructions="""
+    Your primary function is to help users get weather details for specific locations. When responding:
+    - Always ask for a location if none is provided
+    - If the location name isn’t in English, please translate it
+    - If giving a location with multiple parts (e.g. "New York, NY"), use the most relevant part (e.g. "New York")
+    - Include relevant details like humidity, wind conditions, and precipitation
+    - Keep responses concise but informative
+
+    Use the get_weather tool to fetch current weather data.
+  """,
+)
+
+agui_app = AGUIApp(
+    agent=agent,
+    name="Weather Agent",
+    app_id="backend_tool_rendering",
+    description="A helpful weather assistant that provides accurate weather information.",
+)
+
+app = agui_app.get_app()