booking-mcp-app: Add view-only MCP App for court availability

[dragoscocs]

First experiment with MCP Apps (spec 2026-01-26), following up on the generative-ui POC. Read-only for now, before any booking/write.

What it is

An MCP server that exposes one tool, get_court_availability (date + sport), linked to a UI resource (ui://court-availability/panel.html). The host renders it in a sandboxed iframe as a read-only grid of courts x time slots, free vs taken.

The key difference from generative-ui: the input data is for the server, not for the model. The tool is where a real booking backend would sit; the UI only displays what the server returns.

Bidirectional communication

The panel gets its data two ways, both in src/mcp-app.ts:

• the host pushes a tool result (app.ontoolresult) when the tool is called, e.g. with another date or sport;
• the app pulls its own initial data (app.callServerTool), the app -> server -> app round trip.

There are no inputs and no submit: changing date/sport happens by calling the tool with different arguments, not from a form.

Stack

@modelcontextprotocol/ext-apps + @modelcontextprotocol/sdk, TypeScript, Vite + vite-plugin-singlefile (the UI bundles to a single self-contained HTML, which keeps the app iframe CSP happy). Availability is deterministic in-memory mock data, no DB.

Try it

cd booking-mcp-app
npm install
npm run build
npm run serve      # http://localhost:3001/mcp

Then point the basic-host from modelcontextprotocol/ext-apps at it:

SERVERS='["http://localhost:3001/mcp"]' npm start   # open http://localhost:8080

Shortcut to auto-call the tool: http://localhost:8080/index.html?tool=get_court_availability&call=true. Verified end to end in that host: connect -> tools/list -> tools/call -> resource read -> ui/initialize -> tool-result render.

Next

The write phase: a book_slot tool that actually saves a booking, if the direction looks right.