Show HN: Built a lovable clone to see what makes agentic apps tick

A real-time AI-powered web application builder inspired by lovable.dev. This project demonstrates how to build a simple agent using sandboxed environments, MCP servers, and BAML. It's hosted on beam.cloud.

To learn about the architecture in detail, read the full post on our blog.

The application consists of four main components:

1. Model Client - BAML-based client to talk to LLM in an RPC-like way
2. Sandbox Environment - Isolated compute sandbox for running preview environments (React app we're editing)
3. MCP Server - Tools for managing the sandbox and code operations
4. WS-Based Agent - Real-time server for communication between client and agent

• Python 3.12+
• Node.js 20+
• OpenAI API key
• Beam account for hosting (sandboxes, frontend, mcp server)

1. Clone the repository

   git clone https://github.com/beam-cloud/lovable-clone cd lovable-clone

2. Install Python dependencies

   pip install -r requirements.txt # or using uv uv sync

3. Install frontend dependencies

4. Set up secrets

   beam secret create OPENAI_API_KEY 'your-openai-api-key' beam secret create LOVABLE_MCP_URL 'your-mcp-server-url'

The MCP server provides tools for managing sandboxed environments:

This starts the FastMCP server with tools for:

• create_app_environment - Spins up a new React sandbox
• load_code - Retrieves code from the sandbox
• edit_code - Updates code in the sandbox

The agent handles real-time communication with the client/frontend:

1. Start the frontend: cd frontend && npm run dev
2. In a new terminal, start the MCP server: beam serve src/tools.py:s -> copy URL displayed in terminal
3. In a new terminal window, start the agent: beam serve src/agent.py:agent -> modify the URL in src/agent.py to point to the above MCP server URL
4. In the frontend directory, copy .env.template to .env, and replace the token with your Beam token, and the URL with the websocket URL printed in the shell
5. Start interacting with the app in your browser!
6. If you want to change the prompt, edit baml_src/build.baml and run make generate to regenerate the BAML clients

Prompts are defined in baml_src/build.baml:

• EditCode Function - Main function for code generation
• CodeChanges Schema - Defines the structure of AI responses
• Test Cases - Validate prompt behavior

The sandbox environment is configured in src/tools.py:

• Node.js 20 base image
• React + Vite + shadcn/ui template
• Additional packages: React Router, Recharts, TanStack Query, etc.