🎨 LuxurAI Design — Autonomous Visual Prototype Studio

LuxurAI Design is an AI-powered visual prototyping environment. It lets you describe any UI — a landing page, dashboard, mobile screen, data table, or interactive component — and instantly receive a fully runnable, live-preview HTML/CSS/JS prototype, rendered in a sandboxed iframe directly in the browser.

Design operates as a collaborative, multi-turn studio: you can describe, refine, attach reference images, and iterate on your prototype through a natural conversation flow — without touching a single line of code.

NOTE

LuxurAI Design is currently in Experimental status. The core generation pipeline is live and stable, but some advanced multi-file component features are under active development.

---

🏗️ Studio Layout

The interface is split into two zones:

Zone	Purpose
Left — Chat Panel	Conversation thread. Prompts, AI responses, and generation status chips appear here.
Right — Live Preview	Sandboxed iframe rendering the generated prototype in real time. Updates automatically on each generation.

A File Explorer tab in the right panel exposes the underlying multi-file project structure (index.html, style.css, script.js, etc.). Any file can be opened and inspected.

---

✨ Generation Modes

Two modes control how the AI processes your input:

Mode	Behavior
Create (default)	Generates a new prototype from scratch based on your description.
Edit	Takes the current prototype as context and applies targeted modifications as instructed.

Modes are automatically selected based on whether a current prototype session exists. Follow-up prompts in an active session default to Edit mode.

---

📎 Attachment Support

Requests can include additional context beyond plain text:

Reference Images

Drag-and-drop or paste images into the chat input. The AI uses these as visual references — e.g. "Make it look like this screenshot" or "Match this color palette."

Data File Attachments (CSV / Excel / JSON)

Attach structured data files to have the AI generate components pre-populated with real data:

• CSV & Excel: Parsed into rows and columns and injected as inline dataset context.
• JSON: Injected directly as structured data.
• Row/column metadata (count, column names) is extracted and surfaced to the AI automatically.

Quoted Selections

Text selections from the current prototype can be "pinned" as referenced quotes to anchor the AI's editing focus to a specific section.

---

🗂️ Session History & Persistence

All design sessions are automatically saved and retrievable via the History Drawer (clock icon in the header):

• Lists past sessions with titles and timestamps.
• Clicking a session card restores the complete conversation history, generated file tree, and last known live preview state.
• Sessions are stored server-side, linked to the authenticated user account.

---

🔌 API Integration

Submit a Design Generation Request

Stream prototype generation via SSE.

• Endpoint: POST /api/stream/design
• Headers:

  Content-Type: application/json
  Authorization: Bearer <your_session_token>

• Request Body:

  {
    "prompt": "Build a dark-mode SaaS pricing page with 3 tiers, a feature comparison table, and a CTA button",
    "context": "",
    "files": {},
    "history": [],
    "quotes": [],
    "images": [],
    "session_id": "dsgn_abc123xyz",
    "mode": "create",
    "attachments": []
  }

Request Fields

Field	Type	Description
prompt	string	Natural-language design instruction
context	string	Current prototype HTML/code as editing context
files	object	Current file tree map { "index.html": "...", "style.css": "..." }
history	array	Prior conversation turns for multi-turn continuity
quotes	array	Pinned code/text quotes from the current prototype
images	array	Base64-encoded reference images
session_id	string	Client-generated session identifier (prefix dsgn_)
mode	string	create for new prototypes, edit for modifications
attachments	array	Structured data files (CSV, Excel, JSON) parsed client-side

SSE Event Stream

data: {"type": "step", "step": "Planning component layout..."}

data: {"type": "token", "text": "<!DOCTYPE html>"}

data: {"type": "token", "text": "<html lang=\"en\">"}

data: {"type": "subagent_file_update", "files": {"style.css": "...", "script.js": "..."}}

data: [DONE]

The subagent_file_update event allows the backend to stream partial multi-file updates incrementally, letting the file explorer update in real time before the full generation completes.

---

Session Management Endpoints

List Sessions

• Endpoint: GET /api/stream/design/sessions
• Response:

  {
    "sessions": [
      { "id": "dsgn_abc123", "title": "SaaS Pricing Page", "updated_at": "2026-08-21T14:30:00Z" }
    ]
  }

Load a Session

• Endpoint: GET /api/stream/design/sessions/{session_id}
• Response: Returns the full session object including history, files, and context.

Delete a Session

• Endpoint: DELETE /api/stream/design/sessions/{session_id}

---

🛠️ Live Preview Sandbox

The generated prototype runs inside a sandboxed <iframe> with a postMessage bridge:

• Inspect Mode: Click any element in the live preview to highlight its corresponding code in the file explorer.
• Hot-reload: On each generation, the iframe is rebuilt from the latest assembled files map — no page refresh required.
• Error Overlay: Runtime JavaScript errors in the prototype are caught and surfaced in the chat panel as structured error messages.

---

⭐ Feedback & Rating

Each generation response includes thumbs-up / thumbs-down rating buttons. Votes are submitted to POST /api/feedback/rate to improve external model quality and prompt routing over time.

TIP

Iterative Refinement Start with a broad prompt ("Build a dashboard") and then refine with specific follow-ups ("Make the sidebar collapsible", "Add a dark/light mode toggle", "Replace the chart with a data table from this CSV"). Each follow-up preserves the full conversation context and file state.