RT @petergyang: Replit's new Agent 4 just launched and I got early access over the weekend.

Vibe Coding with Replit Agent 4: From Idea to Shipped App in One Flow

Replit Agent 4 lets you describe what you want to build in natural language and have it plan, design, code, and iterate on full-stack applications while you stay in creative flow. It is the first agent explicitly built for “vibe coding” — the practice of starting with a loose feeling or screenshot instead of a rigid spec. The new version is faster, supports React out of the box for web apps, can ingest design screenshots or URLs, and handles background coordination so you can focus on taste and direction.

This changes the builder workflow dramatically. Instead of switching between Figma, Cursor, GitHub, and deployment tools, you stay inside one Replit workspace while the agent does the tedious scaffolding, component wiring, styling, and even basic testing. For solo builders and small teams, it compresses the “idea → working prototype” loop from days to hours.

When to use Replit Agent 4

• You have a visual idea (screenshot, URL, or moodboard) but no detailed spec
• You want to prototype a React-based SaaS tool, dashboard, or consumer web app quickly
• You prefer high-level direction over writing every line of code yourself
• You need to ship a minimum viable product in <4 hours
• You want to explore multiple design directions without losing momentum

It is less ideal for production systems with complex auth, heavy data pipelines, or strict compliance requirements (yet).

The full process

1. Define the goal (10 minutes)

Start with a one-paragraph vision. Be specific about the user experience but vague on implementation details — that’s the agent’s job.

Good example: “Build a minimalist habit tracker for developers. Dark mode by default. Show a streak counter, a calendar heatmap like GitHub, and a daily note field. One-click ‘I shipped today’ button that increments the streak. Make it feel like a focused indie tool, not another todo app.”

Bad example: “Make a full-stack app with React, Node, Prisma, auth, etc.”

Write this vision in a new Replit project’s README.md or as the first message to the Agent.

2. Shape the prompt / spec

Agent 4 performs best when you give it a clear role, constraints, and reference material.

Use this starter prompt template (copy-paste and edit):

You are an expert full-stack product engineer who ships fast and cares about taste.

Build exactly this:
[your one-paragraph vision]

Tech requirements:
- React + TypeScript + Tailwind
- Use shadcn/ui components where possible
- Local storage for MVP (we can add Supabase later)
- Mobile responsive, beautiful dark mode
- Keep the UI extremely minimal and delightful

Reference:
[attach screenshot or paste URL]

Rules:
- Never ask me for clarification on small details. Make reasonable product decisions.
- Comment any code you think I might want to change later.
- After you finish the first version, show me a checklist of what’s done and what’s missing.

Upload a screenshot or link to a design URL in the same message. Agent 4 can now parse visual intent directly.

3. Scaffold and implement

Create a new Replit project (choose “React” or “Blank” template).

Open the Agent 4 interface (the new lightning icon in the sidebar) and paste your prompt.

Let it run. While it works in the background:

• Continue refining the product vision in a separate chat window
• Prepare copy, branding, and edge-case ideas
• Do not micromanage file-by-file changes on the first pass

The agent will create folders, install dependencies, write components, set up routing, and even add placeholder data. Typical first pass takes 3–12 minutes depending on complexity.

4. Validate and iterate

Once Agent 4 says it’s done, run through this checklist:

• Does the app run without errors? (Hit Run)
• Mobile view looks intentional?
• Core happy path works end-to-end?
• Dark mode is actually pleasant?
• Any obvious Tailwind or TypeScript errors in the console?

Now give directed feedback, not vague praise. Use these prompt patterns:

Iteration prompts that work well:

• “Make the streak counter much larger and celebratory. Add confetti on 7-day streak using canvas-confetti.”
• “Replace the calendar with a simpler 30-day grid. Make completed days green like GitHub.”
• “Add a subtle animation when marking a day complete. Keep it under 60ms.”
• “The note field feels too big. Make it a floating command bar that opens with Cmd+K.”

Do 2–3 focused iterations. Each round should take 60–90 seconds of agent time.

5. Ship it safely

After the experience feels right:

1. Run the built-in linter and formatter (Agent 4 usually does this automatically).
2. Add a short README.md with one-line description and how to use it.
3. Click Deploy inside Replit. Choose “Static” for pure frontend or “Autoscale” if you added a backend.
4. Customize the generated domain (yourapp.yourusername.replit.app → custom domain if you have one).
5. Share the link with 3–5 people for immediate feedback before announcing publicly.

Optional safety step: duplicate the Replit before major iterations so you can always roll back.

Pitfalls and guardrails

### What if the agent keeps adding features I don’t want?
Tell it explicitly in the system prompt: “MVP only. No user accounts, no backend, no analytics.” If it still drifts, reply with “Remove everything except the three core flows I described originally.”

### What if the design looks generic?
Feed it a strong reference. Paste a URL to a beautiful indie app (e.g. linear.app, raycast.com, or any screenshot you love) and say “Match the level of polish and spacing of this reference.”

### What if it writes bad React code?
Agent 4 is good but not perfect. After the first pass, ask: “Refactor the state management to use a single Zustand store instead of useState in five components.” It will usually clean it up.

### What if I want to add Supabase or Clerk later?
Finish the local-storage MVP first. Once validated, prompt: “Migrate all persistence to Supabase. I will provide the env vars.” This staged approach prevents the agent from getting confused early.

### What if the agent gets stuck in a loop?
Hit the stop button, summarize what’s broken in one sentence, then restart the agent with the corrected prompt. Short context works better than long rambling corrections.

What to do next

After shipping the first version:

• Create a public Replit template so others can remix it
• Record a 60-second loom of you building the next feature live with Agent 4
• Extract the best prompts you used and turn them into a personal prompt library
• Plan the next iteration: add real backend, auth, or turn the prototype into a paid tool

Vibe coding with Agent 4 rewards people who can steer tastefully more than people who can write perfect code. The faster you ship ugly-then-refine, the more you learn about product direction.

Start small. Pick one tool you wish existed for your own workflow, describe the feeling you want, feed it a screenshot, and let Agent 4 do the heavy lifting. You’ll be surprised how far a single good prompt can take you.

Sources

• Replit official announcement: https://blog.replit.com/introducing-agent-4-built-for-creativity
• Replit Agent 4 Launch Video: https://www.youtube.com/watch?v=-2xHmkpmCBM
• Peter Yang early access tutorial thread (X)
• Replit Agent product page: https://replit.com/products/agent
• Funding announcement context on Agent 4 interface: https://replit.com/news/funding-announcement

(Word count: 982)