Vibecode an AI Essay Tutor App

Build and deploy an AI writing coach for essays and AP Lang practice.

Introduction

30 Second Summary

Essay writing is one of those things that feels impossible at every stage. You stare at a blank page during brainstorming, lose your structure while drafting, and never know if your final version actually makes sense.

In this project, you will vibecode an AI-powered essay coaching app called EssayCoach using Lovable. Your app guides you through every stage of writing and helps you practice AP Lang essays with AI-generated passages and feedback.

What You'll Build

EssayCoach is a web app with two modes: an Essay Coach that walks you through brainstorming, outlining, drafting, and revising, and an AP Lang Practice section with AI-generated passages and guided thesis-building.

By the end of this project, you'll have:

A live, deployed AI essay coaching app you can share with classmates and link on college applications.
An Essay Coach mode that guides you step-by-step through brainstorming, outlining, drafting, and revising any essay.
An AP Lang Practice mode with AI-generated passages, plain-language breakdowns, and thesis-building guidance for Rhetorical Analysis and Argument essays.
Secret Mission: Add Synthesis essay practice with multiple AI-generated sources and source-tracking.

Are there any prerequisites?

You just need a free Lovable account. Everything runs in your browser, so there is nothing to install on your computer.

Set Up Your Lovable Project

Before you can build any features, you need a project workspace in Lovable where your app will live.

Lovable is an AI-powered app builder that turns plain-English descriptions into working web apps. You describe what you want, and Lovable generates the code, UI, and routing for you. This approach is called vibecoding. In this step, you'll create your EssayCoach project and make sure the AI features are ready to go.

In this step, get ready to:

Create a new Lovable project with your initial prompt.
Review and refine the generated landing page.
Enable the built-in AI connector for your app.

Create a new project in Lovable

Lovable builds your app from a single prompt. The more specific your description, the better the result.

On the Lovable dashboard, find the prompt input box in the center of the screen.
Copy and paste the following prompt into the text field:

Build me a webapp called EssayCoach with a clean, modern design. It should have a landing page with two main options: 'Essay Coach' (step-by-step essay writing help) and 'AP Lang Practice' (practice AP Language essay types). Use a calming color scheme (blues and whites) with clear navigation between the two modes. Add a simple header with the app name.

Click the send button to submit your prompt.

Lovable will take 30-60 seconds to generate your project. You'll see a live preview appear on the right side of the screen as it builds.

What is vibecoding?

Vibecoding means building software by describing what you want in natural language instead of writing code manually. You "vibe" with the AI by prompting it, reviewing the output, and refining until it matches your vision.

Your prompts are your building tool. The more detail you provide about layout, colors, and behavior, the closer the first result will be to what you imagine.

Review what Lovable generates

Lovable generates a full working app from your prompt, but it might not be perfect on the first try. Take a moment to check the output matches your expectations.

Look at the preview panel on the right side of your screen.
Confirm you see a header with the text EssayCoach at the top.
Confirm you see two cards or buttons labeled Essay Coach and AP Lang Practice.
Click each card to check that it navigates to a separate page.

Refine with follow-up prompts

If something looks off, type a follow-up message in the chat. For example: "Make the buttons bigger" or "Add more spacing between the cards" or "The color scheme should be lighter blues." Lovable will update your app in real time.

Don't see two separate pages?

If clicking the cards doesn't navigate anywhere, send this follow-up prompt: "Make each card navigate to its own separate page when clicked. Essay Coach should go to /essay-coach and AP Lang Practice should go to /ap-lang-practice."

Help me fix my Lovable app's navigation between pages.

Enable the built-in AI connector

Your app needs AI powers to tutor students through essays. Lovable has a built-in AI connector that handles all the backend setup for you. No API keys or external accounts required.

In your project, open the project settings.
Navigate to Connectors.
Select App connectors.
Find AI and click Manage permissions.
Confirm the permission is set to Always allow. This is the default setting, so it should already be selected.

What does the AI connector do?

The built-in AI connector lets your app make AI calls through a secure backend edge function that Lovable manages. It automatically generates a project-specific API key and handles streaming responses.

The default model for AI features in your app is Gemini 3 Flash (preview). You do not need to choose or configure this yourself.

Don't see the Connectors option?

Make sure you're inside your project (not on the main dashboard). The Connectors menu only appears when you have a project open. Look for a settings or gear icon within the project editor view.

Help me find the AI connector settings in my Lovable project.

Your project is set up and ready to build on. Next up, you'll create the Essay Coach mode that walks users step-by-step through writing any essay.

Build the Essay Coach Mode

Your EssayCoach landing page is live with two mode cards and a working AI connector. Now it's time to build the first real feature: the Essay Coach mode.

Students often struggle with essay writing because they don't know how to break the process into manageable steps. The Essay Coach mode solves this by walking users through four guided stages: brainstorming, outlining, drafting, and revising.

In this step, get ready to:

Prompt Lovable to create a 4-step Essay Coach flow with AI interactions.
Test the AI tutor with a real essay prompt and refine its responses.
Add a collapsible progress sidebar that tracks decisions across steps.

Prompt Lovable to build the Essay Coach flow

The Essay Coach page needs to walk users through a structured writing process. Each of the four stages has a specific role in helping someone go from a blank page to a polished essay.

In Lovable's chat panel, paste this prompt to build the Essay Coach page:

Build the Essay Coach page. It should have a text input where users paste or type their essay prompt/topic. Then guide them through 4 steps shown as a progress bar: Step 1 Brainstorm (AI asks guiding questions to generate ideas), Step 2 Outline (AI helps organize ideas into an essay structure with thesis, body paragraphs, conclusion), Step 3 Draft (a writing area where the AI gives suggestions as you write), Step 4 Revise (AI reads your draft and gives specific feedback on clarity, evidence, and flow). Each step should have a 'Next' button to move forward and a 'Back' button to go back.

What does this prompt ask for?

A text input where users enter their essay topic or assignment prompt.
A progress bar showing four labeled stages: Brainstorm, Outline, Draft, and Revise.
AI-powered interactions at each stage that provide specific guidance for that part of the writing process.
Next and Back buttons so users can move between stages at their own pace.

Wait for Lovable to finish generating the page.
In the preview panel, click the Essay Coach card on your landing page.
You should see a text input at the top, a progress bar with four labeled steps, and navigation buttons at the bottom.

Not seeing the Essay Coach page?

Make sure you clicked the Essay Coach card on the landing page. The new page only appears when you navigate to it.
If the progress bar is missing or the steps are out of order, send a follow-up message like: "Add a horizontal progress bar showing all 4 steps with the current step highlighted."
If clicking the card does nothing, tell Lovable: "Make the Essay Coach card on the landing page navigate to the Essay Coach page when clicked."

Help me troubleshoot why my Essay Coach page isn't showing up in Lovable's preview.

Test the flow and refine the AI responses

The best way to find problems in your app is to use it like a real student would. Testing with an actual essay prompt reveals whether the AI gives generic advice or genuinely helpful guidance.

In the preview, type a real essay prompt you've been assigned into the text input.
Click Next to move through each step and read the AI's responses.
Pay attention to the Brainstorm step. If the AI asks vague questions like "What do you think about this topic?" instead of targeted ones, you'll refine it next.

In the chat panel, paste this prompt to make the brainstorming questions more specific and helpful:

Make the AI tutor ask more specific, probing questions during brainstorming. For example, instead of 'What do you think about this topic?' it should ask things like 'What's one experience you've had that connects to this topic?' and 'Who might disagree with your position and why?'

Why refine the AI's questions?

Generic questions like "What do you think?" don't push students to think deeper. Specific questions that reference personal experience, counterarguments, or concrete evidence help users generate ideas they can actually use in their essay.

The more examples you give Lovable of what good questions look like, the better it tailors the AI's behavior.

In the preview, start the Essay Coach flow again with a topic.
At the Brainstorm step, you should now see specific, probing questions that push you to think about personal connections, potential counterarguments, and concrete evidence.

AI responses still feel generic?

Send another follow-up prompt with even more examples of the tone you want. The more concrete examples you provide, the better Lovable shapes the output.
Try being very specific: "In the brainstorm step, the AI should ask exactly 3 targeted questions. Each question should reference the user's specific topic and push them to think about evidence, opposing views, or personal experience."

Help me write a better Lovable prompt to get more specific AI tutor responses.

Add a collapsible progress sidebar

When users reach the Draft step, they often forget what they brainstormed or outlined earlier. A sidebar that summarizes their decisions from each completed step keeps everything accessible without cluttering the screen.

In the chat panel, paste this prompt to add the progress sidebar:

Add a sidebar that shows a summary of what the user has written/decided at each step, so they can reference their brainstorm while drafting. Make it collapsible so it doesn't take up too much space.

What does this sidebar do?

The sidebar displays a running summary of what the user has written or decided at each stage. Users can expand it to review their brainstorm while drafting, or collapse it to focus on writing.

This mirrors how a real writing tutor would say "Remember what you said earlier about..." to keep ideas connected throughout the process.

In the preview, go through the Essay Coach flow and complete at least the Brainstorm and Outline steps by entering content and clicking Next.
You should see a collapsible panel on the side that shows a summary of your brainstorm ideas. Clicking the collapse button should hide it.

Sidebar not appearing?

The sidebar may only show up after you complete at least one step. Make sure you've entered content in the Brainstorm step and clicked Next before looking for it.
If it still doesn't appear, try: "Make the sidebar visible on all steps after the first one. It should show even if it has minimal content."

Help me get my collapsible sidebar to show up in my Lovable app.

Your Essay Coach mode is complete with four guided stages and a progress tracker. Next up, you'll build the AP Lang Practice mode starting with Rhetorical Analysis essays.

Build AP Lang Practice — Rhetorical Analysis

Your Essay Coach mode is working and ready to guide anyone through brainstorming, outlining, drafting, and revising. Now it's time to tackle the second major feature of your app: AP Lang practice.

The AP Lang exam asks you to write essays under timed pressure, but the hardest part is often just understanding the passage and figuring out how to start. In this step, you'll build a Rhetorical Analysis practice mode that generates a passage, breaks it down for you, and walks you through forming a strong thesis.

In this step, get ready to:

Build the AP Lang Practice page with three essay type cards.
Add a passage breakdown feature that explains rhetorical strategies in plain language.
Build a thesis-formation guide with a template and AI feedback.

Prompt Lovable to build the AP Lang Practice page

The AP Lang exam has three essay types: Synthesis, Rhetorical Analysis, and Argument. Your practice page needs to present all three as options, with Synthesis greyed out as a future feature (that's your Secret Mission later).

Return to the Lovable chat input in your EssayCoach project.
Paste the following prompt to build the AP Lang Practice page:

Build the AP Lang Practice page. Show three essay type cards the user can pick from: 'Rhetorical Analysis' (analyze an author's choices in a passage), 'Argument' (respond to a quote with your position), and 'Synthesis' (coming soon - greyed out). When they pick Rhetorical Analysis, generate a short nonfiction passage (about 2-3 paragraphs, similar to AP exam style - could be from a speech, opinion article, or memoir) and display it with the prompt: 'Analyze the rhetorical choices the author makes to develop their argument.' Below the passage, add a 'Help me understand this passage' button and a 'Help me start my response' button.

What does this prompt do?

This prompt tells Lovable to create a selection screen with three cards representing each AP Lang essay type. When the learner picks Rhetorical Analysis, the AI generates a realistic nonfiction passage and displays it alongside two help buttons that you'll wire up next.

The Synthesis card is intentionally greyed out. You'll activate it in the Secret Mission at the end of the project.

Wait for Lovable to finish building. You'll see progress in the chat as it creates files and applies changes.
Check the preview panel on the right side of your screen.
Click on AP Lang Practice from your landing page to navigate to the new page.
Confirm you see three cards: Rhetorical Analysis, Argument, and Synthesis (greyed out).
Click the Rhetorical Analysis card and verify that a passage appears with the two help buttons below it.

Don't see the AP Lang Practice page?

Make sure you're clicking the AP Lang Practice button on your landing page, not the Essay Coach button.
If the page is blank or navigation doesn't work, tell Lovable: "The AP Lang Practice button on the landing page doesn't navigate to the AP Lang Practice page. Fix the routing."
If the Synthesis card is clickable instead of greyed out, tell Lovable: "Make the Synthesis card greyed out with a 'coming soon' label. It shouldn't be clickable."

Ask NextWork AI for help: My AP Lang Practice page isn't showing up correctly in Lovable. What should I check?

Build the passage breakdown feature

When students face a passage on the real AP exam, the hardest part is understanding what the author is actually doing and why. Your "Help me understand" button should feel like a patient tutor explaining the passage, not a dense textbook.

Paste this prompt into the Lovable chat to build the passage breakdown feature:

When the user clicks 'Help me understand this passage', the AI should break down the passage in plain language: what is the author's main argument, what rhetorical strategies are they using (like imagery, anecdotes, appeals to emotion/logic/credibility), and why those strategies matter. Display this as a clean, scannable breakdown with headers for each element. Make it feel like a patient tutor explaining, not a textbook.

What does this prompt do?

This tells Lovable to wire up the first help button so the AI analyzes the passage and displays a structured breakdown. The breakdown covers three things: the author's main argument, the rhetorical strategies used, and why those strategies are effective.

The "scannable with headers" instruction ensures the output is easy to read at a glance, not a wall of text.

Wait for Lovable to finish building.
In the preview, navigate to the Rhetorical Analysis flow by clicking the Rhetorical Analysis card.
Click the Help me understand this passage button below the generated passage.
Verify that the AI responds with a structured breakdown including headers for the main argument, rhetorical strategies, and their effects.

What is Rhetorical Analysis on the AP Lang exam?

On the real exam, Rhetorical Analysis (Question 2) asks you to analyze the language choices in a nonfiction text. You need to identify the rhetorical strategies the author uses and explain their effect on the audience.

The AP scoring rubric gives points for: Thesis (0-1 point), Evidence and Commentary (0-4 points), and Sophistication (0-1 point). Your app's breakdown feature directly helps with the Evidence and Commentary portion by teaching you to spot strategies.

AI response feels too generic?

If the breakdown is vague or doesn't reference the actual passage, tell Lovable: "Make the AI breakdown reference specific words, phrases, and sentences from the generated passage. It should point to concrete examples, not speak in generalities."
If the layout is hard to read (no headers, wall of text), tell Lovable: "Format the passage breakdown with clear headers: 'Main Argument', 'Rhetorical Strategies', and 'Why These Matter'. Use bullet points under each."

Ask NextWork AI for help: The AI breakdown of my passage doesn't feel specific or helpful. How can I improve my prompt?

Build the thesis-formation guide

Understanding the passage is only half the challenge. Students also struggle with turning their analysis into a defensible thesis statement. The "Help me start my response" button will guide them through a clear thesis-building process.

Paste this prompt into the Lovable chat to build the thesis guide:

When the user clicks 'Help me start my response', the AI should walk them through forming a thesis for rhetorical analysis. Guide them with: 1) Identify 2-3 rhetorical choices the author makes, 2) Explain what effect those choices have on the reader, 3) Put it together into a thesis sentence. Show an example thesis structure: '[Author] uses [rhetorical choice 1] and [rhetorical choice 2] to [effect on the reader/argument].' Then let them type their own thesis and get feedback on whether it's specific and defensible.

What does this prompt do?

This builds a guided three-step process: identify rhetorical choices, explain their effects, then assemble a thesis. The template gives students a clear structure to follow.

The text input at the end lets students practice writing their own thesis and get immediate AI feedback on whether it meets AP standards for being "specific and defensible."

Wait for Lovable to finish building.
In the preview, click the Rhetorical Analysis card to view a passage.
Click the Help me start my response button.
Verify that you see the three-step guide with the thesis template structure.
Type a practice thesis into the text input (for example: "The author uses vivid imagery and personal anecdotes to make their argument feel urgent and relatable").
Check that the AI gives you feedback on your thesis.

Test with a weak thesis too

Try typing something vague like "The author uses good rhetoric" to see if the AI pushes you to be more specific. A good tutor should challenge weak responses, not just accept everything. If the feedback is too soft, tell Lovable: "Make the thesis feedback more critical. If the thesis is vague or too broad, the AI should push the student to name specific rhetorical choices and specific effects."

Thesis input or feedback not working?

If there's no text input for typing your thesis, tell Lovable: "Add a text input field below the thesis template where users can type their own thesis. After they submit, show AI feedback on whether it's specific and defensible."
If the AI feedback doesn't appear after typing, check that your AI connector is still enabled in project settings under Connectors then App connectors then AI.

Ask NextWork AI for help: My thesis feedback feature isn't responding when I type in a thesis. What could be wrong?

Your Rhetorical Analysis practice mode is live. Students can now generate passages, get plain-language breakdowns, and practice forming defensible thesis statements with real-time AI feedback. Next up, you'll build the Argument essay practice with quote generation and a timed writing mode.

Build AP Lang Practice — Argument Essays

Your Rhetorical Analysis flow is live and working. Students can generate a passage, break it down, and start building a thesis.

Now it's time to tackle the second AP Lang essay type: Argument. On the real exam, students get a quote from a public figure on a debatable topic and have about 40 minutes to argue their position. Your app will generate these quotes, help students understand the claim, and guide them through building a defensible thesis.

In this step, get ready to:

Build the Argument essay practice flow with a generated quote and help buttons.
Add thesis-building guidance with a template and AI feedback.
Add an optional 40-minute timer and AP scoring criteria display.

Build the Argument essay practice flow

The Argument essay asks students to respond to a quote with their own position. Your app needs to generate a quote on a debatable topic and give students the same two help buttons they already know from Rhetorical Analysis.

Send this prompt to Lovable to build the Argument flow:

When the user selects 'Argument' from the AP Lang Practice page, generate a quote from a public figure about a debatable topic (similar to real AP Lang prompts - like a quote about technology, education, ambition, or resilience). Display it with the prompt: 'Write an essay that argues your position on the extent to which this claim is valid.' Add the same two help buttons: 'Help me understand the claim' and 'Help me start my response'.

What does this prompt do?

This tells Lovable to activate the Argument card you already have on the AP Lang Practice page. When a student picks it, the AI generates a realistic quote and displays the official AP-style prompt beneath it.

The two help buttons match the pattern from Rhetorical Analysis, so students get a consistent experience across both essay types.

Wait for Lovable to finish building.
In the preview, click the Argument card on the AP Lang Practice page.
Confirm you see a quote displayed with the prompt text beneath it, plus two buttons labeled Help me understand the claim and Help me start my response.

Not seeing the Argument flow?

If clicking the Argument card does nothing, tell Lovable: "The Argument card on the AP Lang Practice page isn't navigating to a new view. Make sure clicking it opens the Argument practice flow."

If the quote looks too short or generic, try: "Make the generated quotes longer (1-2 sentences) and from recognizable public figures on debatable topics like education, technology, or ambition."

help me fix my Argument essay flow in Lovable

Add thesis-building guidance for Argument essays

Understanding the claim is only half the battle. Students also need structured help deciding their position and forming a defensible thesis. This prompt builds out both help buttons with detailed guidance.

Send this prompt to Lovable to build the argument guidance:

For the Argument essay helper: 'Help me understand the claim' should explain what the quote is saying in plain language and what the debatable tension is. 'Help me start my response' should guide them to: 1) Decide if they agree, disagree, or partially agree, 2) Think of 2-3 pieces of evidence from their life, reading, or current events, 3) Form a defensible thesis. Show them the structure: 'While [acknowledgment of other side], [your position] because [reason 1] and [reason 2].' Let them type their thesis and get feedback.

What does this prompt do?

The first button ("Help me understand the claim") makes the AI translate the quote into plain language and surface the tension that makes it debatable. This addresses the common student struggle of not knowing what a quote is really saying.

The second button ("Help me start my response") walks students through the three decisions every Argument essay requires: take a position, gather evidence, and structure a thesis. The template gives them a concrete sentence pattern to follow.

In the preview, click Help me understand the claim and confirm the AI explains the quote in plain language.
Click Help me start my response and confirm you see the three-step guidance plus the thesis template.
Type a sample thesis into the input field and confirm the AI gives feedback on whether it's specific and defensible.

Make the feedback more specific

If the AI feedback on your thesis feels too generic (just "good job"), send a follow-up prompt: "When giving thesis feedback in the Argument helper, be specific about whether the thesis takes a clear position, acknowledges the other side, and includes concrete reasons. If it's vague, explain exactly what's missing."

Thesis input not showing up?

If there's no text input for typing a thesis, tell Lovable: "Add a text input field below the thesis template in 'Help me start my response' where students can type their own thesis and receive AI feedback on it."

help me get my thesis feedback feature working

Add a practice timer and scoring awareness

On the real AP Lang exam, students have about 40 minutes per essay. Adding a countdown timer helps students practice their pacing. You'll also add a quick-reference for the AP scoring rubric so students know what graders look for.

Send this prompt to Lovable to add the timer and scoring info:

Add an optional 40-minute timer that students can start when they begin writing (matching the AP exam pacing). Also add a small info icon that, when clicked, shows the AP scoring criteria: Thesis (0-1 points), Evidence and Commentary (0-4 points), Sophistication (0-1 point). Explain each briefly so students know what graders look for.

What do these features add?

The 40-minute timer mirrors the real AP exam's suggested pacing for Argument essays. It's optional so students can choose whether to practice under time pressure or take it slow.

The scoring info icon shows the official 6-point rubric breakdown. Thesis earns 0-1 points for a defensible claim. Evidence and Commentary earns 0-4 points for using and explaining evidence. Sophistication earns 0-1 points for nuanced argumentation that explores complexity.

What is the AP Lang scoring rubric?

Each AP Lang essay is scored on a 6-point scale across three categories. Thesis (0-1 point) rewards a clear, defensible position. Evidence and Commentary (0-4 points) rewards selecting strong evidence and explaining how it supports your argument. Sophistication (0-1 point) rewards nuanced thinking that explores complexities or tensions in the topic.

In the preview, look for the timer control on the Argument practice page.
Click the start button on the timer and confirm it counts down from 40 minutes.
Find the info icon and click it to confirm the scoring criteria appear with brief explanations for each category.

Timer or scoring icon missing?

If the timer doesn't appear, send a follow-up: "I don't see the 40-minute countdown timer on the Argument practice page. Add it as an optional feature with a visible start button."

If the scoring info icon isn't showing, try: "Add a small circular info icon (an 'i' in a circle) near the top of the Argument practice page. When clicked, it should show a popup or modal with the AP scoring criteria."

help me add the timer and scoring features

Your Argument essay flow is complete. Students can now practice both Rhetorical Analysis and Argument essays with guided help at every stage. Next up, you'll polish the whole app and deploy it live.

Polish and Deploy

Your Essay Coach and AP Lang Practice modes are fully functional. Students can work through brainstorming, outlining, drafting, and revising, and they can practice Rhetorical Analysis and Argument essays with AI-powered guidance.

In this step, you will add finishing touches that make your app feel professional, test everything end-to-end, and deploy it so anyone with a link can use it.

In this step, get ready to:

Add polish features like a "Generate new" button, dark mode, intro text, and smooth transitions.
Test both modes end-to-end with real essay prompts.
Deploy your app to a live public URL you can share.

Add finishing touches to the user experience

Small details separate a student project from something that feels like a real product. A way to generate new practice material, a dark mode toggle, and clear introductory text all make your app more usable.

Send the following prompt to Lovable to add these finishing touches:

Add these finishing touches: 1) A 'Generate new passage/quote' button so users can practice with different prompts without reloading the page. 2) Dark mode toggle. 3) A brief intro on the landing page explaining what the app does and who it's for (students who want to improve their essay writing). 4) Smooth transitions between pages.

What do these additions do?

The "Generate new" button lets students practice with fresh material without navigating away from the page or refreshing the browser.
Dark mode reduces eye strain during long study sessions and gives users control over their reading experience.
The landing page intro tells visitors exactly what EssayCoach does, so they know immediately whether it helps them.
Smooth transitions make navigation feel fluid instead of jarring between pages.

Wait for Lovable to generate the changes and review the preview.
Check that the landing page now has a short paragraph explaining the app and its audience.
Look for a dark mode toggle somewhere in the header or navigation area.
Navigate between pages and confirm the transitions feel smooth.

Refine anything that looks off

If the intro text is too long, tell Lovable to shorten it to 1-2 sentences. If the dark mode toggle is hard to find, ask Lovable to move it to the header. You are the designer here.

Dark mode toggle not appearing?

Sometimes Lovable places the toggle in an unexpected location like a settings menu. Try prompting: "Move the dark mode toggle to the top-right corner of the header so it's always visible."

If the transitions look choppy, prompt: "Make the page transitions smoother with a subtle fade animation."

Help me get my dark mode toggle and page transitions working correctly in Lovable.

Test both modes end-to-end

Before sharing your app, you need to verify that every feature works as expected. Testing with a real essay prompt reveals issues that casual clicking misses.

Navigate to the Essay Coach mode from the landing page.
Enter a real essay prompt you have been assigned or make one up (for example, "Should schools require community service for graduation?").
Walk through all four steps: Brainstorm, Outline, Draft, and Revise.
Check that the AI responds with specific, helpful guidance at each step (not generic filler).
Navigate back to the landing page.
Open AP Lang Practice and select Rhetorical Analysis.
Confirm that a passage generates, and test both the Help me understand this passage and Help me start my response buttons.
Go back and select Argument.
Confirm that a quote generates, and test both help buttons for the argument flow.
Try the Generate new passage/quote button on both practice types to confirm new content appears.
If the timer feature exists, start it and confirm it counts down from 40 minutes.

What to look for during testing

The AI gives helpful, specific responses (not vague advice like "think about your topic more").
The passage breakdowns explain rhetorical strategies in plain language a student can understand.
The thesis guidance provides a clear structure the student can follow.
Navigation works smoothly between all pages without errors or blank screens.

If any AI responses feel too generic or unhelpful, send a follow-up prompt to Lovable. For example: "Make the AI tutor ask more specific, probing questions during brainstorming. For example, instead of 'What do you think about this topic?' it should ask things like 'What's one experience you've had that connects to this topic?' and 'Who might disagree with your position and why?'"

AI not responding or giving errors?

If the AI features are not returning responses, check that your AI connector is still enabled. Return to your project settings, navigate to Connectors, then App connectors, then AI, and confirm it is active.

Help me troubleshoot why my AI features are not responding in my Lovable app.

Deploy your app to a live URL

Publishing your app makes it accessible to anyone with the link. This is a real, shareable URL you can send to classmates or include on college applications.

Click the Publish icon in the top-right corner of your Lovable project.
Configure your website address. You can enter a preferred URL or leave the field empty for Lovable to auto-generate one.
Review the other settings (access permissions, title, description) and adjust if you want.
Click Publish to deploy your app.
Wait for the deployment to complete. You will receive a pop-up with your live link.

What happens when you publish?

Lovable deploys a snapshot of your current project to a .lovable.app URL. On the free plan, anyone with the link can visit your app immediately.

Only the current version is deployed. If you make changes later, you will need to publish again by clicking Publish then Update to push those changes live.

Copy your live URL from the pop-up.
Open the URL in a new browser tab to confirm it loads correctly.
Share the link with a friend or classmate to get quick feedback on the experience.

Publish failing or URL not loading?

Lovable runs a security scan before publishing. If it flags an issue, follow the on-screen guidance to resolve it before trying again.

If your URL loads a blank page, try refreshing after 30 seconds. Deployments sometimes take a moment to propagate.

Help me fix my Lovable deployment issue.

You now have a live, shareable AI essay tutor that you vibecoded yourself. Next up, take on the Secret Mission to add Synthesis essay practice with multiple AI-generated sources.

Secret mission

Add Synthesis Essay Practice

The Synthesis essay is the hardest AP Lang question. It asks you to read multiple sources, pull from at least 3, and build an argument that synthesizes different perspectives. In this secret mission, you'll activate the greyed-out Synthesis card and build out a full practice mode with AI-generated sources and a source-tracking feature.

Clean Up Your Resources

This project runs entirely on Lovable's free tier, so there are no ongoing costs. Decide whether to keep your resources running, pause them to come back later, or delete them entirely.

Resources you used:

Lovable project (EssayCoach) with deployed .lovable.app URL.

Keep everything running

No action needed. Choose this if you want to keep your EssayCoach app live and accessible at its deployed URL. Since this project uses Lovable's free tier, there are no charges while your app stays published.

Pause - I'll come back to this later

Unpublish your app to take down the live URL while keeping the project in your Lovable editor. You can re-publish it at any time.

Open your EssayCoach project in Lovable.
Go to Project settings.
Click Unpublish project, then click Unpublish.

Your live URL becomes inaccessible, but your project remains in the editor for future edits or re-publishing.

Delete - I don't want to use this again

Permanently delete your EssayCoach project. This removes the project, its deployed URL, and all its contents. This action cannot be undone.

Open your EssayCoach project in Lovable.
Go to Project settings.
Scroll down to the Danger Zone section.
Click Delete Project and confirm the deletion.

Nice Work!

You just vibecoded a complete AI-powered essay writing tutor from scratch using Lovable.

You've learned how to:

Vibecode a multi-feature webapp by prompting Lovable, turning an idea into a real product without writing code manually.
Build an Essay Coach flow that guides users through brainstorming, outlining, drafting, and revising with AI-powered tutoring at each stage.
Build AP Lang practice for Rhetorical Analysis and Argument essays with AI-generated passages, plain-language breakdowns, and thesis-building guidance.
Secret Mission: Added Synthesis essay practice with multiple AI-generated sources and a source-tracking feature for planning arguments across 3+ texts.

Ready to quiz yourself?