Replit Agent Guide: Full-Stack Apps in the Browser

Why this matters

Most AI app builders give you code. Replit Agent gives you a running app.

That distinction sounds small until you've spent two hours wrestling with a local dev setup that a 20-word prompt would have generated automatically. Replit's approach is: everything you need to go from idea to live URL lives in the browser. The AI writes the code, yes — but it also installs dependencies, spins up a real Node or Python runtime, provisions a database, manages secrets, and deploys to a URL you can share immediately. No local environment. No separate hosting account. No context-switching.

In 2026 this is genuinely powerful. If you want to understand when to reach for Replit Agent versus something like Bolt.new, the clearest mental model is: Bolt is great at front-end-heavy prototypes; Replit is for full-stack apps that need to stay alive and scale.

The setup

You need a Replit account. Free tier gets you the basics; Pro ($20/month) unlocks Power mode agents, background tasks, and faster builds. Go to replit.com ↗, click Create, and select Use Agent. That's it — you're inside the workspace.

The interface has three panes: the chat panel on the left where you talk to the Agent, the file tree and editor in the middle, and a live preview on the right. As Agent works, you watch files appear, packages install, and errors auto-fix in real time. You can interrupt at any point.

Step 1: Prompt for a working v1

The first prompt is the most important one. Be specific about what the app does, but don't over-specify the tech stack unless you have a reason.

A good opening prompt:

Build a habit tracker app. Users can:
- Sign up and log in
- Create habits with a name and daily goal
- Check off habits each day
- See a streak count per habit

Use a Postgres database. Keep the UI clean and mobile-friendly.

Replit Agent will plan the project, scaffold the files, install packages, and wire up the database schema. Watch the output panel — if it hits an error, it usually fixes it automatically. If it gets stuck, you'll see a message asking for input. Just describe what you want to happen next.

Your first working preview should appear in two to five minutes depending on complexity. Click through it in the preview pane. The app is actually running — it's not a mockup.

Step 2: Add data and secrets

Once your v1 is live in the preview, the next step is connecting real services and locking down credentials.

Replit has a built-in Secrets tab (the padlock icon in the left sidebar). Add API keys, database URLs, and any environment variables here. They're injected at runtime and never exposed in your code or committed to version control. This is one area where Replit's full-stack environment genuinely beats tools that only output files — secrets management is baked in.

For databases, Replit provisions a Postgres instance automatically when your Agent scaffolds one. You can also connect external services: tell the Agent "connect this to a Supabase database" and it'll walk you through the setup, prompt for your credentials via Secrets, and update the connection logic. If you're building something that needs auth, storage, or more advanced queries, Supabase pairs naturally with Replit.

The Agent can also access connected integrations — Notion, Slack, Linear — directly from the chat, so if your app needs to write to a spreadsheet or post to a channel, you can wire that up in natural language.

Step 3: Iterate without losing state

This is where Replit's persistent runtime earns its keep. Unlike static code generators, the app keeps running between prompts. Your database has actual data in it. Sessions persist. If you add a feature, existing records don't disappear.

Use the chat to iterate:

• "Add a weekly summary view that shows completion rate per habit"
• "The streak counter is off by one — fix the logic"
• "Make the login form handle wrong passwords with a clear error message"

Agent 4 introduced Lite mode for quick tweaks (10–60 seconds) and Power mode for bigger structural changes. For small UI fixes, Lite is fast enough that it feels like autocomplete. For adding a new feature area, switch to Power.

Replit also keeps checkpoints — snapshots of your project state. If a round of Agent changes breaks something, you can roll back without losing earlier work. This is the safety net that makes aggressive iteration feel low-risk.

The prompting patterns that work best here are the same ones that work anywhere in vibe coding: specific outcomes, not implementation details. "Add a chart showing weekly habit completion" beats "use recharts to render a BarChart component with data from the habits table."

Step 4: Deploy and share

When your app is ready to go live, hit Deploy in the top bar. Replit offers three deployment types:

• Autoscale — scales with traffic, best for most web apps
• Reserved VM — always-on, needed for WebSocket connections
• Static — free, for HTML/CSS/JS only

Autoscale is the right default. Replit provisions a yourapp.replit.app URL immediately. SSL is automatic.

For a custom domain, go to Deployments → Settings → Link a domain. Enter your domain, then copy the A and TXT records Replit gives you into your registrar's DNS settings. SSL is handled automatically. DNS propagation usually finishes within 20 minutes, though it can take up to 48 hours.

One thing worth knowing: if you're using Cloudflare, turn off the proxy (orange cloud) on the DNS record. Replit manages its own SSL and the two conflict if you leave it on.

Common mistakes

Prompting too broadly on the first turn. "Build me a SaaS" gives Agent too much latitude. Start with the core user action — what does someone actually do in the app — and expand from there.

Skipping Plan Mode on complex projects. Agent will just start building, which is fine for simple apps. For anything with multiple user roles or data models, use Plan Mode to review the architecture before code gets written.

Treating secrets as configuration. Never put API keys in your code files. Always use the Secrets tab. Even if the repo is private, it's a habit worth building from day one.

Not checking the running app before deploying. The preview pane is a real runtime — test your actual flows there, not just the visual appearance. Click through the happy path and at least one error state before you hit Deploy.

Ignoring errors in the Agent output. When Agent logs an error and then says it fixed it, read what it did. Occasional auto-fixes introduce assumptions you didn't intend. A quick scan saves debugging time later.

What's next

Once you've shipped a first Replit app, the natural next questions are around scale, cost, and polish. Replit's Autoscale handles moderate traffic fine, but if you're expecting real user load, review the pricing tiers before launch.

For teams, Replit's collaborative features let multiple people work in the same project simultaneously — more like a shared IDE than a solo tool.

If you're weighing whether Replit is the right fit for your project, the Replit vs Bolt comparison breaks down the tradeoffs in detail — especially for front-end-heavy use cases where Bolt's speed advantage is real. And if you're earlier in the vibe coding journey and want to understand the broader landscape, what is vibecoding is the right place to start.