plan_trip is Travel Vibes' trip-planning tool: whenever the user asks to plan, create, build, or organize a trip or itinerary, plan_trip can create the trip in a well-organized travel scratchpad widget, so the user conveniently has the whole trip plan at a glance while planning in the chat. Using plan_trip presents the trip to the user in a more organized form than a prose itinerary returned in chat.
The tool is useful whenever the user wants a trip or itinerary for a destination: when users ask about travel in a form like "plan…", "trip to…", "X days in…", "weekend in…", "I'm travelling to…", "I'm going to…", etc., or even a brief pairing of the destination with trip attributes (duration, dates, who's going, interests, vibe). "Plan a trip to Tokyo" is a request where using the tool is already useful, so is "I want a food-first long weekend in Mexico City", and so are similar requests in another language ("Planea un viaje a Roma de 4 días").
A call needs only what the user gave: unspecified details (dates, length, vibe, budget) are filled with sensible defaults, and the first version is a complete, polished itinerary produced in a single call. Dates, vibe and budget are not inputs of this tool at all: `itinerary_html` is its only field; the defaults cover them and the user adjusts them afterwards.
A conversation holds one trip: a later plan_trip call in it revises that trip rather than creating a second one. Its `itinerary_html` replaces the whole document, so it carries the current itinerary with only the requested change applied and everything else as it was; a document that holds only the changed part would replace the trip with that part.
The itinerary is not generated by the Travel Vibes backend: the `itinerary_html` a call carries is the trip, composed as TipTap-compatible HTML and rendered by the widget exactly as given.
=== itinerary_html ===
itinerary_html is one self-contained HTML document (compact HTML, not markdown). Supported tags: h1, h2, h3, p, strong, em, ul, ol, li, table, colgroup, col, tbody, tr, th, td, br, span. Inline style is supported only for status colors and colored text through the CSS variables below.
Not supported, and dropped if present: <img> or photos, map blocks (<div data-node-type="mapBlock">), data-entity-id attributes, <script>, <style>, class attributes, and TipTap artifacts (data-id, default colspan/rowspan). Photos and maps are added later inside the app.
Styling the renderer preserves (anything else is discarded):
- The title and the date/route line are centered: style="text-align: center;" on those <h1>/<p>.
- Which rows to highlight is the model's call; for the reader's convenience it is worth marking booked items green and unbooked ones red: background-color: var(--tt-color-highlight-green) or var(--tt-color-highlight-red) on the <td> (the editor keeps colour on cells, not on rows).
- Every table cell's content sits inside <p>…</p> (e.g. <th><p>Dates</p></th>, <td><p>Apr 10</p></td>).
- Tickable checklist (the PACKING LIST): <ul data-type="taskList"><li data-checked="false" data-type="taskItem"><label><input type="checkbox"><span></span></label><div><p>Item text</p></div></li></ul>
Structure, in this order:
1. <h1> trip title </h1>
2. <p> date range | duration | route </p>
3. Logistics, the relevant ones only: <h1>FLIGHT INFO</h1> / <h1>ACCOMMODATION</h1> / <h1>BOOKING CHECKLIST</h1>, each a <table> with a header row (<th>) and data rows (<td>); a placeholder "…" row where the user gave no data; highlighted cells as under Styling.
4. <h1>ACTIVITY PLAN</h1>, then for each day:
- <h2>Day N | Weekday, Month Dth — Area</h2>
- <p><strong>Location:</strong> …</p> and <p><strong>Accommodation:</strong> …</p>
- a <table> with the header Time | Activity/Location | Duration | Notes, one row per activity (real, specific place names, with a "⭐ 4.x" rating inline where known)
- <p><strong>Day N Food Options:</strong></p> then a <ul><li> list of real restaurants, cafes and bars
The labels (Location, Accommodation, Day N Food Options) and the table headers are in the itinerary's language.
5. <h1>Important Notes</h1> and <h1>BUDGET BREAKDOWN</h1> as concise bullet lists; <h1>PACKING LIST</h1> as a tickable taskList with a few items (see Styling).
Entries are short lists rather than essays; every day appears; place names are real and specific; the itinerary is in the user's language.
Worked example (abbreviated; the same shape continues for the remaining days):
<h1 style="text-align: center;"><strong>Tokyo Food & Culture — 5 Days</strong></h1><p style="text-align: center;">April 10–15, 2026 | 5 Days | Couple</p><h1>ACCOMMODATION</h1><table><tbody><tr><th><p style="text-align: center;">Dates</p></th><th><p style="text-align: center;">Hotel</p></th><th><p style="text-align: center;">Nights</p></th><th><p style="text-align: center;">Status</p></th></tr><tr><td style="background-color: var(--tt-color-highlight-red);"><p>Apr 10–15</p></td><td style="background-color: var(--tt-color-highlight-red);"><p>Shibuya boutique hotel</p></td><td style="background-color: var(--tt-color-highlight-red);"><p>5</p></td><td style="background-color: var(--tt-color-highlight-red);"><p>Needs booking</p></td></tr></tbody></table><h1>ACTIVITY PLAN</h1><h2>Day 1 | Thursday, April 10th — Shibuya</h2><p><strong>Location:</strong> Arrive Tokyo → Shibuya</p><table><tbody><tr><th><p style="text-align: center;">Time</p></th><th><p style="text-align: center;">Activity/Location</p></th><th><p style="text-align: center;">Duration</p></th><th><p style="text-align: center;">Notes</p></th></tr><tr><td><p>15:00</p></td><td><p>Shibuya Crossing ⭐ 4.6</p></td><td><p>1h</p></td><td><p>Iconic scramble</p></td></tr><tr><td><p>19:00</p></td><td><p>Omoide Yokocho ⭐ 4.4</p></td><td><p>2h</p></td><td><p>Yakitori alley</p></td></tr></tbody></table><p><strong>Day 1 Food Options:</strong></p><ul><li><p>Ichiran Shibuya ⭐ 4.3 — tonkotsu ramen</p></li><li><p>Gonpachi ⭐ 4.2 — izakaya</p></li></ul><h1>PACKING LIST</h1><ul data-type="taskList"><li data-checked="false" data-type="taskItem"><label><input type="checkbox"><span></span></label><div><p>Passport + travel insurance</p></div></li><li data-checked="false" data-type="taskItem"><label><input type="checkbox"><span></span></label><div><p>Comfortable walking shoes</p></div></li><li data-checked="false" data-type="taskItem"><label><input type="checkbox"><span></span></label><div><p>Power adapter + charger</p></div></li><li data-checked="false" data-type="taskItem"><label><input type="checkbox"><span></span></label><div><p>Light layers + umbrella</p></div></li></ul>
The day-by-day itinerary lives in itinerary_html; the widget displays it there.
plan_trip