Aplicação para capturar, armazenar e inspecionar requisições de webhook durante o desenvolvimento. Também permite selecionar payloads recebidos e gerar um handler TypeScript com validação Zod usando Gemini.
- Captura webhooks de qualquer método HTTP em
/capture/* - Lista eventos recebidos com paginação infinita
- Exibe método, rota, IP, headers, metadados e body
- Exclui eventos armazenados
- Gera handlers TypeScript a partir dos payloads selecionados
- Disponibiliza documentação interativa da API
- Web: React, Vite, TanStack Router, TanStack Query e Tailwind CSS
- API: Fastify, Zod, Drizzle ORM e AI SDK
- Dados: PostgreSQL
- IA: Google Gemini (
gemini-2.5-flash)
Pré-requisitos: Node.js, pnpm, Docker e uma chave da Google Generative AI.
pnpm install
docker compose -f api/docker-compose.yml up -d
cp api/.env.example api/.envPreencha api/.env:
DATABASE_URL="postgresql://docker:docker@localhost:5432/webhooks"
GOOGLE_GENERATIVE_AI_API_KEY="sua-chave"Prepare o banco:
pnpm --filter api db:migrateInicie a API e o frontend em terminais separados:
pnpm --filter api dev
pnpm --filter web dev- Interface:
http://localhost:5173 - API:
http://localhost:3333 - Documentação da API:
http://localhost:3333/docs
Envie uma requisição para qualquer caminho abaixo de /capture:
curl -X POST http://localhost:3333/capture/minha-integracao \
-H "Content-Type: application/json" \
-d '{"event":"payment.created","amount":100}'O evento aparecerá na interface para inspeção.
| Método | Rota | Descrição |
|---|---|---|
ANY |
/capture/* |
Captura uma requisição de webhook |
GET |
/api/webhooks |
Lista os webhooks capturados |
GET |
/api/webhooks/:id |
Retorna os detalhes de um webhook |
DELETE |
/api/webhooks/:id |
Exclui um webhook |
POST |
/api/generate |
Gera um handler para os webhooks selecionados |
api/ API Fastify, rotas, schema e migrations do banco
web/ Interface React para listar e inspecionar webhooks
Opcionalmente, use pnpm --filter api db:seed para recriar o banco com 60 eventos fictícios do Stripe.