Build ANYTHING with n8n + Lovable

Overview

This guide follows Jack Roberts’ live build of a simple fitness‑coach web app. The app lets a user submit a goal, sends that goal to an n8n workflow, runs an AI agent (Claude) to generate a response, and displays the response in the Lovable front‑end.

Prerequisites

• A Lovable account (free tier is enough for the demo). lovable.dev
• An n8n account or self‑hosted instance. n8n.io
• An OpenAI/Claude API key for the AI agent.
• Basic knowledge of webhooks and JSON.

Step‑by‑Step Instructions

1. Create the n8n Workflow

1. Log into n8n and click New Workflow.
2. Add a Webhook node:
   • Method: POST
   • Path: /fitness-goal
   • Copy the Test URL (you’ll need it later).
3. Add an Execute Command node (or HTTP Request if you prefer) to call the Lovable webhook. For the demo, we’ll use a Respond to Webhook node after the AI step.
4. Add an AI Agent node (Claude via Lovable integration):
   • Set the System Prompt to: "You are a fitness coach AI. Generate a personalized plan for the goal provided."
   • Map the incoming goal field from the webhook to the agent’s input.
5. Connect the nodes: Webhook → AI Agent → Respond to Webhook.
6. Activate the workflow.

2. Build the Lovable Front‑End

1. In Lovable, type a prompt like:

   "Help me create a web app called Fitness Coach where a user can submit a fitness goal and see a personalized plan. Use a simple form and display the response below."

2. Lovable will generate a preview. Use the Edit panel to tweak:
   • Add a Text Input labeled “Your Goal”.
   • Add a Button labeled “Get Plan”.
   • Add a Text Display area for the AI response.
3. In the Actions section of the button, set the Webhook URL to the n8n webhook URL from step 1.
4. Map the button’s input to the goal field expected by n8n.
5. Test the form: submit a goal and watch the AI response appear.

3. Wire Lovable to n8n

1. In Lovable’s button action, choose Send to Webhook.
2. Paste the n8n webhook URL.
3. Ensure the payload is JSON: { "goal": "<user input>" }.
4. In n8n, confirm the Respond to Webhook node returns the AI output as JSON.
5. In Lovable, map the response JSON field (e.g., response) to the Text Display area.

4. Test and Troubleshoot

• Test Event: In n8n, click Execute Workflow → Listen for Test Event. Submit a goal from Lovable; the payload should appear.
• Common Issues:
  • Webhook not firing: Verify the method is POST and the URL is correct.
  • AI agent not responding: Check the system prompt and API key.
  • Response not showing: Ensure Lovable is mapping the correct JSON field.

Tips & Gotchas

• Use the “Listen for Test Event” in n8n to debug payloads.
• Lovable’s Edit History lets you revert accidental changes.
• Keep the AI prompt concise; long prompts can cause rate‑limit errors.
• For production, switch the n8n webhook from Test URL to Production URL.
• If the AI response is too long, truncate it in n8n before sending back.
• Use Lovable’s Design Inspiration feature to quickly style the UI.

All steps are taken directly from Jack Roberts’ video “Build ANYTHING with n8n + Loveable” (2025‑03‑03). The workflow and UI elements match the demo shown in the video.