| name | flight |
| description | Flight canvas for comparing flights and selecting seats.
Use when users need to browse flight options and book seats.
|
Flight Canvas
Cyberpunk-themed flight comparison and seat selection interface.
Example Prompts
Try asking Claude:
- "Find flights from San Francisco to Denver on January 15th"
- "Book me a window seat on the cheapest nonstop to NYC"
- "Compare morning flights from LAX to Seattle next Monday"
- "I need a business class seat to Chicago with extra legroom"
- "Show me United flights to Boston under $300"
Scenarios
booking (default)
Interactive flight comparison and seat selection.
- Shows flight options with airline, times, duration, and price
- Interactive seat map for seat selection
- Keyboard navigation between flights and seats
- Returns selected flight and seat via IPC
bun run src/cli.ts spawn flight --scenario booking --config '{
"title": "// FLIGHT_BOOKING_TERMINAL //",
"flights": [
{
"id": "ua123",
"airline": "United Airlines",
"flightNumber": "UA 123",
"origin": {
"code": "SFO",
"name": "San Francisco International",
"city": "San Francisco",
"timezone": "PST"
},
"destination": {
"code": "DEN",
"name": "Denver International",
"city": "Denver",
"timezone": "MST"
},
"departureTime": "2026-01-08T12:55:00-08:00",
"arrivalTime": "2026-01-08T16:37:00-07:00",
"duration": 162,
"price": 34500,
"currency": "USD",
"cabinClass": "economy",
"aircraft": "Boeing 737-800",
"stops": 0,
"seatmap": {
"rows": 30,
"seatsPerRow": ["A", "B", "C", "D", "E", "F"],
"aisleAfter": ["C"],
"unavailable": ["1A", "1B", "1C", "1D", "1E", "1F"],
"premium": ["2A", "2B", "2C", "2D", "2E", "2F"],
"occupied": ["3A", "3C", "4B", "5D"]
}
}
]
}'
Configuration
interface FlightConfig {
flights: Flight[];
title?: string;
showSeatmap?: boolean;
selectedFlightId?: string;
}
interface Flight {
id: string;
airline: string;
flightNumber: string;
origin: Airport;
destination: Airport;
departureTime: string;
arrivalTime: string;
duration: number;
price: number;
currency: string;
cabinClass: "economy" | "premium" | "business" | "first";
aircraft?: string;
stops: number;
seatmap?: Seatmap;
}
interface Airport {
code: string;
name: string;
city: string;
timezone: string;
}
interface Seatmap {
rows: number;
seatsPerRow: string[];
aisleAfter: string[];
unavailable: string[];
premium: string[];
occupied: string[];
}
Controls
↑/↓: Navigate between flights
Tab: Switch focus between flight list and seatmap
←/→/↑/↓ (in seatmap): Move seat cursor
Space: Select/deselect seat
Enter: Confirm selection
Shift+Enter: Confirm immediately (skip countdown)
q or Esc: Cancel
Selection Result
interface FlightResult {
selectedFlight: Flight;
selectedSeat?: string;
}
Seat Legend
[ ] - Available seat
[X] - Occupied seat
[/] - Unavailable/blocked
[+] - Premium seat (extra legroom)
[*] - Currently selected
API Usage
import { bookFlight } from "${CLAUDE_PLUGIN_ROOT}/src/api";
const result = await bookFlight({
flights: [
{
id: "ua123",
airline: "United Airlines",
flightNumber: "UA 123",
origin: { code: "SFO", name: "San Francisco", city: "SF", timezone: "PST" },
destination: { code: "DEN", name: "Denver", city: "Denver", timezone: "MST" },
departureTime: "2026-01-08T12:55:00-08:00",
arrivalTime: "2026-01-08T16:37:00-07:00",
duration: 162,
price: 34500,
currency: "USD",
cabinClass: "economy",
stops: 0,
seatmap: { ... }
}
]
});
if (result.success && result.data) {
console.log(`Booked: ${result.data.selectedFlight.flightNumber}`);
console.log(`Seat: ${result.data.selectedSeat}`);
}