feat: Skylark Air WebMCP flight-booking demo#291
Draft
bookernath wants to merge 1 commit into
Draft
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
A new WebMCP demo that fills the gap the existing ones miss: a multi-step
booking form with repeater fields, cross-field validation, and an
approval-gated commit. The Copilot and the on-page controls drive the same
BookingStore, so flight selection, passenger details, and seat picks render
identically whoever made the change.
Centerpiece is the seat-map tool design: get_seat_map returns a rows x
columns grid (array of arrays) so the agent reads human seat concepts —
window vs aisle (column position + per-cell type), adjacency (row array
order), "near the front" (ascending row), exit-row/extra-legroom — straight
from the data shape. Structured JSON only, no image round-trip, so it runs
on a text model.
- packages/proxy: WEBMCP_FLIGHTS_FLOW (nemotron, markdown) teaching the
booking workflow + how to read the seat grid; mounted at
/api/chat/dispatch-flights in both vercel-edge entry points
- examples/embedded-app: webmcp-flights demo (store, catalog + seat-map
generator, WebMCP tools, page UI with agent-touch flash, widget mount with
live {{booking_context}}); registered in vite config, index carousel, and
the demo list
- Tools: search_flights, get_seat_map, get_booking_state (reads);
select_flight, set_passengers, update_passenger, assign_seat (auto-approve
form fills); confirm_booking, reset_booking (approval-gated). Validation
lives in the tool handlers and surfaces as relayed errors.
bookernath
force-pushed
the
feat/webmcp-flights-demo
branch
from
June 26, 2026 21:19
82dade5 to
0a19d3f
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
A new WebMCP demo — Skylark Air, a flight-booking Copilot — that fills the gap the existing demos miss: a multi-step form with repeater fields, cross-field validation, and an approval-gated commit. The Copilot and the on-page controls drive the same
BookingStore, so flight selection, passenger details, and seat picks render identically whoever made the change.The centerpiece: seat-map tool design
get_seat_mapreturns a rows × columns grid (array of arrays) so the agent reads human seat concepts straight from the data shape:columnTypeslegend (window = first/last column) + each cell's owntypeseatsarrayrowexitRow/extraLegroomStructured JSON only, no image round-trip — it runs on a text model. Verified output, row 14:
14A:w 14B:mx 14C:a 14D:a 14E:m 14F:wx.Tool surface
get_booking_state,search_flights,get_seat_mapselect_flight,set_passengers,update_passenger,assign_seatconfirm_booking,reset_bookingValidation (return ≥ depart, taken/nonexistent seats, missing passenger details, unseated passengers before confirm) lives in the tool handlers and surfaces as relayed errors.
Changes
packages/proxy—WEBMCP_FLIGHTS_FLOW(nemotron, markdown) teaching the booking workflow + how to read the seat grid; exported fromflows/index.ts; mounted at/api/chat/dispatch-flightsin bothvercel-edge/src/server.tsandapi/index.ts. Changeset included (minor).examples/embedded-app—webmcp-flightsdemo:store.ts,catalog.ts(deterministic flights + seat-map generator),tools.ts,app.ts(page UI with agent-touch flash),main.ts(docked widget, Skylark theme, live{{booking_context}}via contextProviders → requestMiddleware). Registered invite.config.ts, the index carousel/pattern-links, and the demo list.Verification
pnpm build:proxy✅ · proxytypecheck✅ · proxylint✅src/webmcp-flightsWebMCP Flights Flowstreamsflow_start/step_deltas, Copilot engages the tools