Webhook Integration

You have a feedback form and an n8n workflow, but they don't talk to each other yet. In this lesson you'll connect them with webhooks – your app sends feedback to n8n, n8n analyzes it and sends the enriched result back, and your app stores it in Neon. Same build loop as always: plan, build, preview, refine, ship to main.

What you'll build

• An outgoing webhook: your app → n8n (sends the feedback).
• An incoming webhook: n8n → your app (returns AI analysis).
• Storage of the enriched feedback in your Neon database.

1. Understanding APIs and webhooks

Two ways systems talk to each other:

  • API – you ask, they answer. Like ordering at a restaurant: your app asks a service for something and gets a response. You control when it happens.
  • Webhook – they notify you. Like a doorbell: a service pushes data to your app the moment something happens. The service controls when.

For your feedback system you'll use both directions: your app calls n8n (outgoing), and n8n calls your app back with the AI analysis (incoming webhook).

Outcome: You understand webhooks and why they fit this feature.

I understand webhooks and why they're useful with n8n

2. Plan the integration

Shape it with Claude in plan mode before building. You already have the feedback form (5.1) and the n8n AI workflow (5.2) – now plan how to wire them together.

Plan the feedback integration (in plan mode)
We're in plan mode. I want to connect my feedback form to my n8n workflow and store the results in Neon. The flow:
1.A user submits feedback in my app.
2.A Server Action sends it to an n8n webhook (include the user's id, the message, and a bit of context like browser and page).
3.n8n runs its AI analysis (sentiment, category, priority, summary) and sends the enriched result back to a webhook endpoint in my app.
4.My app stores the enriched feedback in a Neon table, tied to the user.
Plan this out, including the small n8n change (swap its Chat Trigger for a Webhook Trigger, and add a step to call my app back). Note that the n8n webhook URL should be stored in the Vercel vault, not hardcoded. Show me the plan before we build.

Outcome: You have a clear plan for the bidirectional webhook flow.

I planned the feedback integration with Claude

3. Build the integration

Approve the plan and let Claude build it. There are two sides – your app's code and the n8n workflow.

Build the app side
Build the app side of the plan:
1.A Server Action that sends the feedback (user id, message, browser, page, timestamp) to my n8n webhook URL – read that URL from my environment (store it in the Vercel vault first).
2.A webhook endpoint that receives the enriched feedback from n8n and stores it in a Neon table tied to the user (sentiment, category, priority, summary, plus the original fields). Create the table via a migration – the safe, tracked way Claude changes your database structure.
3.Verify the webhook request before trusting it (we'll harden this further in the next lesson).
Show me the changes and how to test them.

Then update n8n itself:

  • In your n8n workflow, replace the Chat Trigger with a Webhook Trigger (this gives you a URL your app posts to).
  • Add a final step that calls your app's webhook endpoint with the original data plus the AI analysis.
  • Copy the n8n Webhook Trigger URL and have Claude store it in the Vercel vault as your app's outgoing webhook URL.

Outcome: Both sides are wired – your app sends to n8n, and n8n sends the enriched result back into Neon.

I connected my app and n8n with webhooks

4. Test end to end and ship

Run the whole loop, then ship it to main.

Test the full loop and ship
Help me test the complete feedback loop:
1.Submit feedback in my app (in the preview or live site).
2.Confirm n8n received it, ran the AI analysis, and called my app back.
3.Confirm the enriched feedback landed in my Neon table with all fields (including sentiment, category, priority).
4.Once it works, commit and push to main so it deploys.

Outcome: Feedback flows from your app → n8n → back to your app → Neon, and it's live.

I shipped the end-to-end feedback integration