Kyoto Trip Planner

Try it: https://kyoto-trip-planner.vercel.app (public, no login)

This is a prototype with sample data. Nothing here is a real listing or booking.

A chat page that answers questions about a Kyoto weekend with stay, experience and food cards.

Prototype session pass checklist

Each tick links to a screenshot in Tested on phone and laptop where one exists. Code-level rows link to the code. "Confirmed by tester" means it was checked by hand on that device, but no screenshot was taken.

Requirement	Phone	Laptop	Proof
Guest message stays visible throughout	✅	✅	Phone 1, 2, 3; Laptop 1, 2, 3
Thinking dots show before every reply	✅	✅	Confirmed by tester on phone and laptop
Three cards appear (stay, Experience, food)	✅	✅	Laptop 1, 3; phone confirmed by tester (screenshots show the stay card)
Typing best places in USA shows the broken mock	✅	✅	Phone 2; Laptop 2
The error appears inside the assistant bubble with “We couldn't put your plan together just now.” and “Your request is saved, and you can try again.”	✅	✅	Phone 2; Laptop 2
Exactly one “Try again” button, inside the bubble	✅	✅	Phone 2; Laptop 2
No red, no error codes, no alerts, toasts, modals or separate pages	✅	✅	Phone 2; Laptop 2
All three broken shapes (bad type, missing data, plain string) are rejected by toResponseItems	—	—	Code check: src/lib/responseItems.ts, shapes in src/data/mockResponse.ts
Try again removes the failed bubble, shows the dots, then the three cards, and never picks the broken mock	✅	✅	Phone 3, Laptop 3; dots confirmed by tester
aria-live="polite", AA contrast, icon hidden from screen readers	—	—	Code check: src/app/chat.tsx (aria-live="polite", text-gray-800 on bg-gray-50; the bubble has no icon)
Visible focus ring on Try again	N/A (touch, no keyboard)	✅	Laptop confirmed by tester; classes in src/app/chat.tsx
44px tap target on Try again	✅	✅	Confirmed by tester; min-h-[44px] in src/app/chat.tsx
Works on phone and laptop	✅	✅	Phone 1, 2, 3; Laptop 1, 2, 3
Public Vercel link opens with no login	✅	✅	Phone 2 (vercel.app in the address bar); Laptop 1

Tested on phone and laptop

Each step was run on the live Vercel link. The step names match the checklist rows they prove.

Step	Laptop	Phone
1. Three cards appear (stay, Experience, food)
2. Typing best places in USA shows the broken mock
3. Try again removes the failed bubble, then the three cards

Forced-failure state

To fire the forced failure, type best places in USA as the whole message (any case); src/app/chat.tsx then sends the broken mock from src/data/mockResponse.ts.

Card fields that use filler

Every text field (name, neighbourhood, dates, price, highlight) comes from a real row in Kyoto_weekend_workbook.xlsx. The one filler field is:

• Photo, on all three cards (StayCard, ExperienceCard, FoodCard): a placeholder image icon labelled "Photo of … coming soon". The workbook has no photo column yet.

Run locally

Run it locally with npm install && npm run dev, then open http://localhost:3000.

Message for the team and leaders

Checked against the draft UX Research requirements note.

Hi team and leaders, the Kyoto Trip Planner prototype is ready for Thursday's session. The researcher shares this link with 8 test guests; product team and leadership, try it before and after: https://kyoto-trip-planner.vercel.app (public, no login, phone or laptop).

• Happy path: ask any Kyoto question, e.g. "cheapest trip in kyoto": thinking dots, then the stay, Experience and food cards.
• Failure path: type "best places in USA" for the error bubble, then tap Try again: dots, then three cards.

All sample data: nothing is a real listing or can be booked.