How to Add Webhooks to Your Vibe-Coded Apps

What Are Webhooks (and Why Should You Care)?

A webhook is a URL in your app that another service calls when something happens. Stripe calls your webhook when a customer pays. GitHub calls it when someone opens a pull request. Instead of polling an API every few seconds asking "anything new?", the event comes to you.

For vibe-coded apps, webhooks unlock the features that make products feel alive: instant payment confirmations, real-time notifications, automated workflows triggered by external events. Without them, your app is an island.

Receiving Webhooks: The Basic Pattern

Every webhook receiver follows the same structure: create an endpoint, parse the incoming payload, verify it's legitimate, and process the event. Here's the pattern in Next.js (the framework most vibe coding tools generate):

// app/api/webhooks/stripe/route.ts
import { NextRequest, NextResponse } from 'next/server';
import Stripe from 'stripe';

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!);

export async function POST(req: NextRequest) {
  const body = await req.text();
  const sig = req.headers.get('stripe-signature')!;

  // Verify the webhook is really from Stripe
  const event = stripe.webhooks.constructEvent(
    body, sig, process.env.STRIPE_WEBHOOK_SECRET!
  );

  // Handle different event types
  switch (event.type) {
    case 'checkout.session.completed':
      // Activate the user's subscription
      break;
    case 'invoice.payment_failed':
      // Send a friendly nudge email
      break;
  }

  return NextResponse.json({ received: true });
}

The key detail most tutorials skip: always verify the signature. Without verification, anyone can send fake events to your endpoint. Every major service (Stripe, GitHub, Clerk, Resend) includes a signature header — use it.

Sending Webhooks From Your App

If you're building a SaaS, your users may want to receive webhooks from you — "notify my Slack when a new report is ready." The pattern is straightforward:

• →Let users register a webhook URL in their settings
• →When an event occurs, POST a JSON payload to their URL
• →Include a signature header so they can verify it's from you
• →Implement retries with exponential backoff for failed deliveries

Testing Webhooks Locally

The biggest friction point for vibe coders is testing. Your local dev server isn't accessible from the internet, so Stripe can't reach it. Three solutions:

Common Webhook Patterns for Vibe-Coded Apps