🏗️ Frontend Architecture

Manus AI Clone - Professional Template Structure 

manus_ai_clone/
├── templates/               # Jinja2 Templates
│   ├── base.html          # Base layout with nav & footer
│   └── index.html         # Main application page
│
├── static/                  # Static Assets
│   ├── css/
│   │   └── style.css      # Main stylesheet (500+ lines)
│   └── js/
│       └── main.js        # Frontend logic (300+ lines)
│
├── browser_agent.py        # Browser automation core
├── main.py                 # FastAPI application
├── pyproject.toml        # Dependencies
├── .env                   # Environment variables
└── README.md              # Documentation

📄 Templates

base.html

  • Common layout structure
  • Navigation bar
  • Footer
  • Static file links
  • Template blocks

index.html

  • Extends base.html
  • Hero section
  • Input form
  • Results display
  • Statistics cards

🎨 CSS

style.css (500+ lines)

  • CSS custom properties
  • Responsive design
  • Gradient backgrounds
  • Card layouts
  • Animations
  • Mobile-first
  • Custom scrollbars

⚡ JavaScript

main.js (300+ lines)

  • Task execution
  • API communication
  • Results rendering
  • Statistics tracking
  • Toast notifications
  • localStorage persistence
  • Event handlers

✨ Key Features

🎯

Jinja2 Templates

Modular template inheritance with blocks for easy customization

🎨

Modern CSS

Variables, gradients, animations, and responsive design

⚡

Interactive JS

Real-time updates, notifications, and persistent statistics

📱

Responsive

Mobile-first design that works on all devices

💾

State Management

localStorage for statistics and user preferences

🔔

Notifications

Toast messages for user feedback

📸

Screenshots

Live browser screenshots with results

📊

Statistics

Track tasks, success rate, and timing

🔄 Request Flow

User Input
→
JavaScript
→
FastAPI
→
LangChain Agent


↓

Playwright
→
Browser
→
Results
→
Display

🚀 Quick Start

1. Install Dependencies

uv pip install -e . playwright install chromium

2. Configure Environment

cp .env.example .env
Edit .env and add your OPENAI_API_KEY

3. Run Application

python main.py
Or: uvicorn main:app --reload

4. Access Interface

http://localhost:8000

🛠️ Customization

Add New Template

  1. Create templates/custom.html
  2. Extend base.html
  3. Add route in main.py

Customize Styles

  1. Edit CSS variables in style.css
  2. Modify component styles
  3. Add custom classes

Add Functionality

  1. Add functions in main.js
  2. Create API endpoints
  3. Update templates

Built with ❤️

LangChain • Playwright • FastAPI • Jinja2