TripMate — dynamic UI on ASI:One
A personal travel agent on ASI:One that searches live flights, hotels, and packages through lastminute.com MCP, then shows results as interactive cards you tap, review, and book.
Planning a trip usually means Skyscanner + Booking.com + copy-paste. A generic chatbot hallucinates prices and dumps text. TripMate’s stack is ASI:One (chat + cards) + Fetch.ai uAgents (mailbox runtime) + lastminute.com MCP (live inventory) + ASI1 (intent).
Full write-up: TripMate: Building an AI Travel Agent. Source: innovation-lab-examples / dynamic-ui-on-asi1 / tripmate
System architecture
From the Medium article: the ASI:One user queries the uAgent; handler / session store / card builder talk to LangGraph + ASI1 (ReAct + MCP tools); lastminute MCP returns search_flights, search_hotels, search_packages, generate_booking_link; the card builder emits carousel / review / form cards.
Dynamic UI breakdown
Card flow from the article: form (optional) → MCP search → carousel → pick → review → approve → custom redirect to lastminute.com.
| Step | card_kind | What you see | What comes back |
|---|---|---|---|
| Search (optional) | form | Trip type, cities, dates, adults | {"action": "submit_search", ...fields} |
| Results | carousel | Scrollable flights / hotels / packages + Select | {"action": "pick_flight", "offer_id": "…"} (or hotel/package equivalent) |
| Confirm | review | Summary rows + Approve / Cancel | {"action": "approve", "book_url": "https://…"} |
| Book | custom | “Book on lastminute.com →” | Button redirect plus {"action": "book_opened"} |
Envelope (every card message):
card_protocol_version: "1"
requires_card_interaction: "true"
card_kind: "carousel" | "form" | "review" | "custom"
card_payload: JSON string (max 64 KB)
tripmate/cards.py builds those payloads (search_form_card, carousel via results.py, booking_review_card, booking_redirect_card). handler.py parses the tap first; if it is not a card action, LangGraph + ASI1 runs a natural-language search.
Paste any payload into the Card Playground to preview it without running the agent.
Run the example
git clone https://github.com/fetchai/innovation-lab-examples.git
cd innovation-lab-examples/dynamic-ui-on-asi1/tripmate
python -m venv .venv
source .venv/bin/activate # Windows: .venv\Scripts\activate
pip install -r requirements.txt
cp .env.example .env # set ASI_ONE_API_KEY
python agent.py
Needs Python 3.10+ and Node.js / npx (mcp-remote talks to lastminute MCP). Mailbox on port 8000 — connect from the inspector, then chat on ASI:One.
Try: Show me direct morning flights from Rome to Paris under 150 EUR or Find me flight and hotel packages from Rome to Madrid for 3 nights.
Related
- News Card Agent — list → detail cards for news
- Interactive Cards reference
- lastminute.com MCP