Showtimes

Example: Showtimes

What's playing at the Harbor Lights Cinema tonight?

Book a spin class this week.

Times for Glass Orchard this weekend, for two.

G

Cinema tonightFitness classesOne film, prices

Harbor Lights Cinema

Times are in Chicago time.

October 2026

08Today09Fri10Sat11Sun12Mon13Tue14Wed15Thu16Fri17Sat

The Long HarborPG-13 · 2 h 18 min

12:00 PM3:00 PMIMAX6:00 PMIMAX9:00 PMIMAX

Glass OrchardSubtitledR · 1 h 52 min · French

2:30 PM7:15 PM9:45 PM

Paper MoonsPG · 1 h 34 min

11:00 AM1:30 PM4:00 PM

When to useCopy Anchor Link

• The user wants to see what's on and pick a session: films, theater, concerts, classes, tours, restaurant seatings.
• The agent fetched a venue's schedule with real session ids.

When not to useCopy Anchor Link

• The agent hasn't fetched the schedule. Never invent titles or times.
• There's one title with one session. Ask for a yes or no in text.
• Booking a generic appointment with no titles to choose between. Use a Slot Picker.

How the agent should use itCopy Anchor Link

• Every title and session comes from a tool result, with its real id.
• Only include days that have sessions. Mark sold-out sessions with soldOut instead of dropping them, so the user sees the whole schedule.
• Set defaultDate to the day the user asked about ("tonight" → today).
• The result is a choice, not a booking. Check availability and confirm the price before booking anything.

InteractionCopy Anchor Link

• Header: the venue name, then the month of the visible days with previous and next buttons that page the strip a week (7 session days) at a time when there are more than 7. Paging selects the first day of the new page. The venue's time zone is announced to screen readers only.
• Day strip: a radio group with a roving tabindex. Arrow keys move between all days (across pages), Home and End jump to the ends. Each day shows its weekday (or its label, e.g. "Today") over the date; the selected day is a filled circle. Days without sessions aren't shown.
• Sessions: every time chip on the day is one radio in a single group spanning all titles, so there's one selection in total. Each is labelled with its context, e.g. "The Long Harbor, 9:00 PM, IMAX, sold out". Sold-out sessions are disabled and struck through; fewLeft adds a small "Few left". Titles with nothing on the selected day are hidden; with none at all it says "Nothing this day".
• Title rows: the name, then one quiet line with subtitle, up to two tags (tags that repeat a session format, like "IMAX" on IMAX chips, are dropped) and the lowest price ("From $11.50").
• Posters: image must be an http(s) URL with real alt. Without one, a neutral tile shows the title's initials.
• Footer: the chosen session ("Glass Orchard · Sun, Oct 11 · 7:15 PM"), a stepper when quantity is set, the total in bold when the session has a price, and Continue (disabled until a session is picked).
• Formatting: dates, times and prices use Intl with the locale host prop, "en-US" by default, so server and client agree. Times are wall-clock at the venue and never shifted by the viewer's zone.

InstallationCopy Anchor Link

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

UsageCopy Anchor Link

import { tool } from "ai"
import { showtimesTool } from "@/components/genui/showtimes.schema"

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

import { Showtimes } from "@/components/genui/showtimes"

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

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

The agent receives one of:

{ action: "select", sessionId: "go-20261011-1915", titleId: "glass-orchard", date: "2026-10-11", time: "19:15", quantity: 2 }
{ action: "dismiss" }

quantity is only present when the quantity prop was set. Nothing is booked; the agent takes it from there.

With LangGraphCopy Anchor Link

Push it from a graph node with ui.push({ name: "pick_showtime", 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. It opens on the chosen day with the session and count selected, read-only, and never calls onResult again.

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

SchemaCopy Anchor Link

Title

Session

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

SourceCopy Anchor Link