# Trip planner demo

> Plan a Lisbon trip that uses every feature, each one lit on the Features tab as it fires.

Pattern: Full page. Brand: Wayfarer Travel. Tags: everything together, script, functions, widgets, page tools, situational awareness, HTTP API connection, governed write.

## What it shows

- A Features tab beside the demo that names six features and lights each one only when it fires in your visit
- **Scripts:** `trip-planner-flow` opens the chat with a greeting and three trips as reply pills, then hands over to the prompt with every tool
- **Situational awareness:** every turn carries `today`, `itinerary` and `calendar_id`, so "next week" becomes real dates
- **Functions:** `plan-trip`, `search-hotels` and `search-cars` rank sample stock; `book-hotel` and `book-car` return demo confirmations
- **Widgets:** option cards whose Choose button sends your pick back to the agent, and a booking form after Book now
- **Page tools:** `add_to_itinerary` and `remove_from_itinerary` change the itinerary and the trip calendar on the page
- **Connections and approvals:** a governed `book_slot` operation books the trip’s key hours on a live demo calendar; the panel says the connection is not live until a real booking comes back

## Files

- `demos/trip-planner/demo.json`
- `demos/trip-planner/script/trip-planner-flow.json`
- `demos/trip-planner/functions/trip-planner-plan-trip.json`
- `demos/trip-planner/widgets/trip-planner-option-cards.json`
- `demos/trip-planner/prompt/policy-rules.md`
- `src/demos/trip-planner/index.tsx`
- `src/demos/trip-planner/itinerary.ts`
- `src/demos/trip-planner/features.ts`
- `src/demos/trip-planner/Features.tsx`
- `src/demos/trip-planner/scriptOpening.ts`
- `src/content/demos/trip-planner.ts`
- `src/content/demos/trip-planner.md`

## More

- [Source](https://docs.mindset.ai/demos/trip-planner/source)
- [How it works](https://docs.mindset.ai/demos/trip-planner/how)
- [Add a function](https://docs.mindset.ai/docs/build-a-function)
- [Connections and operations](https://docs.mindset.ai/docs/connections-and-operations)
- [Connection types](https://docs.mindset.ai/docs/connection-types)
- [The mindset-agent element](https://docs.mindset.ai/docs/the-mindset-agent-element)
- [Put an agent on your page](https://docs.mindset.ai/docs/put-an-agent-on-your-page)
- [Test behavior](https://docs.mindset.ai/docs/test-an-agents-behavior)