npx tool-agent "integrate the weather widget component for weather display with forecasts and conditions"npx shadcn@latest add @tool-ui/weather-widgetWeatherWidget 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 for how component roles work.
Run this once from your project root.
npx tool-agent "integrate the weather widget component for weather display with forecasts and conditions"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" /> );}Registration tells assistant-ui which component to render when a tool named get_weather returns data. Without it, tool results appear as raw JSON.
"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<WeatherWidgetProps, "version">), };}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<string, unknown>), id: args?.id ?? `weather-${toolCallId}`, }); if (!parsedArgs) { return null; } return <WeatherWidget {...parsedArgs} />; }, },};Copy this prompt into your coding agent (Claude Code, Cursor, etc.) and it will wire WeatherWidget to whatever weather API you use.
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 payloadThe 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 timestampValid WeatherConditionCode values:clear | partly-cloudy | cloudy | overcast | fog | drizzle | rain | heavy-rain | thunderstorm | snow | sleet | hail | windyStep 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.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
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