DeepAgents Open Lovable

An open-source AI-powered frontend development platform built on DeepAgents and LangGraph. Generate complete React applications through natural language conversations.

Overview

This platform enables you to build frontend applications by simply describing what you want. The AI agent understands modern web development best practices and generates production-ready code using React, Next.js, Tailwind CSS, and shadcn/ui.

Key Features

• Conversational UI Development - Describe your app in plain English and watch it come to life
• Live Preview - See your application render in real-time as the agent writes code
• File System Management - Browse, edit, and manage generated files through an intuitive interface
• Sub-Agent Architecture - Specialized agents for design and image research work alongside the main agent
• Vercel Deploy - One-click deployment to Vercel for instant preview URLs

Screenshots

Starting a New Project

Begin by describing your application in natural language. The agent understands your requirements and starts planning the implementation.

Live Development in Progress

Watch as the agent works on your project. This example shows the "CodeCraft" website being built with real-time task tracking and progress updates.

Sub-Agent Architecture in Action

Specialized sub-agents handle specific tasks. Here, the designer sub-agent is creating files while you can see the filesystem structure being built in real-time.

Final Result

The completed application preview. From concept to working website through simple conversation.

Architecture

deepagents-open-lovable/
├── agent/                    # Python backend (LangGraph)
│   ├── src/
│   │   ├── agent.py         # Main agent configuration
│   │   ├── prompts.py       # System prompts
│   │   ├── tools.py         # Custom tools
│   │   ├── subagents.py     # Designer & image researcher
│   │   └── skills/          # Skill definitions
│   └── langgraph.json       # LangGraph configuration
└── gui/                      # React/Vite frontend
    └── src/
        ├── components/      # UI components
        ├── hooks/           # Custom React hooks
        ├── pages/           # Route components
        └── api/             # Backend API client

Quick Start

Prerequisites

• Python 3.11+
• Node.js 18+
• An Anthropic API key

1. Clone the Repository

git clone https://github.com/emanueleielo/deepagents-open-lovable.git
cd deepagents-open-lovable

2. Set Up the Agent (Backend)

cd agent

# Create and activate virtual environment
python -m venv .venv
source .venv/bin/activate  # On Windows: .venv\Scripts\activate

# Install dependencies
pip install -r requirements.txt

# Configure environment
cp .env.example .env
# Edit .env and add your ANTHROPIC_API_KEY

3. Set Up the GUI (Frontend)

cd ../gui

# Install dependencies
npm install

# Configure environment (optional)
cp gui.example .env

4. Start the Development Servers

Terminal 1 - Backend:

cd agent
langgraph dev
# Runs at http://localhost:2024

Terminal 2 - Frontend:

cd gui
npm run dev
# Runs at http://localhost:5173

Open your browser to http://localhost:5173 and start building!

Configuration

Agent Environment Variables

GUI Environment Variables

Tech Stack

Backend:

• Python 3.11+
• DeepAgents - AI agent framework
• LangGraph - Stateful agent orchestration
• LangChain - LLM tooling
• Claude (Anthropic) - Language model

Frontend:

• React 18 + TypeScript
• Vite - Build tool
• Tailwind CSS - Styling
• Sandpack - Live code preview
• react-router-dom - Routing

Development

Adding Custom Tools

Create new tools in agent/src/tools.py:

from langchain_core.tools import tool

@tool
def my_custom_tool(param: str) -> str:
    """Tool description for the agent."""
    return f"Result: {param}"

Adding Sub-Agents

Define sub-agents in agent/src/subagents.py:

subagents = [
    {
        "name": "my-agent",
        "description": "What this agent does",
        "prompt": "System prompt for the agent",
    }
]

Adding Skills

Create skill files in agent/src/skills/<skill-name>/SKILL.md:

# Skill Name

Description of what this skill does.

## Instructions

Step-by-step instructions for the agent.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is open source. See the individual components for their respective licenses.

Acknowledgments

• LangChain for the amazing AI tooling
• Anthropic for Claude
• DeepAgents for the agent framework