KI-gestützter
Code-Editor

1.1 Was ist XteVision Coder?

XteVision Coder ist ein KI-gestützter Code-Editor und browserbasierter IDE für Entwickler, die Projekte mit integrierter KI-Unterstützung erstellen, bearbeiten und verwalten möchten. Es bietet eine professionelle Drei-Panel-Workstation-Layout mit Dateierkundung, Code-Bearbeitung, KI-Chat, Live-Vorschau und Terminal-Zugang—all laufend lokal mit Unterstützung verschiedener KI-Modelle.

1.2 Kernfähigkeiten

• Mehrere Workspace-Verzeichnisse mit Drag-and-Drop-Dateioperationen
• Professionelle Code-Bearbeitung angetrieben von Monaco Editor (derselbe Motor wie VS Code)
• KI-gestützte Entwicklung mit Streaming-Antworten und autonomem Agenturmodus
• Persistente authentifizierte Sitzungen mit eigenem Login/Registrierung und PostgreSQL-gestützter Sitzungsspeicherung
• Gespeicherte KI-Unterhaltungen mit Titeln, Umbenennens/Suche/Lesezeichen-Steuerung und automatischer Letzt-Sitzung-Wiederherstellung
• Workspace-Zustands-Wiederherstellung Wiederherstellung des aktiven Workspace-Wurzelverzeichnisses, offener Tabs, aktivem Tab und nichtgespeicherter Editor-Puffer
• Live-Vorschau für HTML/CSS/JS-Projekte mit sandgekäster iframe-Rendering
• Integriertes Terminal mit Command-Allowlist für sichere Ausführung
• Mehrmodale Unterstützung für MLX, Ollama, LMStudio, GitHub Copilot und OpenRouter
• Intelligente Code-Zusammenführung mit diff-basierter Edit-Anwendung und visueller Diff-Vorschau

1.3 Zielgruppe

• Entwickler, die mit lokalen KI-Modelle arbeiten
• Teams, die eine leichte, selbstgehostede IDE benötigen
• Lehrende, die Programmierung mit KI-Unterstützung unterrichten
• Alle, die ein VS-Code-ähnliches Erlebnis im Browser möchten

2.1 High-Level-Architektur

┌──────────────────────────────────────────────────────────┐
│                      Browser (Client)                     │
│  ┌────────────────────────────────────────────────────┐  │
│  │               Frontend (Vanilla JS)                 │  │
│  │  ┌────────┐ ┌────────┐ ┌──────┐ ┌────────┐       │  │
│  │  │ Dateie │ │ Monaco │ │  KI  │ │ Live   │       │  │
│  │  │ explorer│ │ Editor │ │ Chat │ │Preview │       │  │
│  │  └────────┘ └────────┘ └──────┘ └────────┘       │  │
│  └────────────────────────────────────────────────────┘  │
└──────────────────────┬───────────────────────────────────┘
                       │ HTTP/REST API (localhost:5004)
┌──────────────────────┴───────────────────────────────────┐
│                  Python-Backend-Server                    │
│  ┌──────────┐ ┌────────┐ ┌────────┐ ┌──────────┐ ┌──────────┐ │
│  │ DateI/O │ │ Shell  │ │KI-Proxy│ │Workspace │ │Auth/Chat │ │
│  └──────────┘ └────────┘ └────────┘ └──────────┘ └──────────┘ │
└──────────────────────┬───────────────────────────────────┘
         ┌───────────┬───────────┬───────────┐
         │           │           │           │
     ┌─────▼──────┐ ┌──▼────────┐ ┌▼──────────┐
     │  Datei     │ │PostgreSQL │ │ KI-Model  │
     │  System    │ │users +    │ │  Server   │
     │            │ │sessions   │ │           │
     └────────────┘ └───────────┘ └───────────┘

2.2 Kommunikationsfluss

1. Frontend → Backend: RESTful HTTP-Anfragen für Dateioperationen, Shell-Befehle und KI-Proxying
2. Backend → KI-Modell: OpenAI-kompatible API-Aufrufe zu lokalen oder entfernten Modelservern
3. Backend → Frontend: JSON-Antworten mit Datei-inhalten, Ausführungsergebnissen oder fließenden KI-Antworten über SSE
4. Frontend → Benutzer: UI-Updates, Editor-Änderungen, Chat-Antworten und Terminal-Ausgabe

2.3 Bereitstellungsmodell

XteVision Coder ist für lokal-first-Entwicklung ausgelegt:

• Läuft vollständig auf der Maschine des Benutzers
• Keine Cloud-Abhängigkeiten (außer optionalen KI-Modell-Proxy)
• Backend servingt statische Frontend-Dateien
• Alle Daten bleiben auf dem lokalen Dateisystem

4.1 Voraussetzungen

• Python 3.8+ (für Backend-Server)
• Moderner Browser (Chrome/Edge empfohlen)
• KI-Modell-Server (optional, für KI-Funktionen)

4.2 Installationsschritte

Schritt 1: Herunterladen

cd /path/to/mlx_coder

Schritt 2: Monaco-Editor installieren (Optional)

bash download-monaco.sh

Schritt 3: KI-Server konfigurieren (Optional)

mlx_lm.server --model <your-model-path> --port 5010

Schritt 4: Python-Abhängigkeiten installieren

pip3 install -r requirements.txt

Schritt 5: XteVision Coder starten

Standard-Konfiguration
python3 server.py

# Benutzerdefinierter Port
PORT=8080 python3 server.py

# Mit PostgreSQL-gestützter Authentifizierung
XTEVISION_DB_HOST=192.168.1.4 \
XTEVISION_DB_PORT=5432 \
XTEVISION_DB_NAME=codebase \
XTEVISION_DB_USER=postgres \
XTEVISION_DB_PASSWORD=your-db-password \
python3 server.py

Schritt 6: Anwendung zugreifen

http://localhost:5004

4.3 Ersteinrichtung

1. Konto erstellen: Nutzen Sie das Login/Registrierungs-Overlay, um den ersten eigenständigen Coder-Benutzer zu erstellen
2. Workspace öffnen: Klicken Sie auf "Ordner öffnen", um ein Projektverzeichnis auszuwählen
3. KI konfigurieren: Öffnen Sie Einstellungen (Zahnrad-Symbol) und speichern Sie Ihren bevorzugten KI-Backend
4. Sitzung starten: Nutzen Sie die Symbolleiste „Sitzungen", um persistente KI-Unterhaltungen zu erstellen, zu benennen und zu Lesezeichen hinzuzügen

4.4 Authentifizierung-Einrichtung

XteVision Coder nutzt jetzt cookie-basierte eigenständige Authentifizierung, die von PostgreSQL gestützt wird. Jeder Benutzer sieht nur seine eigenen gespeicherten Chat-Sitzungen und Workspace-Wiederherstellungsdaten.

• XTEVISION_AUTH_COOKIE_NAME: Sitzungs-Cookie-Name, Standard xtevision_session
• XTEVISION_AUTH_SESSION_DAYS: Cookie-Lebensdauer in Tagen, Standard 14
• XTEVISION_AUTH_ALLOW_REGISTRATION: Lokale Anmeldung aktivieren/deaktivieren
• XTEVISION_PRODIGY_SHARED_SECRET: Optionales gemeinsames Geheimnis für zukünftige vertrauenswürdige Prodigy-Start-Handoff

4.5 OpenRouter-Einrichtung

Um OpenRouter als KI-Backend zu nutzen:

1. Öffnen Sie Einstellungen in der rechten Seitenleiste
2. Wählen Sie OpenRouter in der KI-Server-Dropdown
3. Setzen Sie die API-URL auf https://openrouter.ai/api/v1/chat/completions
4. Wählen Sie eine OpenRouter-Modell-ID wie qwen/qwen3.6-plus-preview

Wenn OpenRouter ausgewählt ist, hängt XteVision Coder diese Header an:

• Authorization: Bearer <OPENROUTER_API_KEY>
• HTTP-Referer: <konfigurierte Seiten-URL>
• X-OpenRouter-Title: <konfigurierte Seiten-Titel>

5.1 Verzeichnislayout

mlx_coder/
├── index.html                      # Haupt-HTML-Einstiegspunkt
├── style.css                       # Anwendungsstile
├── script.js                       # Bootstrap und Modul-Lader
├── server.py                       # Python-HTTP-Backend
├── .mlx.json                       # Projektzustand
├── js/
│   ├── modules/                    # Frontend-ES6-Module
│   │   ├── state.js                # Globales Zustandsmanagement
│   │   ├── config.js               # KI-Konfiguration und anbieterspezifische Einstellungen
│   │   ├── utils.js                # Hilfsfunktionen
│   │   ├── filesystem.js           # Datei-I/O und Workspace
│   │   ├── editor.js               # Monaco-Editor-Initialisierung
│   │   ├── chat.js                 # KI-Chat und Streaming
│   │   ├── agent.js                # Agentur-Loop und Funktionsaufruf
│   │   ├── auth.js                 # Login/Registrierung/Logout-Bootstrap
│   │   ├── sessionPersistence.js   # Chat-Sitzungs-Autosave und Wiederherstellung
│   │   ├── tools.js                # Werkzeugdefinitionen
│   │   ├── diff.js                 # Diff-basierte Bearbeitung
│   │   ├── preview.js              # Live-Vorschau und PDF-Export
│   │   └── ui.js                   # UI-Rendering und Interaktionen
│   ├── marked.min.js               # Markdown-Parser
│   ├── prism.min.js                # Syntax-Highlighter
│   └── html2pdf.bundle.min.js      # PDF-Generierung
├── fontawesome-free-web/           # FontAwesome-Symbole
├── requirements.txt                # Python-Auth-/DB-Abhängigkeiten
├── projects/                       # Benutzer-Projektdateien
└── logs/app.log                    # Anwendungslog

5.2 Zustandsmanagement

export const state = {
    editor: null,               // Monaco-Editor-Instanz
    files: {},                  // Datei-Inhalts-Cache
    openTabs: [],               // Offene Editor-Tabs
    activeTabPath: null,        // Aktiver Tab-Pfad
    tabDirty: {},               // Dirty-Zustand pro Tab-Pfad
    messageHistory: [],         // Aktive Chat-Nachrichten-Historie
    chatSessionId: null,        // Aktuelle gespeicherte Chat-Sitzungs-ID
    chatSessions: [],           // Verfügbare gespeicherte Chat-Sitzungen
    workspaceFolders: new Map() // Offene Workspace-Ordner
};

Agentur-Modi-Details

7.1 Kernmodule

7.2 Event-System

// Benutzerdefiniertes Event für Einstellungsänderungen
window.dispatchEvent(new CustomEvent('xtevision-settings-changed'));

// Für Events hören
window.addEventListener('xtevision-settings-changed', () => {
  // On Einstellungsänderung reagieren
});

7.3 Fehlerbehandlung

// Globale Error-Boundaries für async init
try {
  await checkServerAvailability();
  await connectToServerWorkspace();
} catch (error) {
  logToTerminal(`Init-Fehler: ${error.message}`, 'error');
}

8.1 Server-Konfiguration

PORT = int(os.environ.get('PORT', 5004))
PROJECTS_DIR = os.path.join(os.getcwd(), 'projects')
AI_PROXY_TIMEOUT_SEC = 3660
AUTH_COOKIE_NAME = os.environ.get('XTEVISION_AUTH_COOKIE_NAME', 'xtevision_session')
AUTH_DB_HOST = os.environ.get('XTEVISION_DB_HOST', '192.168.1.4')
AUTH_DB_NAME = os.environ.get('XTEVISION_DB_NAME', 'codebase')
PRODIGY_JWT_SECRET = os.environ.get('XTEVISION_PRODIGY_SHARED_SECRET', '')

8.2 Thread-Sicherheit

_current_dir_lock = threading.Lock()
_current_dir = os.getcwd()

def get_current_dir():
    with _current_dir_lock:
        return _current_dir

8.3 Auth und Sitzungsspeicherung

Das Backend initialisiert ein coder-PostgreSQL-Schema mit:

• users für lokale und zukünftige Prodigy-verbundene Identitäten
• auth_sessions für sichere Sitzungs-Cookie-Login-Zustand
• auth_launch_tokens für einmalige signierte Start-Handoffs
• chat_sessions für gespeicherte Chats, Titel, Lesezeichen und UI-Wiederherstellung-Payloads

8.4 Anfragehandler

class CustomHandler(http.server.SimpleHTTPRequestHandler):
    def do_GET(self): # GET behandeln
    def do_POST(self): # POST behandeln
    def do_OPTIONS(self): # CORS-Preflight
    def end_headers(self): # CORS-Header hinzufügen

8.5 KI-Proxy-Verhalten

Das Backend stellt zwei KI-bezogene Proxy-Endpunkte bereit:

• /api/proxy für leichte JSON-Fetches wie Modellentdeckung
• /api/ai-proxy für vollständige Anfrage-Weiterleitung zu OpenAI-kompatible Chat-Endpunkte

Für OpenRouter weiterlegen beide Endpunkte Anbieter-Header und erlauben openrouter.ai in der Proxy-Allowlist, so dass authentifizierte Modellentdeckung und Chat-Antworten durch die Backend-Fallback-Pfade funktionieren.

9.1 Unterstützte KI-Server

9.2 OpenAI-kompatible Protokoll

Endpunkt: /v1/chat/completions

{
  "model": "your-model-name",
  "messages": [
    {"role": "system", "content": "Du bist ein Entwicklungsassistent..."},
    {"role": "user", "content": "Schreibe eine Funktion zu..."}
  ],
  "stream": true,
  "tools": [{"type":"function","function":{"name":"read_file","parameters":{"file_path":"string"}}}]
}

9.3 Streaming-Antwort-Format

Server-Sent Events (SSE):

data: {"choices": [{"delta": {"content": "Hallo"}}]}
data: {"choices": [{"delta": {"content": " Welt"}}]}
data: [DONE]

9.4 Funktionsaufruf

Werkzeug-Parsing (3 Formate):

1. Gemma-Style: call:read_file{"file_path": "test.js"}
2. Strukturiertes JSON: {"name": "read_file", "arguments": {...}}
3. Getaggtes Format: