Build a Web App with an AI Backend | Intro to AI Automation

Why this matters

A prospect fills in the contact form on your website at 8 p.m. The message lands in a shared inbox. Nobody sees it until the next morning, and by then they have booked a call with the firm that answered first.

Most small firms lose leads this way, not because they are slow but because a person has to notice the email, copy the details somewhere and write a reply.

In this module you remove the person from the middle. You build a real contact form, then connect it to an n8n workflow. Every submission is saved to a Google Sheet and gets a personal reply in seconds, at any hour. This is where Modules 1 and 2 come together.

Robert’s intro to this module

What you’ll build

A "Have a Question?" contact form built in Lovable from one plain-English description, with no coding.

Behind it, an n8n workflow: a webhook that receives each submission, an AI agent that saves the lead to Google Sheets and sends a personal reply from Gmail, and a response that tells the visitor "Thanks! Your message has been received."

It is the biggest build in the course (about 15 minutes). Do Module 2 first if you have not: this one moves faster through the agent, model and Sheets steps.

What you need

Nothing to start the practiceLovable, n8n, the webhook address, Google Sheets and Gmail are all practice copies inside the lesson.
A Lovable account, to build it for realFree to start at lovable.dev.
An n8n accountThe same one from Module 2, or a free trial at n8n.io.
A Google accountFor the leads sheet and the Gmail account the replies come from.
A model for the agentYour OpenAI API key from Module 2, or n8n’s free AI credits.

Concepts

4 ideas you’ll use in the practice.

Describe the app instead of coding it

Lovable builds a working web page from a description in plain English: the fields, the button text, what happens when someone submits.

The description in this lesson also tells Lovable where to send each submission: to a web address kept in a secret, which you fill in later. You can change the wording and the fields; keep that part.

A webhook connects two apps

A webhook is a web address that starts a workflow whenever something sends data to it. The form sends each submission there, and n8n starts the agent.

In Module 2 a person had to type in the chat. Here the visitor sets it off, and nobody needs to be watching.

Secrets keep addresses out of the page

The webhook address goes into Lovable as a secret named N8N_WEBHOOK_URL, not into the page itself. That keeps it out of the page code, makes it easy to change, and makes it harder for strangers to abuse.

The same idea applies to every key and password you use in automations: store it as a secret or a credential, never in plain text.

Publish means switch it on

An n8n workflow only runs on its own after you publish it. Before that, the webhook only works while you are testing in the editor.

Lovable is the same: publishing gives the form a public address you can link to or put on your site.

Practice

Do every step yourself in a practice copy of the real tool. It checks your work, and “Do it for me” finishes any step you get stuck on.

Lovable + n8nBuild a Web App with an AI Backend93 steps · ~15 min · nothing touches your real accounts

Start the practice →Prefer to read? Step-by-step guide

Do it for real

Now repeat it in your own account. Tick each step as you go.

In Lovable, start a new project and paste the form description from the download below. Change the heading and fields if you like.
In n8n, start a new workflow with a Webhook trigger (method POST). Set it to respond using a Respond to Webhook node.
Add an AI Agent with a chat model, a Google Sheets tool (Append Row to a sheet with Name, Email, Question and Feedback columns) and a Gmail tool (Send).
Build the agent’s message from the form fields with expressions, like {{ $json.body.name }}, then add Respond to Webhook at the end.
Publish the workflow and copy the production webhook URL.
In Lovable, add a secret named N8N_WEBHOOK_URL with that URL.
Submit the form with your own email address. Check for the new row in the sheet and the reply in your inbox, then publish the Lovable app.

Downloads

Lovable form description (.txt)The exact description from the lesson, ready to paste into Lovable.
Agent system prompt from Module 2 (.txt)A model for writing your agent’s instructions.

Quick check

3 questions to check you’ve got it.

1. What does the webhook do in this build?

It designs the form
It receives each form submission and starts the n8n workflow
It sends the reply email

Show the answer

It receives each form submission and starts the n8n workflow. The webhook is the doorway between the two apps: the form sends data to it, and n8n starts running.

2. Why is the webhook URL stored as a secret in Lovable?

So it stays out of the page code and is easy to change
Because Lovable cannot show web addresses
To make the form load faster

Show the answer

So it stays out of the page code and is easy to change. A secret keeps the address out of the code anyone can read, and you can swap it without rebuilding the form.

3. The form works while you test in n8n, but not after you close the editor. What did you forget?

To add memory
To publish the workflow
To refresh the Google Sheet

Show the answer

To publish the workflow. Until the workflow is published, the webhook only runs while you are testing it in the editor.

Course complete

You reached the end of Intro to AI Automation

That completes Intro to AI Automation. You have built all three kinds of AI tool: one you chat with, one that works on request, and one that runs by itself. Keep going with AI at Work: Start Here, which covers what is safe to paste into an AI tool, or Better Prompts, for the prompt habits behind every module so far.

Pick your next course →