Slot Picker

When to useCopy Anchor Link

• The user needs to pick a time for something with real availability: a call, a table, a service appointment.
• The agent fetched open slots from a calendar or booking system.

When not to useCopy Anchor Link

• The agent hasn't checked availability. Fetch it first; never offer invented times.
• There's exactly one possible time. Ask for a yes or no in text.
• The user already named a time that's free. Book it, or confirm it with a Change Preview.

How the agent should use itCopy Anchor Link

• Every slot comes from a tool result, with its real id.
• Always set timezone to the zone the times are in, and use the user's zone when possible.
• Include taken slots as available: false when it helps the user see the shape of the day; drop days with nothing at all.
• Book only the slotId returned with select, and re-check it's still free before booking.

InteractionCopy Anchor Link

Days are toggle buttons (aria-pressed) that scroll sideways on narrow screens; a day with no open slots is disabled, its date struck through and announced as "full" (each day also announces how many times are open). The first day with an open slot is shown first. Times for the chosen day are toggle buttons in a labelled group; taken slots are disabled, struck through and announced as "taken". Confirm stays disabled until a time is picked; the footer then shows the full day and time. After confirming, the chosen time is the card's headline.

start can be wall-clock HH:mm in timezone, or a full ISO date-time with an offset, which is converted into timezone. Dates and times are formatted with Intl in the viewer's locale.

InstallationCopy Anchor Link

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

UsageCopy Anchor Link

import { tool } from "ai"
import { slotPickerTool } from "@/components/genui/slot-picker.schema"

const tools = {
  // No execute(): the call is completed by the user's choice in the UI.
  [slotPickerTool.name]: tool({
    description: slotPickerTool.description,
    inputSchema: slotPickerTool.inputSchema,
  }),
}

import { SlotPicker } from "@/components/genui/slot-picker"

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

  return (
    <SlotPicker
      {...part.input}
      status={part.state === "input-streaming" ? "streaming" : undefined}
      result={part.state === "output-available" ? part.output : undefined}
      onResult={(result) =>
        addToolResult({
          tool: "pick_slot",
          toolCallId: part.toolCallId,
          output: result,
        })
      }
    />
  )
}

The agent receives one of:

{ action: "select", slotId: "2026-10-14T12:00", date: "2026-10-14", start: "12:00", label: "Wednesday, October 14 at 12:00 PM" }
{ action: "cancel" }

start is returned exactly as it was given.

With LangGraphCopy Anchor Link

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

Restoring from historyCopy Anchor Link

Pass the stored result back as result. The picker shows the chosen day and time (or the cancelled state) and never calls onResult again.

<SlotPicker
  {...part.input}
  result={part.state === "output-available" ? part.output : undefined}
/>

SchemaCopy Anchor Link

Slot

Host props: status (streaming, ready, submitting, selected, cancelled), onResult, result and className.

SourceCopy Anchor Link