Construa um App de Busca de Voos em 10 Minutos com Sunpeak + APIbase

E se o seu plugin ChatGPT pudesse pesquisar preços reais de voos?

Não é uma simulação. Não é uma demonstração. Dados reais do GDS Amadeus — companhias aéreas, preços, escalas, horários de partida — dentro de um aplicativo interativo rodando no ChatGPT ou Claude.

É isso que estamos construindo neste tutorial. A pilha:

• Sunpeak — framework de código aberto para construir aplicativos MCP dentro do ChatGPT e Claude
• APIbase — gateway MCP unificado com 500 ferramentas de API do mundo real

Dez minutos. Aplicativo funcionando. Vamos lá.

O que é Sunpeak?

Sunpeak é um framework npm que permite construir aplicações interativas — com formulários, botões, gráficos e exibições de dados — que rodam dentro de assistentes de IA. Pense nisso como React para ChatGPT.

Os aplicativos são construídos sobre o MCP (Modelo de Protocolo de Contexto), então eles funcionam tanto no ChatGPT quanto no Claude sem bases de código separadas. Você desenvolve localmente com um inspetor de recarregamento a quente, e depois implanta uma vez.

pnpm add -g sunpeak
sunpeak create my-flight-app
cd my-flight-app

O que é APIbase?

APIbase é um único endpoint MCP que dá ao seu aplicativo acesso a 500 ferramentas de API — voos (Amadeus), clima (NOAA), cotações de ações (Finnhub), dados governamentais (Censo, CDC, Congresso), museus (Met, Rijksmuseum) e mais de 150 outros provedores.

Uma conexão. Sem chaves de API individuais para gerenciar. Pague por chamada com micropagamentos de x402 USDC.

Endpoint MCP: https://apibase.pro/mcp

Passo 1: Conecte o APIbase ao seu aplicativo Sunpeak

Na configuração do seu aplicativo Sunpeak, adicione o APIbase como um servidor MCP:

import { createApp } from "sunpeak";

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

É isso. Seu aplicativo agora tem acesso a todas as 500 ferramentas. Nenhuma chave de API necessária para a conexão inicial — o registro automático cuida disso.

Passo 2: Descubra as ferramentas disponíveis

Antes de codificar os nomes das ferramentas, use o discover_tools prompt para descobrir o que está disponível:

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
  }'

Isso retorna apenas as ferramentas relacionadas a viagens em vez de despejar todas as 500 no contexto. Você verá ferramentas como:

Passo 3: Construa o componente de pesquisa de voos

Aqui está um componente Sunpeak que pesquisa voos e exibe os resultados:

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 contém dados reais do GDS Amadeus:
    // companhia aérea, preço, moeda, partida, chegada, escalas
    return result;
  }

  // Sunpeak renderiza isso como um formulário interativo dentro do ChatGPT/Claude
  return (
    <SearchForm onSubmit={handleSearch}>
      <Input name="origin" placeholder="De (ex: JFK)" />
      <Input name="destination" placeholde