App Builder

Build custom apps with AI assistance using a preview-first workflow.

Overview

The App Builder is Niuton's visual development environment for creating custom apps. It combines AI code generation with interactive editing tools.

Workflow

1. Describe your app → AI generates code
2. Full-screen preview → See the result immediately
3. Right-click to edit → Context-aware modifications
4. Chat with AI → Refine iteratively
5. Save → App appears in your dock

Interface

• Full-screen preview — Your app runs at full size
• Floating toolbar — Glassmorphism style, always accessible
• Floating chat — AI conversation at the bottom
• Slide-out editor — Code editor (42% width, right side)
• Undo/Redo — Full history with Ctrl+Z / Ctrl+Y

Right-Click Context Editing

Right-click any element in the preview to:

1. See the element tag and class (e.g., div.card-header)
2. Get 12 AI-suggested modifications based on element type
3. Choose from 8 quick color options
4. Navigate to parent elements
5. Enter custom modification instructions

AI Pipeline

Step	Model	Purpose
Generate	qwen3-coder	Create initial app from description
Modify	qwen3-coder	Apply targeted changes
Auto-Fix	qwen3-vl	Screenshot analysis → automatic correction

Quick Fix Bar

After generation, 5 common fixes appear:

• Zentrieren (Center)
• Kompakter (More compact)
• Mehr Abstand (More spacing)
• Groessere Schrift (Larger font)
• Farben anpassen (Adjust colors)

CSS Component Library

Apps built with the App Builder can use niuton-app.css classes:

<div class="n-app">
  <div class="n-toolbar">
    <h1>My App</h1>
    <button class="n-btn n-btn-primary">Action</button>
  </div>
  <div class="n-content">
    <div class="n-card">Card content</div>
  </div>
</div>

Template Library

6 built-in templates to start from:

Template	Description
Rechner	Calculator
Todo	Task list
Notizen	Quick notes
Timer	Countdown timer
Wetter	Weather display
Einheiten	Unit converter

Saving & Publishing

• Drafts — Auto-saved while editing
• Save — Creates an app entry in the database
• Dock — App immediately appears in the user's dock
• Delete — Available via context menu or Aurora

Technical Details

• Apps are single-file HTML/CSS/JS stored in the database
• Each app runs in an isolated iframe
• Custom apps track created_by_user_id for ownership
• System apps (is_system=true) cannot be modified

v3.9 Improvements v3.9

13 fixes and improvements applied:

#	Fix	Description
1	Timeout	Extended from 90s to 180s for complex apps
2	Code Extraction	5-strategy extraction: html, php, any block, DOCTYPE fallback, trim
3	PHP Validation	php -l syntax check after extraction
4	System Prompt	Explicit "no PHP" rule + niuton-app.css class reference
5	Preview Sync	100ms debounce for snappier updates
6	Element Context	nth-child disambiguation for same-tag siblings
7	PHP Warning	Warns if generated code contains PHP
8	CSS Auto-Correct	Levenshtein distance <= 2 for fuzzy class matching
9	Context Menu	Trimmed to 6 most relevant suggestions
10	Modify Precision	+-20 lines focused context instead of full file
11	Form Template	New "Formular" template with n-form-group, n-input
12	Error Messages	Specific errors instead of generic "Fehler"
13	Loading Timer	Real-time seconds counter during generation

v3.12 Updates v3.12

Dynamische Modelle

Die Modell-Auswahl im App Builder wird jetzt dynamisch vom AI-Provider geladen:

• /v1/models Endpoint — Modell-Liste wird live vom LM Studio / AI-Provider abgefragt
• Automatische Aktualisierung — Neue Modelle erscheinen automatisch ohne Code-Aenderung
• Fallback — Wenn der Provider nicht erreichbar ist, werden die zuletzt bekannten Modelle verwendet