import { WeatherWidget } from "@/components/tool-ui/weather-widget/runtime"; WeatherWidget renders current conditions and a multi-day forecast with WebGL atmospheric effects, time-of-day scene rendering, and 13 condition codes. **Role:** Information. For displaying data without user input. See [Design Guidelines](/docs/design-guidelines) for how component roles work. ## Getting Started Run this once from your project root. Render `WeatherWidget` in your UI with tool-compatible props.

```tsx import { WeatherWidget } from "@/components/tool-ui/weather-widget/runtime"; export function Example() { return (

Registration tells assistant-ui which component to render when a tool named `get_weather` returns data. Without it, tool results appear as raw JSON. ```tsx "use client"; import { type Toolkit } from "@assistant-ui/react"; import { z } from "zod"; import { WeatherWidget, type WeatherWidgetProps, } from "@/components/tool-ui/weather-widget/runtime"; const WeatherWidgetPayloadSchema = z.object({}).passthrough(); function safeParseWeatherWidgetPayload( input: unknown, ): WeatherWidgetProps | null { const result = WeatherWidgetPayloadSchema.safeParse(input); if ( !result.success || typeof result.data !== "object" || result.data === null ) { return null; } return { version: "3.1", ...(result.data as Omit), }; } export const toolkit: Toolkit = { get_weather: { description: "Display current weather and forecast for a location", parameters: WeatherWidgetPayloadSchema, render: ({ args, toolCallId }) => { const parsedArgs = safeParseWeatherWidgetPayload({ version: "3.1", ...(args as Record), id: args?.id ?? `weather-${toolCallId}`, }); if (!parsedArgs) { return null; } return ; }, }, }; ``` ## Coding Agent Prompt Copy this prompt into your coding agent (Claude Code, Cursor, etc.) and it will wire `WeatherWidget` to whatever weather API you use.

```text Integrate the Tool UI WeatherWidget with a live weather API. Step 1 — Discover the weather API: - Check the codebase for an existing weather API integration (look for API keys, env vars, fetch calls to weather services). - If one exists, use that provider. If not, ask the user which weather API they want to use. Step 2 — Build the adapter: Create a provider adapter module (e.g. weatherAdapter.ts) that: - Fetches current conditions and forecast data from the chosen provider - Maps provider-specific weather codes to WeatherConditionCode with an explicit lookup table and a sensible fallback - Derives localTimeOfDay (0..1) from the location's local time - Returns a validated WeatherWidgetProps payload The payload must match WeatherWidgetProps exactly: - version: "3.1" - id: stable id string - location: { name } - units: { temperature: "celsius" | "fahrenheit" } - current: { temperature, tempMin, tempMax, conditionCode, windSpeed?, precipitationLevel?, visibility? } - forecast: 1–7 items of { label, tempMin, tempMax, conditionCode } - time: { localTimeOfDay } where localTimeOfDay is 0..1 based on location local time - updatedAt: ISO timestamp Valid WeatherConditionCode values: clear | partly-cloudy | cloudy | overcast | fog | drizzle | rain | heavy-rain | thunderstorm | snow | sleet | hail | windy Step 3 — Register the tool: Register a get_weather tool renderer so tool output renders WeatherWidget (not raw JSON). Keep the existing runtime import: import { WeatherWidget } from "@/components/tool-ui/weather-widget/runtime"; Additional requirements: - Add lightweight runtime validation before rendering (zod safeParse + fallback behavior). - Keep all API keys/secrets server-side only. - Add tests for condition code mapping and payload shape. ```

## Key Features 13 condition codes because someone had to distinguish sleet from hail City name, current temperature, and today's high/low range Celsius or Fahrenheit via a single config flag 1 to 7 day forecasts with daily highs, lows, and condition icons ## Props ### CurrentWeather ### ForecastDay ### WeatherConditionCode Available condition values with their corresponding icons: | Condition | Icon | Description | | --------------- | -------------- | -------------- | | `clear` | Sun | Clear skies | | `partly-cloudy` | CloudSun | Partly cloudy | | `cloudy` | Cloud | Cloudy | | `overcast` | Cloud | Overcast skies | | `fog` | CloudFog | Fog | | `drizzle` | CloudDrizzle | Light rain | | `rain` | CloudRain | Rain | | `heavy-rain` | CloudRain | Heavy rain | | `thunderstorm` | CloudLightning | Thunderstorm | | `snow` | Snowflake | Snow | | `sleet` | CloudHail | Sleet | | `hail` | CloudHail | Hail | | `windy` | Wind | Windy | ## Accessibility - Forecast list uses proper `role="list"` and `role="listitem"` structure - Temperature values include screen reader labels with unit names - Condition icons are decorative (`aria-hidden`) with text labels provided ## Related - [Stats Display](/docs/stats-display): for structured numeric data that is not weather-specific - [Image](/docs/image): WeatherWidget includes visual scene rendering; use Image when the visual itself is the content

Tool UI

Kansas City, MO

Kansas City, MO