Event Details

Example: Event Details

Tell me about the design meetup on Thursday

What's the plan for Dana and Sam's wedding?

Details for the product webinar

G

MeetupWeddingWebinar

Design Systems Night: tokens in practice

Thu, Oct 15 · 6:30–9:00 PMNew York time · in 7 days

Acme Studio, 4th floor88 Front Street, Brooklyn, NY 11201 · Directions to Acme Studio, 4th floor (opens in a new tab)

Price

Free

Capacity

84 going · 120 spots

Accessibility

Step-free access · Accessible restroom

Two talks on design tokens, then lightning demos. Bring a laptop if you'd like to follow along.

Agenda

1. 7:00 PM
   Tokens that survive a rebrandPriya Raman
2. 7:40 PM
   From design variables to codeTomás Ferreira

When to useCopy Anchor Link

• The user asks about one specific event they're interested in or invited to: a conference, concert, meetup, webinar, wedding, match or class.
• They want the when and where, the dress code, the agenda or who's speaking, or to RSVP, add it to their calendar or get tickets.

When not to useCopy Anchor Link

• The agent doesn't have the event from a tool result (an invite, a calendar, a ticketing or event page). Never invent times, venues, prices or attendee counts.
• The user wants their ticket or entry code. Use Event Pass.
• There are several events to choose from, or a whole day's schedule. Use a list or the Calendar.

How the agent should use itCopy Anchor Link

• Pass start and end with the venue's UTC offset and the event's IANA timeZone, exactly as the source gives them. Never convert times to the user's timezone.
• Use a date-only start for all-day events ("2026-10-24"); end is then the last day.
• Only include rsvp when the user can actually respond, with their current answer (none if they haven't).
• Keep the description to facts the other fields don't cover, up to 600 characters, with **bold** for one or two key details.
• Every action is a handoff. On rsvp, record the answer through the event's own system; get-tickets opens url; add-to-calendar and share happen on the device.
• Lifecycle: set expiresAt on the call to the event's end (or the end of its last day), so a past event turns inert in the Renderer instead of offering RSVP and tickets. When the agent shows the same event again with updated details (a new time, a changed venue), supersede the old call. fetchedAt isn't needed.

Times and timezonesCopy Anchor Link

The date line shows in the event's own timezone: "Thu, Oct 15 · 6:30–9:00 PM". The line below names the zone ("New York time"), adds the start in the viewer's own time when it differs ("3:30 PM your time"), and how far away it is ("in 7 days", "tomorrow", "happening now", "ended").

The year appears when it isn't the current one. The relative text and the viewer's time are computed after mount, so server and client render the same markup; pass now to measure from a fixed moment (tests, demos). Agenda times may be "18:30" (local time at the event) or ISO date-times. Formatting uses Intl only; the helpers are in event-details-utils.ts (resolveWhen, dateRangeText, relativeText, capacityText, directionsUrl, buildIcs, …).

LayoutCopy Anchor Link

• Header: the title. kind picks the people heading ("Speakers", "Lineup") and isn't shown on its own.
• When and where: the date line as the largest text, one quiet line under it, the venue with its address and a Directions link (an OpenStreetMap search), and for online or hybrid events the platform with its join link.
• Key facts: price, capacity ("84 going · 120 spots"), dress code, age and accessibility, only those given.
• Description, then the agenda as a compact timeline and the speakers (or lineup).
• An optional image from the event's own data (http(s) or data:image only) sits on top.

ActionsCopy Anchor Link

After an answer, the RSVP locks to it ("You're going") with a Change button that reopens the choice; a new answer sends another rsvp result. Answers close after rsvp.deadline. The calendar file is built in the browser: timed events in UTC, date-only events as all-day, with text escaped and long lines folded. Add to calendar, Get tickets and Share report once each.

InstallationCopy Anchor Link

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

UsageCopy Anchor Link

import { tool } from "ai"
import { eventDetailsTool } from "@/components/genui/event-details.schema"

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

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

import { EventDetails } from "@/components/genui/event-details"

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

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

The agent receives one of:

{ action: "rsvp", state: "going" } // or "maybe", "not-going"
{ action: "add-to-calendar" }
{ action: "get-tickets" }
{ action: "share" }

With LangGraphCopy Anchor Link

Push it from a graph node with ui.push({ name: "show_event", 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 when several actions were taken. The latest rsvp restores the locked answer (Change still works), and the other actions show as done. Restoring never calls onResult.

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

SchemaCopy Anchor Link

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

SourceCopy Anchor Link