Claudable - KI-Agenten-gestützter Open-Source Webanwendungs-Builder

Projektübersicht

Claudable ist ein leistungsstarker, auf Next.js basierender Webanwendungs-Builder, der die fortschrittlichen KI-Agenten-Fähigkeiten von Claude Code (unterstützt auch Cursor CLI) mit einem liebenswerten, einfachen und intuitiven Erlebnis beim Erstellen von Anwendungen kombiniert. Beschreiben Sie einfach Ihre App-Idee – „Ich möchte eine Aufgabenverwaltungs-App mit Dunkelmodus“ – und sehen Sie zu, wie Claudable sofort Code generiert und eine Live-Vorschau der funktionierenden Anwendung anzeigt.

Dieses Open-Source-Projekt ermöglicht es Ihnen, professionelle Webanwendungen einfach und kostenlos zu erstellen und bereitzustellen.

Kernfunktionen

🤖 Leistungsstarke KI-Agenten-Unterstützung

• Claude Code: Anthropic's fortschrittlicher KI-Codierungsagent mit hoher Denkfähigkeit, lokaler Ausführung und mehreren Betriebsmodi (interaktiv, automatische Bearbeitung, vollautomatisch)
• Cursor CLI: Intelligenter Codierungsagent für komplexe Codierungsaufgaben
• Native MCP-Unterstützung: Volle Nutzung der Fähigkeiten von Claude Code und Cursor CLI Agenten

💻 Entwicklungserlebnis

• Natürliche Sprache zu Code: Beschreiben Sie einfach, was Sie erstellen möchten, und Claudable generiert produktionsreifen Next.js-Code
• Echtzeit-Vorschau: Sehen Sie Änderungen sofort durch Hot-Reloading und beobachten Sie, wie die KI die App in Echtzeit erstellt
• Start ohne Konfiguration: Keine komplexen Sandbox-, API-Schlüssel- oder Datenbankkonfigurationen erforderlich – beginnen Sie sofort mit dem Bau
• Schöne UI-Generierung: Erzeugt ansprechende Benutzeroberflächen mit Tailwind CSS und shadcn/ui

🚀 Bereitstellung und Integration

• Ein-Klick-Bereitstellung: Stellen Sie Ihre App mit nur einem Klick auf Vercel bereit, ohne Konfiguration
• GitHub-Integration: Automatische Versionskontrolle und Einrichtung der kontinuierlichen Bereitstellung
• Supabase-Datenbank: Verbinden Sie eine produktionsreife PostgreSQL-Datenbank direkt mit Ihrem Projekt
• Automatische Fehlererkennung: Erkennt Fehler in Ihrer Anwendung und behebt sie automatisch

💰 Kostenvorteile

• Völlig kostenlos: Keine zusätzlichen Abonnementgebühren außer für den App-Builder selbst
• Open Source: MIT-Lizenz, kann für kommerzielle Zwecke verwendet werden
• Kein Vendor Lock-in: Sie besitzen den generierten Code und können ihn überall ändern oder hosten

Technische Architektur

Frontend-Technologie-Stack

• Next.js: Modernes React-Framework
• Tailwind CSS: Utility-First CSS-Framework
• shadcn/ui: Moderne UI-Komponentenbibliothek
• TypeScript: Typsicheres JavaScript

Backend-Technologie-Stack

• Python: Backend-API-Server
• SQLite: Lokale Entwicklungsdatenbank
• PostgreSQL: Produktionsdatenbank (optional)

KI-Agenten-Integration

• Claude Code: Hauptsächlich empfohlener KI-Codierungsagent
• Cursor CLI: Alternative intelligentes Codierungstool
• MCP-Unterstützung: Native Integration des Model Context Protocol

Installation und Einrichtung

Systemanforderungen

# Erforderliche Komponenten
- Node.js 18+
- Python 3.10+
- Claude Code oder Cursor CLI (angemeldet)
- Git

Schnellinstallation

# Repository klonen
git clone https://github.com/opactorai/Claudable.git
cd Claudable

# Alle Abhängigkeiten installieren (Node.js und Python)
npm install

# Entwicklungsserver starten
npm run dev

Anwendungszugriffsadressen

• Frontend: http://localhost:3000
• API-Server: http://localhost:8080
• API-Dokumentation: http://localhost:8080/docs

Hinweis: Ports werden automatisch erkannt. Wenn der Standardport belegt ist, wird der nächste verfügbare Port zugewiesen.

Manuelle Einrichtung (optional)

# Frontend-Einrichtung
cd apps/web
npm install

# Backend-Einrichtung
cd ../api
python3 -m venv .venv
source .venv/bin/activate  # Windows: .venv\Scripts\activate
pip install -r requirements.txt

Nutzungsablauf

1. KI-Agenten verbinden

Stellen Sie zunächst sicher, dass Sie bei Claude Code oder Cursor CLI angemeldet sind:

# Claude Code Login
claude
> /login

# Cursor CLI Login
cursor-agent login

2. Claudable starten

npm run dev

3. Projektanforderungen beschreiben

Beschreiben Sie die Anwendung, die Sie erstellen möchten, in natürlicher Sprache, zum Beispiel:

• „Erstelle eine Aufgabenverwaltungs-App mit Benutzerauthentifizierung“
• „Erstelle einen persönlichen Blog mit Dunkelmodus-Unterstützung“
• „Baue eine einfache E-Commerce-Website“

4. KI beim Generieren von Code zusehen

Die KI generiert automatisch die Projektstruktur und den Code, und Sie können die Vorschau in Echtzeit sehen.

5. In der Produktion bereitstellen

Veröffentlichen Sie Ihre Anwendung mit der integrierten Vercel-Bereitstellungsfunktion mit einem Klick.

Datenbankverwaltung

Lokale Entwicklung

• Verwendet eine SQLite-Datenbank, die sich unter data/cc.db befindet
• Wird beim ersten Start automatisch initialisiert

Nützliche Befehle

# Datenbank sichern
npm run db:backup

# Datenbank zurücksetzen
npm run db:reset

# Alle Abhängigkeiten bereinigen
npm run clean

Dienstintegrationen

GitHub-Integration

1. Token abrufen: GitHub Personal Access Tokens → Generate new token (classic) → Select repo scope
2. Verbinden: Settings → Service Integrations → GitHub → Enter token → Create or connect repository

Vercel-Bereitstellung

1. Token abrufen: Vercel Account Settings → Create Token
2. Verbinden: Settings → Service Integrations → Vercel → Enter token → Create new project for deployment

Supabase-Datenbank

1. Anmeldeinformationen abrufen: Supabase Dashboard → Your Project → Settings → API
   • Project URL: https://xxxxx.supabase.co
   • Anon Key: Öffentlicher Clientschlüssel
   • Service Role Key: Serverseitiger Schlüssel

Fehlerbehebung bei häufigen Problemen

Berechtigungsfehler

# Aktuellen Benutzer überprüfen
whoami

# Besitz des Projektverzeichnisses ändern
sudo chown -R $(whoami):$(whoami) ~/Claudable

Abhängigkeitsprobleme

# Alle Abhängigkeiten bereinigen und erneut versuchen
npm run clean
npm install

Hinweise für WSL-Benutzer

Stellen Sie sicher, dass Claude Code unter einem Benutzerkonto und nicht unter dem Root-Konto ausgeführt wird.

Anwendungsfälle

1. Schnelle Prototypenentwicklung

• Unternehmer, die Produktideen validieren
• Produktmanager, die Demo-Prototypen erstellen
• Designer, die interaktive Designentwürfe erstellen

2. Webentwicklung lernen

• Programmier-Anfänger, die beobachten, wie KI Anforderungen in Code umwandelt
• Verständnis moderner Webanwendungsarchitekturen und Entwicklungsprozesse

3. Automatisierte Frontend-Entwicklung

• Frontend-Entwickler, die repetitive Entwicklungsaufgaben automatisieren
• Schnelles Einrichten von Projekt-Frameworks und UI-Komponenten

4. No-Code/Low-Code-Entwicklung

• Designer oder Marketingfachleute, die einfache Webanwendungen eigenständig erstellen
• Reduzierung der Abhängigkeit von professionellen Entwicklern

Projektvorteile

Kosteneffizienz

• Völlig kostenlos: Keine Abonnementgebühren oder Nutzungsbeschränkungen
• Keine zusätzlichen API-Gebühren: Direkte Nutzung bestehender Claude- oder Cursor-Abonnements

Entwicklungsgeschwindigkeit

• Minuten-Entwicklung: Ideen in funktionierende Anwendungen in wenigen Minuten umwandeln
• Produktionsreif: Generiert sauberen, wartbaren Code, der den Best Practices der Branche entspricht
• Sofortiges Feedback: Echtzeit-Vorschau-Funktion verkürzt den Entwicklungs-Feedback-Zyklus

Flexibilität

• Unterstützung mehrerer KI-Agenten: Unterstützt Claude Code und Cursor CLI
• Kein Vendor Lock-in: Volle Code-Eigentümerschaft
• Anpassbar: Generierter Code kann geändert und erweitert werden

Zukünftige Entwicklungspläne

Gemäß der Projekt-Roadmap umfassen die kommenden Funktionen:

• Neue CLI-Agenten: Unterstützung für weitere KI-Codierungstools
• Konversations-Checkpoints: Speichern und Wiederherstellen des Konversations-/Codebasis-Status
• Verbesserte MCP-Integration: Native, tiefe MCP-Integration
• Sub-Agenten-System: Verbesserte Agenten-Systemarchitektur

Open-Source-Informationen

• GitHub: https://github.com/opactorai/Claudable
• Entwickler: OPACTOR (https://opactor.ai)
• Community-Support: Aktive Open-Source-Community, kontinuierliche Updates und Verbesserungen

Zusammenfassung

Claudable repräsentiert ein neues Paradigma in der Webentwicklung, indem es natürliche Sprachbeschreibungen durch KI-Agenten direkt in bereitstellbare Webanwendungen umwandelt. Es senkt nicht nur die Einstiegshürde für die Webentwicklung, sondern steigert auch die Entwicklungseffizienz erheblich und ist ein unverzichtbares Werkzeug im Werkzeugkasten des modernen Entwicklers.