Weather

When to useCopy Anchor Link

• The user asks about the weather somewhere, or is planning around it: a trip, an event, packing, a drive.
• A weather tool returned the forecast for that place.

When not to useCopy Anchor Link

• You don't have a forecast from a tool. Never invent or recall readings.
• Weather is incidental and one sentence answers it.
• The user compares many places at once. Use a Data Table.

How the agent should use itCopy Anchor Link

• Copy readings from the tool result unchanged, in the units it returned. Set units to match.
• Put the answer to the question in highlight.note, in one short sentence (about ten words), and set highlight.date to the day it's about. That day's row is marked.
• Include hourly when today or tonight matters, and daily when the question spans days.
• Include alerts only when the tool returned official ones. Never write your own.

InteractionCopy Anchor Link

• °C / °F. The toggle converts every temperature locally, starting from the payload's units. Wind speed stays in the payload's units (km/h or mph).
• Hourly strip. It scrolls sideways with snap points, and it's focusable so the arrow keys scroll it. Precipitation shows when the chance is 20% or more.
• Daily rows. Each bar sits on one scale from the coolest low to the warmest high across the days shown, so days compare at a glance. All days are shown.

LayoutCopy Anchor Link

The current temperature is the focal number, with the condition and the agent's answer (highlight.note) beside and below it. Only wind and the chance of precipitation are shown from the current details; humidity, UV index, sunrise and sunset are read to screen readers. "Feels like" appears only when it differs from the temperature by 2° or more. The header's one quiet line carries the update time and the source. Alerts, the hourly strip and the daily rows follow, separated by space rather than rules.

AccessibilityCopy Anchor Link

Times use the location's time zone, not the viewer's. Icons are decorative; each hour and day has a visually hidden sentence with the condition, temperatures with their unit, precipitation, and sunrise and sunset. The detail row's labels are visually hidden and read in full ("Wind", "Chance of precipitation"), and wind direction is read as "from the northeast". Alert severity is shown by icon shape as well as color, and written out for screen readers.

InstallationCopy Anchor Link

npx shadcn@latest add https://your-site.com/r/weather.json

UsageCopy Anchor Link

The Weather card is display-only, so the tool can return immediately:

import { tool } from "ai"
import { weatherTool } from "@/components/genui/weather.schema"

const tools = {
  [weatherTool.name]: tool({
    description: weatherTool.description,
    inputSchema: weatherTool.inputSchema,
    execute: async () => ({ shown: true }),
  }),
}

Render it through the Renderer under show_weather, or directly:

<Weather {...part.input} status={part.state === "input-streaming" ? "streaming" : "ready"} />

While streaming, current conditions render first, then hours, then days, with placeholders for what hasn't arrived.

With LangGraphCopy Anchor Link

Push it from a graph node with ui.push({ name: "show_weather", props }, { message }), and render the thread's UI messages with the Renderer.

SchemaCopy Anchor Link

condition is one of clear, partly-cloudy, cloudy, fog, drizzle, rain, heavy-rain, thunderstorm, snow, sleet or wind.

Host props: status (streaming or ready) and className.

SourceCopy Anchor Link