Hotel Reservation

When to useCopy Anchor Link

• The user has a hotel booked and asks about it before or during the trip: "my hotel for tonight", "what time is check-in?", "how do I get into my room?", "what's the Wi-Fi?".
• They want to check in online, open their digital key, call the hotel or get directions.

When not to useCopy Anchor Link

• The user is still choosing or booking a hotel. Use Hotel Booking, which also has a confirmation mode right after booking (price paid, cancel).
• The agent doesn't have the reservation from a tool result. Never invent confirmation numbers, rooms, Wi-Fi details or balances.

How the agent should use itCopy Anchor Link

• Pass stay dates as calendar dates and check-in/out times as the hotel prints them, with the hotel's IANA timeZone. Never convert them to the user's timezone.
• Pass room.number only when the hotel has assigned one. Without it the card says "Room assigned at check-in".
• Pass the Wi-Fi password only from the hotel's own data. It's masked until the user taps Show, and it never comes back in a result. Don't repeat it in the reply unless the user asks.
• Every action is a handoff. On check-in or open-digital-key, open the hotel's flow; on request-late-checkout, ask the hotel and report its answer. Never say late check-out is granted until the hotel confirms.
• Lifecycle: set expiresAt on the call to the check-out moment (the check-out date at checkOutUntil, hotel time; checkOutInstant(stay, hotel) in the utils computes it), so the Renderer turns the card inert once the stay is over. Use supersede when the hotel updates the booking (a room is assigned, check-in is done) and the agent shows the card again. fetchedAt isn't needed.

Stay state and timesCopy Anchor Link

The header reads the stay against today's date in the hotel's timezone, so "Tonight" is true where the hotel is:

Before the stay starts, "Checked in online" follows the state once online check-in is done.

The state is computed after mount, so server and client render the same markup, and it refreshes every minute. Pass now to measure from a fixed moment instead (tests, demos). Stay dates never shift with the viewer's timezone or across DST; times show on a 24-hour clock, as hotels print them.

LayoutCopy Anchor Link

The card reads like a pass: the time that matters and the room number, large.

• Header: the hotel, the confirmation number with a copy button, and the state line.
• Times: check-in and check-out times, large, with their dates beneath and the number of nights between them.
• Room: the room type, then the room number and floor in large type once assigned ("Room assigned at check-in" before), and what's due at the hotel.
• Wi-Fi: one row with the network and a masked password with Show (a toggle, aria-pressed) and Copy. Copying works while masked.
• One quiet line for what changes a decision: free cancellation (only before the stay starts), or "No digital key · collect at the front desk".

The address powers Directions and the calendar file; the hotel's website goes into the calendar file only.

ActionsCopy Anchor Link

The footer shows the first two that apply (late check-out first on check-out day, then check-in, key, directions, call, calendar) and puts the rest in a "More actions" menu. Each handoff is reported once and the footer confirms it ("Opening your digital key…"); the others stay available. Without a link a handoff button locks after use; with a link it stays usable, since a key is opened more than once.

InstallationCopy Anchor Link

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

UsageCopy Anchor Link

import { tool } from "ai"
import { hotelReservationTool } from "@/components/genui/hotel-reservation.schema"

const tools = {
  // No execute: the user's first action is the tool result.
  [hotelReservationTool.name]: tool({
    description: hotelReservationTool.description,
    inputSchema: hotelReservationTool.inputSchema,
  }),
}

Render the tool call and hand each action to your own flow:

import { HotelReservation } from "@/components/genui/hotel-reservation"

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

  return (
    <HotelReservation
      {...part.input}
      status={part.state === "input-streaming" ? "streaming" : undefined}
      result={part.state === "output-available" ? part.output : undefined}
      onResult={(result) => {
        if (part.state !== "output-available") {
          addToolResult({ tool: "show_hotel_reservation", toolCallId: part.toolCallId, output: result })
        } else {
          sendMessage({ text: `Hotel reservation action: ${JSON.stringify(result)}` })
        }
      }}
    />
  )
}

The agent receives one of:

{ action: "check-in" }
{ action: "open-digital-key" }
{ action: "request-late-checkout" }

With LangGraphCopy Anchor Link

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

Restoring from historyCopy Anchor Link

When a conversation is reloaded, pass the stored result back as result, or an array of results when several actions were taken. Those actions show as done; they never call onResult again.

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

SchemaCopy Anchor Link

Host props: status (streaming, ready, submitting, done), now, onResult, result and className.

SourceCopy Anchor Link