Replit is a coding platform that runs entirely in your browser. Its Agent is an AI assistant that builds an app from a description: it plans the work, writes the code, starts the app and checks that it runs. You steer by chatting.
This recipe walks through building and publishing a small first app. The example is a one-page event RSVP site, but the same steps work for most simple ideas.
Replit has renamed and reorganised Agent's modes more than once, so older tutorials (and some of Replit's own older pages) use different names. We've checked what follows against Replit's current docs, but if your screen differs, trust what you see and the docs.
What you'll need
- A Replit account. A free account is enough to build and try an app.
- A clear idea of the outcome you want, in two or three sentences.
Plans, limits and prices change. Replit's docs note, for example, that the Starter plan includes one free published app that goes down after 30 days, and that Plan mode needs a paid Core plan. Check replit.com/pricing for what applies to you now.
Step 1: Start a new app from a prompt
From the Replit home screen, describe what you want to build in the prompt box and choose the type of output. For a first project, Replit's own quickstart recommends choosing Website and starting in Free mode, which is the no-cost way to try Agent.
A good prompt defines the outcome and how you'll know it works, and keeps the scope small. Here's one to try:
Build a simple website for a community picnic on Saturday 14 June. It should have: - A page listing three activities with a time for each. - A page showing the picnic location and what to bring. - An RSVP form with name and number of guests, and a thank-you message after submitting. Make it look cheerful on both phone and desktop. Success: I can open the site, read the activities, and submit an RSVP.
Notice what the prompt leaves out on purpose: logins, payments, a database and outside services. Replit's quickstart makes the same suggestion. You can add these later, one at a time.
Step 2: Let Agent plan and build
Once you send the prompt, Agent works through the job in the chat panel: it plans, creates the app, starts it and checks the result. You'll see its progress as it goes. Wait until the app appears in the Preview pane.
If you're on a plan that includes it, Replit also has a Plan mode. With the Plan toggle on, Agent brainstorms and maps out the work with you, with no code changes, until you approve a task list. Then you choose to build. With Plan off, Agent builds straight away. Plan mode is worth using for bigger ideas, since it's cheaper to fix a plan than finished code.
Step 3: Test it like a visitor
Open the Preview and use the app the way a visitor would:
- Read the activities page and click through the navigation.
- Submit the RSVP form with a sample name, and check you see the thank-you message.
- Shrink the preview to phone width and see if the layout still works.
Notice what's wrong, but don't fix it yet. Make a list.
Step 4: Make one focused change at a time
Replit's quickstart recommends improving one thing at a time once the core works. That's good advice because it's easier to see which change caused a problem. A good follow-up reads like this:
On the RSVP page, show the guest's own RSVPs for this visit under the form so they can see they've signed up. Keep everything else the same.
Be specific about what should change and what should stay the same. If you only describe a feeling ("make it nicer"), you'll get surprises.
If Agent shows an error, copy the message into the chat and ask what it means and how to fix it. Our bug-fixing prompt recipes have patterns for this.
Step 5: Use checkpoints to undo mistakes
Sooner or later a change makes things worse. Replit saves checkpoints as Agent works, so you can go back. According to the docs:
- In the Agent chat, find the message before the change you want to undo and use the rollback option next to it. This restores your project to that point.
- Or open the Agent tab, pick a checkpoint and choose Rollback to here, then confirm.
Two details matter:
- Databases are separate. By default a rollback doesn't touch your development database. To include it, select Database under Additional rollback options. Rolling back the code doesn't restore the database, and restoring the database doesn't restore the code.
- Published apps can't be rolled back directly. The docs say Replit no longer supports rolling a published app back to a previous version. To revert a live app, roll your project back to an earlier checkpoint and publish again.
Checkpoints are a safety net, much like the one in our Git basics for non-coders guide, but built into Replit.
Step 6: Publish your app
Until you publish, your app only runs as a development preview. Publishing creates a separate production deployment: a stable version that runs at its own shareable URL.
From the Project Editor, open the Publishing tool and follow the steps to publish. Under Adjust settings, a Deployment type dropdown lets you pick how the app runs. Replit's docs list four types:
| Type | What it's for |
|---|---|
| Autoscale | Web apps and APIs with varying traffic. Adds servers under load and scales to zero when idle. The default and recommended choice. |
| Static | Landing pages and documentation sites with no backend. The docs say Agent-built full-stack apps aren't compatible with it. |
| Reserved VM | A dedicated server that never sleeps, for bots, background work and always-on APIs. Billed at a fixed monthly cost. |
| Scheduled | Runs a command on a schedule, then stops. It has no public URL. |
For a first web app, leave the default unless you have a reason to change it. Publishing has its own costs on top of your plan, which Replit describes on its publishing costs page, so read that before you publish anything you want to keep running.
After publishing, open the live URL in a private window to check it works. Any later changes only go live when you publish again.
Step 7: Build good habits
A few habits make Agent more useful and less costly:
- Start small. Get a working core, then add features one by one.
- Be specific. Say what should happen, on which page, and what must stay unchanged.
- Test after every change. The Preview is free to poke at.
- Keep secrets out of chat. Don't paste passwords or API keys into prompts. Use Replit's secrets feature for those if you add integrations later. Check the docs for how it works on your plan.
- Know your exit. If a project outgrows Replit, you can usually take the code elsewhere. Check the docs for current export options before you rely on that.
Troubleshooting
Agent built something different from what I meant. Roll back to before the change (Step 5), then rewrite your prompt with a clearer outcome and success test.
The app works in Preview but not when published. The deployment type may not match your app. A full-stack app generally needs a type with a server, such as Autoscale, not Static. Replit also has a page on troubleshooting publishing.
I keep running out of usage. Smaller, clearer prompts and Plan mode (if you have it) help, because less goes into rework. See the pricing page for how usage works on your plan.
I rolled back but my data is still there (or gone). Remember that databases roll back separately. Check Additional rollback options.
Recap
- Describe the outcome and a success test, leaving out extras.
- Let Agent build, then test in Preview.
- Change one thing at a time.
- Roll back to a checkpoint when something goes wrong.
- Publish, choosing a deployment type that fits.
Deciding between builders? Read Lovable vs Replit and Bolt vs Replit. You can also try the same idea in Lovable with our build and publish a website with Lovable recipe.