Weather Outlook

When to useCopy Anchor Link

• The user asks what the weather will be like over the next several days, with no detail asked for.
• A weather tool returned a daily forecast for that place.

When not to useCopy Anchor Link

• The question is about today's hours, wind, alerts or what to wear right now. Use Weather.
• You don't have a forecast from a tool. Never invent or recall readings.
• The user compares many places at once. Use a Data Table.

How the agent should use itCopy Anchor Link

• Send 5 to 7 days in date order, copied from the tool result unchanged, in the units it returned. Set units to match.
• Add summary only when it says something the icons don't, in one short sentence.
• Pass asOf and timezone so the first day reads "Today" and the rest show their weekday.

What it showsCopy Anchor Link

Each day is a name, a weather icon, a high and a low, plus the chance of precipitation when it is 20% or more. Today is marked. On a wide card the days sit side by side in columns; on a narrow one they stack as rows.

IconsCopy Anchor Link

The days use an illustrated icon set, one PNG per condition with a light-mode and a dark-mode file (clear-day.png, clear-day-dark.png, and so on). They live in public/weather-icons/ and are shared through weather-icon.tsx, so changing that one file swaps the set. Registry installs can't carry image files: copy the weather-icons folder into your public/ directory, or replace the icons in weather-icon.tsx with your own.

AccessibilityCopy Anchor Link

The visual days are decorative. A visually hidden list carries the same readings, one sentence per day ("Wednesday: Rain, high 19°, low 14°, 70% chance of precipitation").

InstallationCopy Anchor Link

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

UsageCopy Anchor Link

import { tool } from "ai"
import { weatherOutlookTool } from "@/components/genui/weather-outlook.schema"

const tools = {
  [weatherOutlookTool.name]: tool({
    description: weatherOutlookTool.description,
    inputSchema: weatherOutlookTool.inputSchema,
  }),
}

import { WeatherOutlook } from "@/components/genui/weather-outlook"

function ToolPart({ part }) {
  if (part.type !== "tool-show_weather_outlook") return null

  return (
    <WeatherOutlook
      {...part.input}
      status={part.state === "input-streaming" ? "streaming" : undefined}
    />
  )
}

It is display-only: nothing is sent back to the agent.

SchemaCopy Anchor Link

Day

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

SourceCopy Anchor Link