How to Use Lovable AI: Build Your First App Step by Step
A complete Lovable walkthrough rebuilt from a real beginner build — structured prompts, Plan mode, Google Calendar, bug fixes, security scan, and publishing your app as a PWA. Every step has a screenshot.
Lovable in short
- Structure your first prompt around two things: what the app does (the goal) and how the user moves through it (the flow). One or two features is enough to start.
- Switch the composer from Build to Plan before sending. Lovable asks clarifying questions first, then writes a plan you can correct before any code runs.
- When something is off, fix it with precise plain-English prompts — "start tasks at the nearest 15-minute increment, never in the past" beats "make times right".
- Before publishing, run the in-depth security scan — "Try to fix all" is free. A plain-English prompt turns the app into a PWA you can install on your phone.
Lovable AI Tutorial for Beginners - Build Your First App
Source video by:Kevin Stratvert11:40
Screenshots come from the source video and are credited with timestamp deep links. The walkthrough text is our own, based on the full transcript — facts match the recording.
This tutorial is an independent, illustrated summary for readers who prefer text. To support the creator, watch the original video on the Lovable channel partnership linked above.
Build an app in Lovable, step by step
- 1
Tour the workspace
After you sign up you land in the Lovable workspace. The left sidebar holds Home, Search, Resources, and Connectors, with your recent chats below. The center prompt box is where every app starts; template collections sit just below it if you need inspiration.
The Lovable workspace: prompt box in the middle, chats and connectors on the left.Watch at 0:40 - 2
Write a structured first prompt
Before typing anything, get clear on the goal (what the app does) and the flow (how the user moves through it). This build is a voice-to-calendar app: you ramble tasks, it schedules them on Google Calendar. State constraints — every task is 30 minutes unless said otherwise, the user confirms before saving — and describe the look with words like clean, sleek, minimal. Finish with: "Ask me any questions you need in order to fully understand what I want."
The full first prompt: goal, flow, constraints, look and feel, and an invitation to ask questions.Watch at 3:20 - 3
Switch to Plan mode before sending
Open the Build dropdown under the prompt box and choose Plan — "discuss before building" (toggle with Alt+P). In Plan mode Lovable asks clarifying questions and writes a plan first, which stops it from building the wrong app. For a first project this is the single highest-value habit.
The Build/Plan dropdown: choose Plan to discuss before building.Watch at 2:40 - 4
Answer the clarifying questions
Lovable comes back with questions — visual picks like the accent color, then functional ones: use the free built-in voice transcriber or a third party, connect Google Calendar through the Lovable connector, and so on. Answer honestly; vague answers here become vague features later.
Clarifying questions: pick an accent color, then answer the functional choices.Watch at 4:12 - 5
Read the plan and approve it
The plan is split into plain sections — look and feel, screens and flow, how it works — plus technical details. Non-technical readers should still check the screens and flow: that is your app on paper. If something is wrong, type what to change in the prompt box instead of approving, then hit Approve when it matches your idea.
The generated plan: review it, request changes, then approve.Watch at 5:00 - 6
Connect Google Calendar when prompted
Halfway through the build, Lovable pauses and asks you to connect your Google Calendar. Click the connect button, sign in with your Google account, and link it to the project. For this demo the calendar is hard-coded to your own account; later you can switch to per-user sign-in so everyone connects their own.
Mid-build, Lovable asks you to link your Google Calendar.Watch at 5:35 - 7
Test it by speaking your tasks
When the app preview appears, click the microphone and actually ramble: "I need to send the TPS report with a new cover sheet to Bill, and the rundown of the client list to Charles." Stop the recording, and the app parses your speech into task cards waiting for your approval.
First voice test: the app transcribes your rambling into tasks.Watch at 5:50 - 8
Fix behavior with precise prompts
First bug: tasks were scheduled at the exact second you spoke them. The fix is a precise instruction: "The tasks should be set to start at the nearest 15-minute increment (and not in the past), not at the current time." Lovable marks the change as a small card — precise prompts like this are why you got the plan right earlier.
A precise fix prompt snaps tasks to 15-minute boundaries.Watch at 8:00 - 9
Teach it your date language
Say "call Kevin tomorrow at 10 a.m." and it scheduled 3 a.m. — the app cannot parse relative dates yet. Prompt the rule set: recognize tomorrow, yesterday, Friday at 3 p.m.; morning means before 11 a.m., afternoon is 1-4 p.m.; next Monday is the following one, not this upcoming one. The more specific your examples, the fewer fix cycles later.
Voice date rules: when examples and duration examples, spelled out.Watch at 7:40 - 10
Debug from screenshots in Plan mode
Times are still off by about seven hours — a timezone bug. Paste a screenshot of the wrong times directly into the prompt window and say what you observe: "This looks like a timezone issue because the times are off by about 7 hours." Switch back to Plan mode for the fix, and if the plan is too technical, tell it: "I'm non-technical, can you explain this in language I understand?"
Screenshot the bug, describe it, and let Plan mode produce the fix.Watch at 8:55 - 11
Publish and claim your URL
Before publishing, one last prompt switches the app from your calendar to per-user sign-in so nobody else touches your events. Then hit Publish in the top right: you get a free lovable.app URL (custom domains are a Pro feature), pick public visibility, and set the title, description, and social image.
Publish flow: your free lovable.app URL and app metadata.Watch at 9:45 - 12
Run the security scan and add the PWA
Lovable recommends an in-depth security scan before going live — especially valuable for AI-generated code. Fixes applied through "Try to fix all" cost no credits. Then add the phone-install polish with one prompt: "Make it so I can install this as an app icon on my phone. Use a teal microphone for the icon." Lovable generates the PWA manifest and touch icons.
The security scan is free to fix — and the PWA prompt makes it installable.Watch at 10:40 - 13
Install it on your phone
Publish the update, open the URL in your phone browser, and tap the Share icon. Choose Add to Home Screen, confirm with Add — and the app icon lands on your home screen. Tap it and it runs full-screen like a native app, no App Store involved.
Add to Home Screen turns the published app into a phone icon.Watch at 11:00