Replit tutorial: build and publish an app with AI in your browser

Replit is where "I want a small app but don't want to deal with setup" becomes a working product. Everything lives in the browser: editor, terminal, database, hosting, and an Agent that builds the app from your description.

This Replit tutorial takes one real app from zero to published: sign-up, a strong first prompt, step-by-step fixes, storing keys, rolling back and publishing. Replit's interface changes often; if a button label looks different, look for the same idea.

What Replit includes#

If coding agents are new to you, coding agents: when AI changes the code itself is useful background.

Step 1: Sign up and start a project#

1. Go to Replit and sign up with email, Google or GitHub.
2. On the home page you'll see a box for building an app with the Agent; this is where you write your idea.
3. If you'd rather write code yourself, create an empty project from a language template such as Python or Node.js instead.

This tutorial follows the Agent path.

Step 2: Write a strong prompt for the Agent#

The quality of the app depends heavily on the first prompt. A good prompt covers five things: the goal, the users, the pages, the data, and what you don't want.

Build a simple web app for booking appointments at a hair salon. Customers choose their name, phone number, service and time, and the booking is saved. I need an admin page with a simple password that shows each day's bookings. Times that are already taken must not be selectable again. Use a clean, mobile-friendly design. No online payments or SMS for now.

After you send it, the Agent usually shows a plan or summary. Read it. If something is missing or extra, say so now; fixing the plan is cheaper than fixing built code.

Step 3: Build and refine step by step#

The Agent starts working: it creates files, installs packages, sets up a database and runs the app. At the end you see a preview.

Now test the app like a real user and report problems one at a time, precisely:

• Bad: "It doesn't work, fix it."
• Good: "When I pick 10 a.m. tomorrow and click Book, I get an error and the booking doesn't show on the admin page."

If there is an error message, copy and paste it. Keep each request to one change; ten requests in one message usually end half-done.

If your app is in a right-to-left language such as Arabic or Persian, say so in the first prompt and ask for a suitable font; fixing direction later is harder.

Step 4: Secrets and rolling back#

Secrets: if the app connects to an outside service, such as an AI API or an SMS gateway, never write the key in the code or in the Agent chat. Put it in Secrets so the code can read it as an environment variable. Why this matters is covered in what you should never give an AI tool.

Rolling back: the Agent saves checkpoints along the way. If a change breaks the app, don't keep insisting on a fix; roll back to the last working version and rewrite the request more clearly. This saves both time and credits.

For a serious project, also connect the code to a Git repository so the history lives outside Replit too.

Step 5: Publish#

When the app is ready, use the Publish (or Deploy) option. Replit offers several publishing types, such as a static site or an always-on app; choose the one that fits. The app gets a public URL, and on paid plans you can connect a custom domain.

Check this list before publishing:

1. The admin page really requires a password and won't open without login.
2. No key sits in the code or a public file.
3. Forms reject empty or invalid input.
4. Test data has been cleared from the database.
5. You have checked the app on a phone.

To review generated code, see AI code review: what it catches and what it misses.

Tips to cut costs and headaches#

• Start small. Build the first version with the fewest features, then add more.
• Break the error loop. If the Agent fails to fix the same error two or three times, stop, roll back and explain the problem differently.
• Don't run the Agent for questions. For small questions about the code, a simple chat or lighter assistant mode is enough.
• Watch your usage. Agent costs are usage-based; check your account's usage page regularly and set your own limit.
• Be explicit about language and layout from the first prompt.

Limits and common mistakes#

Limits:

• Your app depends on Replit's infrastructure, and moving it to another server takes extra work.
• On large projects, Agent costs rise quickly.
• The Agent sometimes produces extra code or a messy structure that is harder to maintain.
• Availability can vary by country.

Common mistakes:

• Publishing an app with real customer data without any security review.
• Writing keys and passwords directly in the code.
• One giant request instead of several small ones.
• Not reading the plan the Agent shows before it starts.

Alternatives#

If you mostly want polished web apps with a simpler experience, Lovable is a good option. If you are a developer who wants full control on your own machine, Cursor fits better. For an overview of this category, see AI tools for programming.

Summary#

• Replit combines editor, database, hosting and an AI Agent in the browser.
• Write the first prompt with goal, users, pages, data and what you don't want.
• Read the Agent's plan before it builds, and report bugs one at a time.
• Keep keys only in Secrets, and don't be afraid to roll back to a checkpoint.
• Before publishing, check admin access, keys and input validation.
• Keep an eye on Agent usage; see the official page for pricing.