Clawder v1.0.0 Documentation

The first full-stack agentic builder designed for the production era.

Experience the next generation of software development. Turn your ideas into reality by just describing your dream app, and let our autonomous AI agents handle the rest. Build full-stack web and native mobile apps with 33 integrated tools—at 50% of the cost of any other platform.

System Architecture & Stack

Clawder operates on a deeply integrated, highly-scalable modern infrastructure. It is fully typed and built for enterprise deployments.

• Frontend: Next.js 15.5, React 19.0, TailwindCSS v4
• Language: Fully typed in TypeScript 5.7
• Backend: Node.js Express Server with real-time WebSockets
• Database: Supabase SSR (PostgreSQL)
• Sandboxing: E2B Cloud Environments for isolated code execution
• Agentic Arsenal: 33 Autonomous Sandboxed Tools for full-stack control
• Billing: Stripe

Project File Structure

Understanding the source code layout is crucial for modifying Clawder's internal engine.

clawder/
├── public/                 # Static assets, branding logos, og-images, and favicons
├── scripts/                # Utility scripts (e.g., Codester build pipeline, asset obfuscation)
├── supabase/               # Database SQL migrations and schema architecture
├── src/
│   ├── app/                # Next.js App Router (Landing page, Workspace UI, API routes)
│   ├── components/         # Reusable React UI (ChatPanel, Navbar, Authentication Modals)
│   ├── hooks/              # Custom React state hooks
│   ├── lib/                # Shared utilities, Supabase Auth context, and Stripe configs
│   ├── shared/             # TypeScript type definitions and shared interfaces
│   └── server/             # The core AI Brain (Express backend, WebSockets, E2B orchestration)
│       ├── core/           # Core intelligence and AI model routing
│       ├── mcp/            # Model Context Protocol connection clients
│       ├── sandbox/        # E2B microVM execution and filesystem mounting
│       ├── skills/         # Default registered agent capabilities (.md)
│       ├── tools/          # The 33 TS files containing every Agentic Action logic
│       ├── index.ts        # Entry point for the backend
│       └── server.ts       # Express server and WebSocket connection handler
├── package.json            # Architecture dependencies and PM2 run scripts
├── tsconfig.json           # TypeScript configuration
└── .env                    # Secret keys, API tokens, and Webhook definitions

Proprietary Context Compression

Clawder is vastly different from standard LLM wrappers because of our proprietary 3-Tier Context Compression Algorithm (Micro → Caveman → Genome).

Features & AI Arsenal

AI Models & Chat Modes

Clawder natively routes queries to the world's most advanced intelligence models. Users can freely switch between intelligence providers mid-conversation. Below is the list of our currently supported next-generation models:

Anthropic

• Claude 4.7 Opus
• Claude 4.6 Sonnet

Google

• Gemini 3.1 Pro (Preview)
• Gemini 3 Flash (Preview)
• Gemini 2.5 Pro
• Gemini 2.5 Flash

OpenAI

• GPT-5.4 Pro
• GPT-5.4 Thinking
• GPT-5.4 Mini

The user can interact with these models in three distinct modes, using our beautifully designed interfaces:

The 33 Autonomous Tools

The AI Agent is equipped with exactly 33 highly specialized TypeScript tools running inside an E2B Sandbox. These are all located in src/server/tools/.

Model Context Protocol (MCP) Integrations

Through Clawder's Marketplace, the AI can seamlessly load dynamic MCP servers. It uses ListMcpResources and ReadMcpResource to securely authenticate and interface with external platforms, dramatically expanding its capabilities beyond simple code editing.

For example, connecting the Supabase MCP allows the AI to autonomously call list_tables, execute_sql, and deploy_edge_function, meaning it can design your PostgreSQL architecture without ever leaving the chat interface.

Slash Commands

Users can command the AI using specialized chat inputs. We offer exactly 15 slash commands:

• /help — Show available commands
• /status — Show session status
• /filetree — Show project file structure
• /search — Search the web for information
• /fetch — Fetch and analyze content from a URL
• /mcp — Show MCP server status
• /security — Run a full security audit on the project
• /seo — Run a technical SEO analysis and provide recommendations
• /clone — Analyze and clone a website design from a URL
• /import — Import a project from a public GitHub URL
• /deploy — Deploy the project to Vercel or Netlify
• /git status, /git log, /git diff, /git sync, /git revert — Full repository control

Server Installation & Setup

Deploying Clawder requires a Virtual Private Server (VPS) to host the Node.js backend and Next.js frontend.

VPS Requirements

• OS: Ubuntu 22.04 LTS or 24.04 LTS
• RAM: 4GB Minimum (8GB Recommended)
• CPU: 2 vCPUs Minimum

Server Prep & Dependencies

Connect to your VPS via SSH as root and run the following commands sequentially.

# 1. Update system packages
sudo apt update && sudo apt upgrade -y
sudo apt install -y curl wget git unzip build-essential

# 2. Install Node.js v22
curl -fsSL https://deb.nodesource.com/setup_22.x | sudo -E bash -
sudo apt install -y nodejs

# 3. Install PM2 globally (Process Manager)
sudo npm install -g pm2

# 4. Install Nginx and Certbot (for reverse proxy and SSL)
sudo apt install -y nginx certbot python3-certbot-nginx

Upload your clawder-Codester-release.zip file to your server and unzip it:

unzip clawder-Codester-release.zip -d ~/web-agentic
cd ~/web-agentic

Environment Variables (.env) & API Keys

Create a .env file in your project folder. This is the master configuration for your AI keys, Database, and Sandbox. Below is the full template, followed by detailed instructions on where to acquire each key.

# ─── AI Providers ───
GOOGLE_API_KEY=your_key
ANTHROPIC_API_KEY=your_key
OPENAI_API_KEY=your_key

# ─── Supabase Configuration ───
NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_anon_key

# Backend (Private - DO NOT EXPOSE IN BROWSER)
# Required for user billing and lifetime token tracking
SUPABASE_SERVICE_ROLE_KEY=your_service_role_key

# ─── Server & Sandbox ───
PORT=3001
NEXT_PUBLIC_BACKEND_URL=https://clawder.eu

# CRITICAL: WORKSPACE_DIR defines the absolute path on your VPS where the AI writes local temporary files.
# If your project is at /home/monzedayoub/web-agentic, set it to exactly that.
WORKSPACE_DIR=/home/monzedayoub/web-agentic

SANDBOX_PROVIDER=e2b
E2B_API_KEY=your_e2b_key

# ─── Stripe Configuration ───
STRIPE_SECRET_KEY=sk_live_...
# Note: Connect your Stripe webhook in the Stripe Dashboard to: https://yourdomain.com/api/stripe/webhook
STRIPE_WEBHOOK_SECRET=whsec_...

# ─── Cloudflare Turnstile (Captcha) ───
NEXT_PUBLIC_TURNSTILE_SITE_KEY=your_site_key

# ─── Resend (Transactional Emails) ───
RESEND_API_KEY=your_resend_key
RESEND_FROM_EMAIL=Clawder 

API Key Acquisition Guide

We've broken down exactly where to source every required variable for your .env file.

Supabase Database Setup

We have provided a professional SQL export in your zip file. This cleanly sets up your architecture without any legacy user data. Execute this step immediately after creating your Supabase project during the API Keys setup.

1. Log into your Supabase Dashboard and navigate to the SQL Editor.
2. Open database_schema.sql from your download, copy the contents, paste it into the editor, and hit Run. This builds your RLS policies and core tables.
3. Next, open plans_data.sql, paste it, and hit Run. This populates your default pricing tiers.

Payments & Pricing Plans

Clawder is designed to be completely dynamically driven by your Supabase database. You do not need to manually create Stripe products or edit React code to change your subscription tiers, features, or limits!

Editing Features & Limits

To change what is displayed on the frontend Pricing page or adjust the AI usage limits, simply open your Supabase Dashboard, go to the Table Editor, and edit the plans table.

{
  "modes": [
    "ask",
    "agent",
    "swarm"
  ],
  "models": [
    "gemini-2.5-flash",
    "gemini-2.5-pro",
    "claude-opus-4-7",
    "claude-sonnet-4-6",
    "gpt-5.4-pro",
    "gpt-5.4-mini"
  ],
  "custom_agents": true,
  "can_download_zip": true
}

Build & Launch

With the database ready and your environment variables securely in place, it's time to build the application.

First, install all required dependencies (including Playwright for the autonomous web-browsing agents), then compile the Next.js app, and start the PM2 daemon to keep it online forever:

# 1. Install core dependencies
npm install

# 2. Install Playwright browser dependencies for autonomous agents
npx playwright install
npx playwright install-deps

# 3. Build the Next.js production bundle
npm run build

# 4. Boot the backend and frontend using PM2
pm2 start npm --name "clawder-backend" -- run dev:server
pm2 start npm --name "clawder-frontend" -- start

# 5. Save the PM2 state to resurrect on server reboot
pm2 save
pm2 startup

Customization & SEO

Clawder is designed to be completely white-labeled. You own the code, so you can transform it into your own brand.

Vibe Coding (AI-Assisted Customization)

You don't need to be an expert developer to modify this application. The codebase is strictly typed and built with Next.js & TailwindCSS, making it incredibly easy for modern "Vibe Coding" AI tools to understand and modify it for you. We highly recommend using these tools to tweak the design, rewrite landing page copy, or even add entire new features simply by asking in plain English:

Manual Branding & SEO Setup

If you prefer to make modifications manually, here are the critical files you need to update to launch your SaaS:

Nginx & Architecture Endpoints

Clawder requires Nginx to act as a reverse proxy, forwarding traffic dynamically to either the Frontend (port 3002) or Backend (port 3001).

1. DNS Setup (Pointing Your Domain)

Before configuring Nginx, you must point your domain name to your VPS IP address. Log into your domain registrar (e.g., Namecheap, Cloudflare, or GoDaddy) and configure your DNS settings as follows:

For beginners: Need step-by-step visual help? Read this official guide from Cloudflare on How to create DNS records.

2. Nginx Server Block

Below is the "Virgin" Nginx configuration (without SSL enabled yet). Create this file at /etc/nginx/sites-available/yourdomain.com, link it to sites-enabled, and restart Nginx.

upstream backend {
    server localhost:3001;
    keepalive 32;
}

upstream frontend {
    server localhost:3002;
    keepalive 32;
}

proxy_cache_path /var/cache/nginx/clawder
    levels=1:2
    keys_zone=clawder_static:10m
    max_size=1g
    inactive=60m
    use_temp_path=off;

map $http_upgrade $connection_upgrade {
    default upgrade;
    ''      close;
}

server {
    listen 80;
    server_name clawder.eu www.clawder.eu; # Replace with your domain

    client_max_body_size 50M;
    gzip on;
    gzip_types text/plain text/css application/json application/javascript image/svg+xml application/xml font/woff2;

    location = /api/stripe/webhook {
        proxy_pass http://backend/api/stripe/webhook;
        proxy_http_version      1.1;
        proxy_set_header Connection "";
        proxy_request_buffering off;
        proxy_buffering         off;
        proxy_set_header Host              $host;
        proxy_set_header X-Real-IP         $remote_addr;
        proxy_set_header X-Forwarded-For   $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    location /api/ {
        proxy_pass http://backend/api/;
        proxy_http_version      1.1;
        proxy_set_header Connection "";
        proxy_set_header Host              $host;
        proxy_set_header X-Real-IP         $remote_addr;
        proxy_set_header X-Forwarded-For   $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_read_timeout    300s;
        proxy_connect_timeout 300s;
    }

    location /ws {
        proxy_pass http://backend/ws;
        proxy_http_version 1.1;
        proxy_set_header Upgrade           $http_upgrade;
        proxy_set_header Connection        $connection_upgrade;
        proxy_set_header Host              $host;
        proxy_set_header X-Real-IP         $remote_addr;
        proxy_set_header X-Forwarded-For   $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_read_timeout  86400s;
        proxy_send_timeout  86400s;
        proxy_buffering     off;
        tcp_nodelay         on;
    }

    location /_next/static {
        proxy_pass http://frontend/_next/static;
        proxy_http_version 1.1;
        proxy_set_header Connection "";
        proxy_cache        clawder_static;
        proxy_cache_valid  200 60m;
        proxy_cache_use_stale error timeout updating http_500 http_502 http_503 http_504;
        add_header Cache-Control "public, max-age=31536000, immutable";
        add_header X-Cache-Status $upstream_cache_status;
    }

    location / {
        proxy_pass http://frontend;
        proxy_http_version 1.1;
        proxy_set_header Upgrade           $http_upgrade;
        proxy_set_header Connection        $connection_upgrade;
        proxy_set_header Host              $host;
        proxy_set_header X-Real-IP         $remote_addr;
        proxy_set_header X-Forwarded-For   $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

Customization & SEO

Clawder is designed as a highly malleable white-label solution. You have full access to change the aesthetics and search-engine visibility.

Support & Contact

Thank you for purchasing Clawder! We are deeply committed to providing you with the best possible experience. Please review our support channels and policies below.

Updates & Changelog

v1.0.0 — Initial Release