Kansas City, MO
72
H 78°L 65°
<WeatherWidget version="3.1" id="weather-widget-thunderstorm" location={{ "name": "Kansas City, MO" }} units={{ "temperature": "fahrenheit" }} current={{ "temperature": 72, "tempMin": 65, "tempMax": 78, "conditionCode": "thunderstorm" }} forecast={[ { "label": "Tue", "tempMin": 62, "tempMax": 75, "conditionCode": "heavy-rain" }, { "label": "Wed", "tempMin": 58, "tempMax": 70, "conditionCode": "rain" }, { "label": "Thu", "tempMin": 55, "tempMax": 68, "conditionCode": "cloudy" }, { "label": "Fri", "tempMin": 52, "tempMax": 72, "conditionCode": "partly-cloudy" }, { "label": "Sat", "tempMin": 58, "tempMax": 76, "conditionCode": "clear" } ]} time={{ "localTimeOfDay": 0.9375 }} updatedAt="2026-01-28T22:30:00Z"/>Run this once from your project root.
npx shadcn@latest add @tool-ui/weather-widgetRender WeatherWidget in your UI with tool-compatible props.
import { WeatherWidget } from "@/components/tool-ui/weather-widget/runtime";export function Example() { return ( <WeatherWidget version="3.1" id="weather-widget-example" location={{ name: "Kansas City, MO" }} units={{ temperature: "fahrenheit" }} current={{ temperature: 72, tempMin: 65, tempMax: 78, conditionCode: "thunderstorm", }} forecast={[ { label: "Tue", tempMin: 62, tempMax: 75, conditionCode: "heavy-rain" }, { label: "Wed", tempMin: 58, tempMax: 70, conditionCode: "rain" }, { label: "Thu", tempMin: 55, tempMax: 68, conditionCode: "cloudy" }, { label: "Fri", tempMin: 52, tempMax: 72, conditionCode: "partly-cloudy" }, { label: "Sat", tempMin: 58, tempMax: 76, conditionCode: "clear" }, ]} time={{ localTimeOfDay: 22 / 24 }} updatedAt="2026-01-28T22:00:00Z" /> );}Register this renderer so tool results display as WeatherWidget.
"use client";import { type Toolkit } from "@assistant-ui/react";import { WeatherWidget,} from "@/components/tool-ui/weather-widget/runtime";import { safeParseWeatherWidgetPayload, WeatherWidgetPayloadSchema,} from "@/components/tool-ui/weather-widget/schema";import { createArgsToolRenderer } from "@/components/tool-ui/shared";export const toolkit: Toolkit = { get_weather: { description: "Display current weather and forecast for a location", parameters: WeatherWidgetPayloadSchema, render: createArgsToolRenderer({ safeParse: (input) => safeParseWeatherWidgetPayload({ version: "3.1", ...(input as Record<string, unknown>), }), idPrefix: "weather", render: (parsedArgs) => ( <WeatherWidget {...parsedArgs} /> ), }), },};These snippets use assistant-ui for end-to-end wiring, but the WeatherWidget component itself is framework-agnostic at the UI layer: you can use it in any React codebase with any LLM SDK or tool-calling interface that can provide compatible props.
13 condition types with matching icons: clear, cloudy, rain, snow, and more
Show city and region with the current temperature
Support for both Celsius and Fahrenheit display
Display 1-7 day forecasts with high/low temperatures
Prop
Type
Prop
Type
Prop
Type
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 |
role="list" and role="listitem" structurearia-hidden) with text labels provided