DEV Community

whiteknightonhorse
whiteknightonhorse

Posted on

Build a Flight-Search MCP App in 10 Minutes with Sunpeak + APIbase

#agents #ai #mcp #tutorial

What if your ChatGPT plugin could search real flight prices?

Not a mock. Not a demo. Actual Amadeus GDS data — airlines, prices, stops, departure times — inside an interactive app running in ChatGPT or Claude.

That's what we're building in this tutorial. The stack:

  • Sunpeak — open-source framework for building MCP Apps inside ChatGPT and Claude
  • APIbase — unified MCP gateway with 500 real-world API tools

Ten minutes. Working app. Let's go.

What is Sunpeak?

Sunpeak is an npm framework that lets you build interactive applications — with forms, buttons, charts, and data displays — that run inside AI assistants. Think of it as React for ChatGPT.

The apps are built on MCP (Model Context Protocol), so they work in both ChatGPT and Claude without separate codebases. You develop locally with a hot-reloading inspector, then deploy once.

pnpm add -g sunpeak
sunpeak create my-flight-app
cd my-flight-app
Enter fullscreen mode Exit fullscreen mode

What is APIbase?

APIbase is a single MCP endpoint that gives your app access to 500 API tools — flights (Amadeus), weather (NOAA), stock quotes (Finnhub), government data (Census, CDC, Congress), museums (Met, Rijksmuseum), and 150+ more providers.

One connection. No individual API keys to manage. Pay per call with x402 USDC micropayments.

MCP endpoint: https://apibase.pro/mcp
Enter fullscreen mode Exit fullscreen mode

Step 1: Wire APIbase into your Sunpeak app

In your Sunpeak app config, add APIbase as an MCP server:

import { createApp } from "sunpeak";

const app = createApp({
  mcpServers: [
    {
      name: "apibase",
      url: "https://apibase.pro/mcp",
      transport: "streamable-http"
    }
  ]
});
Enter fullscreen mode Exit fullscreen mode

That's it. Your app now has access to all 500 tools. No API key needed for initial connection — auto-registration handles it.

Step 2: Discover available tools

Before you hardcode tool names, use the discover_tools prompt to find what's available:

curl -X POST https://apibase.pro/mcp \
  -H "Content-Type: application/json" \
  -d '{
    "jsonrpc": "2.0",
    "method": "prompts/get",
    "params": {
      "name": "discover_tools",
      "arguments": {"category": "travel"}
    },
    "id": 1
  }'
Enter fullscreen mode Exit fullscreen mode

This returns only the travel-related tools instead of dumping all 500 into context. You'll see tools like:

Tool What it does
amadeus.flights.search Search flights by origin/destination/date
amadeus.flights.price Confirm pricing for a specific flight
amadeus.airports.search Find airports by keyword
weatherapi.forecast Weather forecast for any city
finance.exchange.ecb_rates Currency exchange rates (ECB)

Step 3: Build the flight search component

Here's a Sunpeak component that searches flights and displays results:

import { useToolCall } from "sunpeak/hooks";

function FlightSearch() {
  const searchFlights = useToolCall("amadeus.flights.search");

  async function handleSearch(origin: string, destination: string, date: string) {
    const result = await searchFlights({
      origin,      // "JFK"
      destination,  // "LHR"
      date,         // "2026-05-15"
      adults: 1
    });

    // result.flights contains real Amadeus GDS data:
    // airline, price, currency, departure, arrival, stops
    return result;
  }

  // Sunpeak renders this as an interactive form inside ChatGPT/Claude
  return (
    <SearchForm onSubmit={handleSearch}>
      <Input name="origin" placeholder="From (e.g. JFK)" />
      <Input name="destination" placeholder="To (e.g. LHR)" />
      <DatePicker name="date" />
      <SubmitButton>Search Flights</SubmitButton>
    </SearchForm>
  );
}
Enter fullscreen mode Exit fullscreen mode

When a user interacts with your app in ChatGPT, they see a form. They fill in JFK → LHR → May 15. Your app calls amadeus.flights.search through the APIbase MCP endpoint. Real flight data comes back.

Step 4: Add weather and currency conversion

One endpoint, multiple tools. Let's add weather for the destination and currency conversion:

async function enrichFlightResult(flight: Flight) {
  const [weather, rates] = await Promise.all([
    callTool("weatherapi.forecast", {
      q: flight.destination_city,
      days: 3
    }),
    callTool("finance.exchange.ecb_rates", {
      base: flight.currency,
      symbols: "USD,EUR,GBP"
    })
  ]);

  return {
    ...flight,
    destination_weather: weather.forecast,
    price_in_usd: flight.price * rates.USD,
    price_in_eur: flight.price * rates.EUR
  };
}
Enter fullscreen mode Exit fullscreen mode

Three API calls. Three different providers (Amadeus, WeatherAPI, ECB). One MCP connection. Total cost: ~$0.04.

Step 5: Test locally

Sunpeak's inspector lets you test your app in a simulated ChatGPT/Claude environment without needing a paid account:

sunpeak dev
# Opens inspector at http://localhost:3000
# Simulates ChatGPT and Claude runtimes
Enter fullscreen mode Exit fullscreen mode

The inspector renders your forms, handles tool calls, and shows you exactly what the user would see. Hot module reloading means changes appear instantly.

Step 6: Deploy 

sunpeak build
sunpeak deploy
Enter fullscreen mode Exit fullscreen mode

Your app is now installable in ChatGPT and Claude. Users can search real flight prices, see destination weather, and compare prices in multiple currencies — all inside their AI assistant.

What you just built

An interactive MCP App that:

  1. Searches real flight prices via Amadeus GDS (not scraped, not cached — live airline data)
  2. Checks destination weather via WeatherAPI (3-day forecast)
  3. Converts currencies via ECB exchange rates (160+ currencies)
  4. Runs inside ChatGPT and Claude via Sunpeak MCP framework
  5. Pays per call via x402 USDC micropayments ($0.04 total for all three queries)

No API keys to manage. No separate provider accounts. No subscription fees.

The bigger picture

MCP Apps are a new category. They're not chatbots (no free-form text generation). They're not plugins (no OAuth dance). They're interactive applications that happen to live inside AI assistants.

The missing piece has always been data. Sunpeak gives you the UI framework. APIbase gives you 500 real-world data sources through one connection. Together, they let you build apps that would have taken weeks of API integration in days.

Some ideas for what to build next:

  • Real estate explorer — search properties (US Real Estate API), check walkability (Walk Score), get neighborhood demographics (Census)
  • Research assistant — search papers (DBLP, arXiv, OpenAlex), find authors, check citations
  • Travel planner — flights + hotels + weather + currency + local events (Ticketmaster) + restaurant reservations
  • Portfolio tracker — stock quotes (Finnhub), crypto prices (CoinGecko), exchange rates, company news

All of these are 3-5 tool calls through one MCP endpoint.

Try it yourself

1. Install Sunpeak:

pnpm add -g sunpeak
Enter fullscreen mode Exit fullscreen mode

2. Browse APIbase tools:

curl -s https://apibase.pro/api/v1/tools | python3 -m json.tool | head -50
Enter fullscreen mode Exit fullscreen mode

3. Full framework integration guide:
apibase.pro/frameworks#sunpeak

4. APIbase MCP endpoint:

https://apibase.pro/mcp
Enter fullscreen mode Exit fullscreen mode

APIbase is open source — GitHub. Sunpeak is open source — MIT license.

Top comments (0)