Small Next.js app that signs in via Vercel OAuth, pulls every failed deployment from the Vercel REST API, and graphs how often they've broken your day. Styled after the Vercel dashboard (Geist tokens, hairline borders, mono IDs).
- Go to https://vercel.com/dashboard/integrations/console and click Create.
- Fill out the form. Required fields include a name, logo (any PNG ≥ 256px), a privacy policy URL, and a contact email — Vercel is more lenient about real-world quality than Google but every field needs something.
- Set the Redirect URL to
http://localhost:3000/api/auth/vercel/callbackfor local dev. Add your production URL later:https://<domain>/api/auth/vercel/callback. Make sure to update this in your integration settings before deploying. - Under API Scopes select Read for
deployment,project,team, anduser. Nothing else. - Save. The integration gets a Community badge — that means it's
installable from its URL (
https://vercel.com/integrations/<slug>) but not listed on the public Marketplace. No review needed. - Open the integration's settings, copy the URL Slug, Client ID, and
Client Secret into
.env.local.
Unlike Google's Gmail API, Vercel doesn't require a security assessment or verification process to allow internet users to install the integration. Anyone with the install URL can use it immediately.
You can use npm or yarn if preferred.
cp .env.example .env.local
# fill in AUTH_SECRET, VERCEL_INTEGRATION_SLUG, VERCEL_CLIENT_ID, VERCEL_CLIENT_SECRET
npm install
npm run devOpen http://localhost:3000, click Continue with Vercel, install the integration on your personal account or a team.
auth.ts— reads an HMAC-signed session cookie vianext/headers. No NextAuth, no third-party auth libraries. This keeps dependencies light and the auth flow transparent.app/api/auth/vercel/start/route.ts— generates a CSRFstate, sets it in a cookie, redirects to Vercel's integration install URL.app/api/auth/vercel/callback/route.ts— validates state, exchanges the code for an access token viaPOST /v2/oauth/access_token, sets the signed session cookie.lib/vercel-api.ts— paginatesGET /v6/deployments?state=ERRORto build the list the dashboard renders.app/components/dashboard.tsx— client component. Hydrates fromlocalStorage, fetches fresh data via server action, renders the charts, legend, and Worst Days table.
Standard Vercel deploy. Add the four env vars in project settings, then add and update the production redirect URI in your integration settings:
https://<your-domain>/api/auth/vercel/callback
Feel free to raise issues or PRs if you find bugs or have feature ideas. Thank you!