Autonomous Task AI

The Machine Does the Work

Overview

Autonomous Tasks let you describe what you want and the system builds it. No coding required - just describe your application in plain language.

You say:

“Create a CRM for my cellphone store”

You get:

• Working HTMX application at /apps/cellphone-crm
• Database tables: customers, products, sales, repairs
• Forms, lists, search, filters - all functional
• Direct connection to botserver API

Architecture

┌─────────────────────────────────────────────────────────────────┐
│                         Your App                                 │
│                                                                  │
│   ┌──────────┐    ┌──────────┐    ┌──────────┐                 │
│   │  Forms   │    │  Lists   │    │  Actions │                 │
│   └────┬─────┘    └────┬─────┘    └────┬─────┘                 │
│        │               │               │                        │
│        └───────────────┼───────────────┘                        │
│                        │ HTMX                                   │
└────────────────────────┼────────────────────────────────────────┘
                         │
                         ▼
┌─────────────────────────────────────────────────────────────────┐
│                      botserver API                               │
│                                                                  │
│   /api/db/*          /api/drive/*         /api/llm/*           │
│   CRUD operations    File storage         AI features           │
│                                                                  │
└─────────────────────────────────────────────────────────────────┘
                         │
                         ▼
┌─────────────────────────────────────────────────────────────────┐
│              PostgreSQL + MinIO + LLM                           │
│              (user_data virtual table)                          │
└─────────────────────────────────────────────────────────────────┘

Key insight: Apps talk directly to botserver. No middleware, no generated backend code - just HTMX calling the API.

The user_data Virtual Table

All app data lives in one flexible table system:

App: cellphone-crm
Table: customers
     │
     ▼
Namespace: cellphone-crm.customers
     │
     ▼
Storage: user_data table with proper indexing

Your app calls /api/db/customers and botserver handles the rest.

Benefits

• No migrations - Tables created on demand
• Isolation - Each app’s data is separate
• Flexibility - Add fields anytime
• Security - Per-app access control

How It Works

1. Describe

Tell the system what you want:

"Create a CRM for my cellphone store with:
- Customer tracking (name, phone, email)
- Product inventory with stock levels
- Sales linked to customers
- Repair status board"

2. Plan

System creates execution steps:

Step 1: Create tables (customers, products, sales, repairs)
Step 2: Generate HTMX application
Step 3: Add search and filters
Step 4: Configure repair workflow

3. Execute

Each step runs and shows progress:

[████████████████░░░░] 75%
Step 3 of 4: Adding search...

4. Deliver

Your app is ready:

✅ Application: /apps/cellphone-crm
✅ Tables: customers, products, sales, repairs
✅ Features: CRUD, search, status board

Generated App Structure

.gbdrive/apps/cellphone-crm/
├── index.html          # HTMX application
├── _assets/
│   ├── htmx.min.js     # HTMX library
│   ├── app.js          # Helpers
│   └── styles.css      # Styling
└── schema.json         # Table definitions

HTMX Patterns

List with Auto-Refresh

<div id="customers"
     hx-get="/api/db/customers"
     hx-trigger="load, every 30s"
     hx-swap="innerHTML">
    Loading...
</div>

Create Form

<form hx-post="/api/db/customers"
      hx-target="#customers"
      hx-swap="afterbegin">
    <input name="name" required>
    <input name="phone">
    <button type="submit">Add</button>
</form>

Search

<input type="search"
       hx-get="/api/db/customers"
       hx-trigger="keyup changed delay:300ms"
       hx-target="#customers"
       placeholder="Search...">

Delete

<button hx-delete="/api/db/customers/${id}"
        hx-target="closest tr"
        hx-confirm="Delete?">
    🗑️
</button>

API Mapping

Query Parameters

?q=john              # Search
?status=active       # Filter
?sort=created_at     # Sort
?order=desc          # Direction
?limit=20&offset=40  # Pagination

Task Steps Storage

Every task stores its steps for:

• Continuation - Resume if interrupted
• Progress - Know exactly where you are
• Debugging - See what happened

{
  "task_id": "abc123",
  "steps": [
    {"order": 1, "name": "Create tables", "status": "completed"},
    {"order": 2, "name": "Generate UI", "status": "running", "progress": 60},
    {"order": 3, "name": "Add search", "status": "pending"}
  ]
}

Execution Modes

Dev Chat Widget

Test your app without leaving the page:

1. Add ?dev=1 to URL or run on localhost
2. Click the floating chat icon (or Ctrl+Shift+D)
3. Talk to modify your app in real-time

<script src="/_assets/dev-chat.js"></script>

The dev chat uses the same user_data system for history storage.

Example: Cellphone Store CRM

Request:

“CRM for cellphone store with customers, products, sales, and repair tracking”

Result:

Features:

• Customer list with search
• Product inventory with stock alerts
• Sales entry form
• Repair status board (Kanban)

Access: /apps/cellphone-crm

Best Practices

Be Specific

✅ Good:

“CRM for cellphone store with customer tracking, sales, and repair status workflow”

❌ Vague:

“Make an app”

Include Workflows

✅ Good:

“Repair status: received → diagnosing → repairing → ready → delivered”

❌ Missing:

“Track repairs”

Mention Relationships

✅ Good:

“Sales linked to customers and products”

❌ Unclear:

“Sales tracking”

See Also

• Autonomous Tasks Chapter - Complete guide
• CREATE SITE - The keyword behind it
• REST API - API reference
• HTMX Architecture - Frontend patterns