CREATE SITE Keyword

Generate Complete HTMX Web Applications Autonomously

Overview

CREATE SITE is the cornerstone keyword for autonomous app generation in General Bots. It transforms natural language descriptions into fully functional HTMX-based web applications that are automatically bound to the botserver API.

The key insight: Generated apps don’t need their own backend - they use botserver’s infrastructure through HTMX calls.

Syntax

CREATE SITE "alias", "template-dir", "prompt"

Parameters:

How It Works

1. Template Loading

The system reads all .html files from the template directory:

templates/app/
├── layout.html          # Page structure
├── components.html      # Reusable UI components
├── forms.html           # Form patterns
└── data-table.html      # List/table patterns

All templates are combined with separators to give the LLM context about available patterns.

2. LLM Generation

The combined templates + prompt are sent to the LLM with instructions to:

• Clone the template structure and styling
• Use only local _assets (no external CDNs)
• Bind all data operations to botserver API via HTMX
• Generate semantic, accessible HTML

3. Deployment

The generated index.html is written to <site_path>/<alias>/:

sites/
└── crm/
    ├── index.html       # Generated application
    └── _assets/         # Copied from templates
        ├── htmx.min.js
        ├── app.js
        └── styles.css

The site is immediately available at /<alias> endpoint.

Generated HTMX Patterns

Data Lists with Auto-Refresh

<!-- Lead list that loads on page and refreshes every 30s -->
<div id="leads"
     hx-get="/api/data/leads"
     hx-trigger="load, every 30s"
     hx-swap="innerHTML">
    <div class="loading">Loading leads...</div>
</div>

Create Forms

<form hx-post="/api/data/leads"
      hx-target="#leads"
      hx-swap="afterbegin"
      hx-indicator="#saving">
    <input name="name" placeholder="Lead name" required>
    <input name="email" type="email" placeholder="Email">
    <input name="phone" placeholder="Phone">
    <select name="status">
        <option value="new">New</option>
        <option value="contacted">Contacted</option>
        <option value="qualified">Qualified</option>
    </select>
    <button type="submit">
        <span class="btn-text">Add Lead</span>
        <span id="saving" class="htmx-indicator">Saving...</span>
    </button>
</form>

Inline Editing

<div class="lead-card"
     hx-get="/api/data/leads/${id}"
     hx-trigger="click"
     hx-target="#detail-panel"
     hx-swap="innerHTML">
    <h3>${name}</h3>
    <p>${email}</p>
    <span class="status status-${status}">${status}</span>
</div>

Delete with Confirmation

<button hx-delete="/api/data/leads/${id}"
        hx-target="closest .lead-card"
        hx-swap="outerHTML swap:1s"
        hx-confirm="Delete this lead?">
    🗑️ Delete
</button>

Search and Filter

<input type="search"
       name="q"
       placeholder="Search leads..."
       hx-get="/api/data/leads"
       hx-trigger="keyup changed delay:300ms"
       hx-target="#leads"
       hx-include="[name='status-filter']">

<select name="status-filter"
        hx-get="/api/data/leads"
        hx-trigger="change"
        hx-target="#leads"
        hx-include="[name='q']">
    <option value="">All Statuses</option>
    <option value="new">New</option>
    <option value="contacted">Contacted</option>
</select>

API Binding

Generated HTMX calls map directly to botserver endpoints:

Query Parameters

The API supports filtering via query params:

<!-- Filter by status -->
hx-get="/api/data/leads?status=new"

<!-- Sort by date -->
hx-get="/api/data/leads?sort=created_at&order=desc"

<!-- Pagination -->
hx-get="/api/data/leads?page=2&limit=20"

<!-- Search -->
hx-get="/api/data/leads?q=john"

JavaScript Integration

Generated apps include app.js for interactions that need JavaScript:

// Toast notifications
function showToast(message, type = 'success') {
    const toast = document.createElement('div');
    toast.className = `toast toast-${type}`;
    toast.textContent = message;
    document.body.appendChild(toast);
    setTimeout(() => toast.remove(), 3000);
}

// HTMX event hooks
document.body.addEventListener('htmx:afterSwap', (e) => {
    if (e.detail.target.id === 'leads') {
        showToast('Data updated');
    }
});

document.body.addEventListener('htmx:responseError', (e) => {
    showToast('Error: ' + e.detail.error, 'error');
});

// Modal handling
function openModal(id) {
    document.getElementById(id).classList.add('active');
}

function closeModal(id) {
    document.getElementById(id).classList.remove('active');
}

Examples

Simple CRM

CREATE SITE "crm", "bottemplates/apps/crud", "
Build a CRM with:
- Contact list with search and filters
- Add/edit contact form (name, email, phone, company)
- Status tracking (lead, prospect, customer)
- Activity timeline per contact
- Quick action buttons (call, email)
"

Dashboard

CREATE SITE "dashboard", "bottemplates/apps/dashboard", "
Create an executive dashboard showing:
- KPI cards (revenue, customers, orders, growth)
- Revenue chart (last 12 months)
- Top products table
- Recent orders list
- Auto-refresh every 60 seconds
"

Project Tracker

CREATE SITE "projects", "bottemplates/apps/kanban", "
Build a project management board with:
- Kanban columns (Backlog, In Progress, Review, Done)
- Drag and drop cards between columns
- Card details (title, description, assignee, due date)
- Filter by assignee or status
- Quick add card form
"

E-commerce Admin

CREATE SITE "shop-admin", "bottemplates/apps/admin", "
Create an admin panel for e-commerce:
- Products table with inline editing
- Order management with status updates
- Customer list with order history
- Inventory alerts (low stock)
- Sales summary charts
"

Template Structure

Organize templates for reuse:

bottemplates/apps/
├── crud/                   # CRUD application templates
│   ├── layout.html         # Base page structure
│   ├── data-row.html       # Table row template
│   └── form-modal.html     # Modal form pattern
├── dashboard/              # Dashboard templates
│   ├── layout.html         # Dashboard layout
│   ├── kpi-card.html       # Metric card
│   └── chart.html          # Chart container
├── kanban/                 # Board templates
│   ├── layout.html         # Kanban layout
│   ├── column.html         # Single column
│   └── card.html           # Task card
├── admin/                  # Admin panel templates
│   ├── layout.html         # Admin structure
│   └── sidebar.html        # Navigation
└── components/             # Reusable components
    ├── data-table.html     # Sortable table
    ├── search-filter.html  # Search with filters
    └── toast.html          # Notifications

Styling

Generated apps use CSS variables for theming:

:root {
    --color-primary: #0ea5e9;
    --color-success: #10b981;
    --color-warning: #f59e0b;
    --color-danger: #ef4444;
    --color-bg: #ffffff;
    --color-text: #1e293b;
    --color-border: #e2e8f0;
    --radius: 8px;
    --shadow: 0 1px 3px rgba(0,0,0,0.1);
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-bg: #0f172a;
        --color-text: #f1f5f9;
        --color-border: #334155;
    }
}

Storage

Generated sites and their data live in .gbdrive:

project.gbdrive/
├── apps/
│   └── crm/
│       ├── index.html      # Generated app
│       └── _assets/        # Static files
├── data/
│   └── contacts.json       # App data
└── uploads/
    └── ...                 # User uploads

Error Handling

Generated apps handle errors gracefully:

<!-- Loading state -->
<div class="htmx-indicator">
    <span class="spinner"></span> Loading...
</div>

<!-- Error display -->
<div id="error-container"
     hx-swap-oob="true"
     class="error-message">
</div>

// Global error handler
document.body.addEventListener('htmx:responseError', function(e) {
    document.getElementById('error-container').innerHTML = 
        `<div class="alert alert-error">
            ${e.detail.xhr.responseText || 'An error occurred'}
        </div>`;
});

Best Practices

Be Specific in Prompts

✅ Good:

CREATE SITE "crm", "bottemplates/apps/crud", "
Build a real estate CRM with:
- Lead list showing name, phone, property interest, status
- Filter by status (new, contacted, showing, offer, closed)
- Add lead form with validation
- Click lead to see full details and notes
- Add note button on detail view
"

❌ Bad:

CREATE SITE "crm", "templates/app", "Make a CRM"

Use Appropriate Templates

Match your template to the use case:

• bottemplates/apps/crud - General CRUD applications
• bottemplates/apps/dashboard - Dashboards and reports
• bottemplates/apps/kanban - Board-style interfaces
• bottemplates/apps/admin - Admin panels

Test with Dry Run

Use autonomous task dry run mode to preview before deploying:

' In supervised/dry-run mode
CREATE SITE "test-crm", "bottemplates/apps/crud", "..."
' Review generated HTML before committing

See Also

• Autonomous Task AI - How the machine does the work
• HTMX Architecture - UI patterns
• .gbdrive Storage - File management
• API Reference - botserver endpoints