←Back/Engineering/Claude/Replit
IntermediateEngineering

How to Vibe-Code a Full-Stack Web App Using a Replit AI Agent

Give Replit Agent a complete product blueprint, build the app in working slices, and steer each feature with real role, integration, and production tests.

How to Vibe-Code a Full-Stack Web App Using a Replit AI Agent

Source episode · 12:54

How I AI: How a 91-Year-Old Vibe-Coded a Complex Church App with Claude and Replit

with Claire Vo

12:54 to 27:00: John Blackman copies Claude’s blueprint into Replit Agent, tours the resulting multi-tenant app, adds a volunteer feature, corrects role scope, and explains a production-only PDF attachment failure.

Read the full episodeWatch on YouTubeListen on SpotifyListen on Apple

Before you start

What you need

  • An approved blueprint with user stories, permissions, data, integrations, and architecture
  • A Replit project with the required secrets and services configured
  • Test accounts and representative data for every role
  • Expected outputs for reports, generated files, emails, and external lookups

What you’ll make

A deployed full-stack application whose primary journey, tenant boundaries, reports, files, and integrations have been exercised with real examples.

Tools used

Step by step

The workflow

Follow the sequence once, then adapt the prompts, checks, and handoffs to your own setup.

6 steps

Step01

Initiate the Build with Your Blueprint

Paste the approved blueprint into Replit Agent as the source of truth. John copies the Claude plan directly into Replit, including the roles, requirements, and development sequence.

Example prompt
Build this application from the blueprint below. Start by summarizing the primary journey, roles, permission boundaries, core entities, integrations, and MVP. Then propose the first working slice, its files, and its acceptance checks before writing code.

[Paste approved blueprint]
Step02

Observe the Initial Code Generation

Let the agent scaffold the project, database, frontend, and backend, but judge progress through a runnable slice. Begin with one role and one complete path rather than accepting a large pile of generated files.

Example prompt
Implement the first working slice: [role] can [action] and see [result]. Create the required schema, server behavior, and interface. Run the app with representative data and show the exact route and account I should use to test it.
Step03

Prompt for Complex Features and Integrations

Add advanced capabilities one at a time with real inputs and outputs. John’s app combines tenant-aware administration, Excel reports, OpenAI VIN lookup, SendGrid email, signatures, and generated passport PDFs.

Example prompt
Add [feature or integration] for [role]. Input: [representative input]. Expected output: [exact record, report, file, email, or API result]. Keep these permission boundaries: [rules]. Handle these failures: [cases]. Demonstrate the feature with the representative input before moving on.
Step04

Iterate by Adding New Functionality

Describe each new feature through the user and the operational result. For volunteer name tags, John asks for a local administrator input page that populates a volunteer list, which requires both a new data model and interface.

Example prompt
Add a volunteer workflow for local administrators. A local administrator can create volunteers only for their own event, capture [fields], view the event’s volunteer list, and export printable name tags using [template]. System administrators can view all events. Show the schema change and test both roles.
Step05

Guide and Correct the AI Agent

Watch for the moment the agent’s plan diverges from the intended behavior. John uses wait and stop when it heads down a rabbit trail, then redirects it to the exact role and event scope that failed.

Example prompt
Stop. Preserve [working behavior]. The current change is wrong because [observed behavior]. For [role] in [tenant or event], the expected result is [result]. Explain the smallest correction, make only that change, and rerun this reproduction: [steps].
Step06

Test Features and Provide Feedback

Exercise the feature in the running application whenever the agent says it is ready. Check every affected role, real outputs, and the deployed path; John found that passport attachments worked in development but required a different PDF format in production.

Example prompt
Test this feature with the following matrix: [roles and accounts], [desktop and mobile paths], [representative records], and [integration or file outputs]. Then test the deployed URL with production services enabled. Report each result, the relevant logs for failures, and the smallest fix required.

What good looks like

  • The primary participant journey completes on desktop and mobile
  • System administrators can access all permitted organizations while local administrators remain scoped to their own
  • Reports, generated files, messages, and external lookups return the intended real output
  • The deployed application passes the same role and journey checks as the development preview

Build your next product with ChatPRD

Turn an idea into a PRD, user stories, and a plan.

Try ChatPRD free

After the steps

Runbook notes

How to recover when the loop fails and where human judgment helps.

Recover

If it goes sideways

The agent starts changing unrelated code or solving a different problem.
Say wait or stop, restate the behavior that must remain unchanged, and resume with one smaller task and one observable result.
A feature works for the system administrator but exposes or hides the wrong local data.
Name the failing role, tenant, and record, then test the same action with accounts from both sides of the boundary.
A report or integration returns plausible placeholder output instead of a real artifact.
Provide representative input, inspect the generated file or API response, and require the agent to show the service path and error handling.
A file or email works in development but fails after deployment.
Reproduce the deployed path, inspect environment variables and logs, and compare the production file format and storage behavior before changing application logic.

Keep building

Related workflows

Create a Meta-Workflow to Continuously Improve Your AI Assistant's Performance
advancedPersonalClaude

Create a Meta-Workflow to Continuously Improve Your AI Assistant's Performance

Design a weekly meta-workflow that analyzes your interactions with your AI assistant to make it smarter. This system learns your writing style from edits, suggests new automations for repetitive tasks, and helps you filter valuable AI techniques from hype.

Open
Build a Self-Improving AI Morning Brief to Capture Action Items and Learn Company Jargon
intermediateProductClaudeGranola

Build a Self-Improving AI Morning Brief to Capture Action Items and Learn Company Jargon

Create a daily AI workflow that summarizes yesterday's meetings, identifies urgent tasks, and proactively learns internal company terms it doesn't understand. This keeps your AI assistant's knowledge current and highly relevant to your work.

Open
Automate Your Weekly Planning with an AI-Powered PM Assistant
intermediateProductClaudeNotion+1

Automate Your Weekly Planning with an AI-Powered PM Assistant

Build a recurring AI task that automatically gathers updates from your calendar, Slack, and notes to suggest weekly priorities and prepare you for upcoming meetings. Start every Monday with a clear, comprehensive plan without the manual effort.

Open

Start shipping
better products.

Join 100,000+ product managers who use ChatPRD to write better docs, align teams faster, and build products users love.

Start building freeRequest a demo
Free to start
No credit card
SOC 2 certified
Enterprise ready