Vibe coding tools like lovable.dev and v0.dev are the next big application use case for LLMs. These tools are changing how software is built today. Vibe coding allows users to significantly reduce the time needed to build prototypes, making our lives much easier. But have you ever wondered how the agent generates code? Where does the AI-generated code run? How do we see the live preview?

I tried to go deeper into the architecture of these systems. In this article, let’s try to figure out what happens under the hood when we use vibe coding tools to build software products.

I will use Lovable for my reference throughout this article.

This is one of the fastest growing startups in history(above ChatGPT), hits $75M ARR in just 7 months after they launched. Lovable is on a mission to build the “last piece of software,” helps anyone to create fully functional applications without writing code. Users enter a prompt describing the app they want, and Lovable generates the code, spins up the application, and enables real-time visual edits

So lets dive in….

When we start the conversation by saying

“Build a beautiful landing page”

When we start a conversation by saying “Build a beautiful landing page,” Lovable begins preprocessing. It initiates a sandbox (a place where all the code for the website will be stored), installs necessary packages, runs the server, and more.

When I inspected their requests, I saw they have different base templates for different use cases. But they mostly use a Next.js base template.

There are three major component of lovable,

• 1. Ai agent itself
• 2. Sandbox
• 3. Deployment

The AI Agent: The Brain Behind the Code

The agent is where the magic starts. You type “Build a beautiful landing page” and somehow it knows to create React components, set up state management, install the right libraries, and wire everything together. But it’s not just generating a single block of code, it’s thinking through the problem like a developer would.

The agent is equipped with many helpful tools to interact with the sandbox(where the next js project running) environment to do necessary operation. Tool catalogue idea given below

• Bash: To run bash command inside sandbox. Eg: npm install @radix-ui/react-slot
• LS: List files in a directory to understand project structure
• Read: Read file contents to understand existing code
• Write: Create or overwrite files with generated code
• Edit - Make surgical edits to existing files

A simple example -

User asks: “Build a beautiful landing page”

Agent reasoning:

• Need a main page component (page.tsx)
• Tailwind for styling, Maybe a Hero section, Features section, CTA
• Should I use shadcn components? Yes, cleaner

Agent actions:

1. Bash: npm install @radix-ui/react-slot
2. Write: Create components/ui/button.tsx
3. Write: Create app/page.tsx with Hero and CTA sections
4. Edit: Update tailwind.config.ts to include custom colors

The main purpose of the agent is to maintain consistency across turns and take necessary actions based on LLM reasoning. If you want to understand how coding agents work in depth, I wrote a detailed breakdown in my Claude Code article

But here is a thing, Agent needs a environment to run the generated code. Almost all engineer not comfortable to run AI generated code in their server. What if the agent uses Bash tool to run rm -rf / and you are gone :p. This is where the sandbox comes in.

The Sandbox: Agents Playground

This is the interesting part to me. When a user starts a new project, Lovable provisions a sandbox environment for each project. A sandbox is an isolated execution environment or micro vm where code can run without affecting anything else. Think of it like a Docker container, but specifically designed for running untrusted code safely.

Sandboxes aren’t new tech. AWS Lambda has been doing this at massive scale since 2014. When you invoke a Lambda function, AWS spins up an isolated environment using Firecracker, runs your code, and serve the request. Millions of functions run simultaneously, each completely isolated from the others.

But Lovable sandboxes run stateful, persistent development environments. They need to:

• Keep a full Next.js dev server running for hours
• Maintain a persistent file system (your code doesn’t disappear)
• Support quick file operations from the AI agent
• Provide instant hot reload
• Handle npm installs and dependency management

And importantly: each sandbox gets an internet-facing routable URL that serves as the live preview.

How It Actually Works

Here’s a simple scenario:

1. Agent creates or modifies a .tsx file
2. Sandbox file system updates instantly
3. Next.js dev server detects the change
4. Hot module replacement kicks in
5. Preview URL reflects the change in <1 second
6. User sees the update in the browser

No build step. No deployment. No waiting. Just instant feedback.

The routable URL is the magic that makes the preview work. Instead of trying to stream the rendered output, they just give you a real URL where your app is actually running

This means:

• You’re seeing the actual running application
• React state works, API routes work, everything works
• The agent can test its changes by making requests to this URL

Lovable provisions 250,000 projects every single day

But once you’ve built your app in the sandbox, what happens next? How do you actually deploy it to production? That’s where the final piece comes in.

Deployment: From Sandbox to Production

Alright, you’ve built your app. The AI agent generated a beautiful landing page that we can preview with the sandbox preview url. But now we need to deploy our app.

Nowadays, This is not a big challenge. User can choose between self host or manage host based on their requirements. If they choose to self host then just export the project and upload it in vercel or AWS. For manage host Lovable have mini vercel inside them. When the user clicks on the deploy button lovable runs npm run build and deploy the artifacts in a cdn or server.

So The Full Picture

here’s how it all comes together:

1. AI Agent: Generates the code based on your prompt
2. Sandbox: Runs the code in an isolated environment with live preview
3. Deployment: Makes it production-ready with one click

Three components. Each solving a specific problem. Working together to go from “build me an app” to a live production website in minutes.

Not magic, just really good engineering. AI is acting as an abstraction layer. Every part of the SDLC is still happening, but users don’t need to worry about it.

That’s it. Building an agentic application? I’d love to know your approach. Find me