Claudable: Erstellung und Bereitstellung von Websites mithilfe von KI-Intelligenzen

Claudable ist ein Open-Source-Website-Builder. Es verbindet KI-Codierintelligenzen wie Claude Code oder Cursor Agent, um es Nutzern zu ermöglichen, Webanwendungen zu erstellen, zu entwickeln und einzusetzen, indem sie einfache Befehle erteilen. Die Nutzer beschreiben einfach in natürlicher Sprache, was sie wollen, z. B. "Ich möchte eine Aufgabenverwaltungs-App mit einem dunklen Modus", und Claudable nutzt die KI-Intelligenzen, um den entsprechenden Code zu generieren und eine Live-Vorschau zu erstellen. Das Tool basiert auf dem Next.js-Framework und integriert Vercel für die Bereitstellung mit einem Klick, Supabase für die Datenbankverwaltung und GitHub für die Versionskontrolle. Das Projekt wurde mit dem Ziel konzipiert, den Entwicklungsprozess zu vereinfachen, indem es Nutzern ermöglicht, professionelle Webanwendungen kostenlos zu erstellen und zu veröffentlichen, ohne sich mit komplexen Umgebungskonfigurationen oder API-Schlüsselproblemen auseinandersetzen zu müssen.

Funktionsliste

• AI Intelligent Body Driver EntwicklungUnterstützung für die Verbindung von Claude Code und Cursor CLI als KI-Kodierintelligenz zur Generierung von Next.js-Code für Produktionsumgebungen auf der Grundlage von natürlichsprachlichen Anweisungen der Benutzer.
• Sofortige VorschauWährend AI Anwendungen erstellt, können Benutzer mit der Hot-Reload-Funktion die Auswirkungen von Codeänderungen sofort in Echtzeit sehen.
• Ein-Klick-BereitstellungVercel ist in Vercel integriert, so dass die Benutzer ihre entwickelten Anwendungen mit einem Klick online veröffentlichen können, ohne dass komplexe Bereitstellungskonfigurationen erforderlich sind.
• Datenbank-IntegrationUnterstützung für die Verbindung mit Supabase zur schnellen Konfiguration von PostgreSQL-Datenbanken in Produktionsqualität und Benutzerauthentifizierungsfunktionen für Anwendungen.
• Automatisierte VersionskontrolleIntegrierte GitHub-Integration zur automatischen Einrichtung von Versionskontrolle und kontinuierlicher Bereitstellung für Projekte.
• Null-Konfiguration beim StartVereinfacht den anfänglichen Einrichtungsprozess, da die manuelle Konfiguration von Sandbox-Umgebungen, API-Schlüsseln oder Datenbanken entfällt, so dass sich die Benutzer auf die Anwendungsentwicklung konzentrieren können.
• Automatische FehlerbehebungDas System erkennt automatisch Fehler in der Anwendung und versucht, diese mithilfe von KI-Intelligenz zu beheben.
• Moderne UI-GenerierungVerwendung beliebter Frontend-Bibliotheken wie Tailwind CSS und shadcn/ui zur Erstellung schöner Benutzeroberflächen.

Hilfe verwenden

Claudable kombiniert die Leistung von KI-Programmierintelligenz mit einer intuitiven App-Erstellung, die Entwicklern und gelegentlichen Nutzern gleichermaßen den Einstieg erleichtert. Nachfolgend finden Sie Details zur Installation und Verwendung von Claudable.

vorläufige Vorbereitung

Bevor Sie mit der Installation von Claudable beginnen, vergewissern Sie sich, dass die folgende Software und Tools auf Ihrem Computer installiert sind:

• Node.jsVersion muss 18 oder höher sein.
• PythonVersion muss 3.10 oder höher sein.
• GitKlonen: Dient zum Klonen des Projektcode-Repositorys.
• KI-kodierte IntelligenzenSie müssen Claude Code oder Cursor CLI installieren und sich dort anmelden, was sehr zu empfehlen ist.Claude Codefür die beste Erfahrung.

Installation von kodierten AI-Intelligenzen

Sie können sich für eine der beiden Optionen entscheiden, je nachdem, was Sie bevorzugen:

1) Claude Code
Installieren Sie global über npm, den Paketmanager für Node.js:

npm install -g @anthropic-ai/claude-code

Sobald die Installation abgeschlossen ist, melden Sie sich bei Ihrem Claude-Konto im Terminal an:

claude

Folgen Sie dann den Aufforderungen und geben Sie den Befehl /login Schließen Sie die Anmeldung ab.

2. cursor CLI
Es ist etwas langsamer als Claude Code, aber leistungsfähiger, wenn es um komplexe Codierungsaufgaben geht.
Verwenden Sie den Befehl curl zur Installation:

curl https://cursor.com/install -fsS | bash

Nach der Installation ist die gleiche Anmeldung erforderlich: "`shell
Cursor-Agent-Anmeldung

### **快速启动**
按照以下步骤，你可以在几分钟内在你本地电脑上运行Claudable。
**第一步：克隆代码仓库**
打开终端，使用`git`命令将Claudable的源代码克隆到本地：
```shell
git clone https://github.com/opactorai/Claudable.git

Schritt 2: Eingabe des Projektkatalogs

cd Claudable

Schritt 3: Installieren von Abhängigkeiten
Führen Sie es im Stammverzeichnis des Projekts ausnpm installBefehl. Mit diesem Befehl werden alle erforderlichen Einstellungen automatisiert, einschließlich:

• Installieren Sie Front-End- und Back-End-Node.js-Abhängigkeitspakete.
• Im Backend-API-Verzeichnis apps/api/ Erstellen Sie eine virtuelle Python-Umgebung unter .venv.
• ausnutzenuvvielleichtpipInstallieren Sie alle Python-Abhängigkeiten.
• Erkennt automatisch die verfügbaren Ports und erstellt.envUmweltprofile.
• Bei der ersten Fahrt, auf der data/ Automatische Erstellung von SQLite-Datenbankdateien im Verzeichnis cc.db.

npm install

Schritt 4: Starten Sie den Entwicklungsserver
Nachdem die Installation abgeschlossen ist, führen Siedevum sowohl den Front-End- als auch den Back-End-Server zu starten:

npm run dev

Nach erfolgreichem Start sehen Sie im Terminal die folgende Meldung, die anzeigt, dass die Anwendung ausgeführt wird:

• Front-End-Anwendung: http://localhost:3000
• Backend-API-Server: http://localhost:8080
• API-Dokumentation: http://localhost:8080/docs

Hinweis: Wenn die Standardports (3000 und 8080) bereits belegt sind, erkennt das System automatisch den nächsten verfügbaren Port und weist ihn zu.

Wie zu verwenden

Wenn Claudable eingerichtet ist und läuft, können Sie mit der Entwicklung Ihrer App beginnen.

1. Vernetzung der AI-IntelligenzVergewissern Sie sich, dass Sie Claude Code oder Cursor CLI wie in den vorherigen Schritten beschrieben installiert und angemeldet haben.
2. Beschreiben Sie Ihr ProjektIn der Benutzeroberfläche von Claudable beschreiben Sie die Anwendung, die Sie erstellen möchten, in natürlicher Sprache. Zum Beispiel: "Erstellen Sie eine Blogging-Plattform, auf der Benutzer Artikel veröffentlichen und kommentieren können".
3. Beobachten Sie, wie AI Code erzeugtNach Übermittlung der Beschreibung beginnen die KI-Intelligenzen mit der Analyse Ihrer Anforderungen und erstellen automatisch die Projektstruktur und den Code.
4. Vorschau und Iteration in Echtzeit: Während die KI arbeitet, können Sie den Browser über die Schaltflächehttp://localhost:3000Sie können den Fortschritt der Anwendungsentwicklung in Echtzeit verfolgen. Wenn Sie mit den Ergebnissen nicht zufrieden sind, können Sie jederzeit neue Anweisungen zur Änderung und Wiederholung vorschlagen.
5. Einsatz geht liveWenn Sie mit der App zufrieden sind, können Sie sie mit einem Klick über die integrierte Vercel-Funktion online stellen.

Dienstintegration

Für die Bereitstellung und die Datenbankfunktionen müssen Sie eine Verbindung zu GitHub, Vercel und Supabase herstellen.

• GitHub-Integration::
  1. Gehen Sie auf die Seite mit den persönlichen Einstellungen von GitHub, um einen neuen persönlichen Zugang zu erstellen Token (klassisch).
  2. Zecke repo Umfang der Befugnisse.
  3. In Claudable's设置 -> 服务集成 -> GitHubGeben Sie den von Ihnen generierten Token ein und erstellen oder verbinden Sie ein Code-Repository.
• Integration von Vercel::
  1. Gehen Sie auf die Seite mit den Kontoeinstellungen von Vercel, um einen Token zu erstellen.
  2. In Claudable's设置 -> 服务集成 -> VercelGeben Sie den Token ein und erstellen Sie ein neues Projekt für die Bereitstellung.
• Supabase-Integration::
  1. Rufen Sie das Supabase-Dashboard auf und suchen Sie die API-Anmeldeinformationen in Ihren Projekteinstellungen.
  2. Sie müssen Folgendes vorlegen项目URLundAnon Key(der öffentliche Schlüssel für den Client) undService Role Key(für serverseitige private Schlüssel).
  3. Geben Sie diese Informationen in die Supabase-Integrationseinstellungen von Claudable ein.

Anwendungsszenario

1. Schnelles Prototyping
   Unternehmer oder Produktmanager, die eine Produktidee schnell validieren möchten, können mit Claudable innerhalb von Minuten einen interaktiven App-Prototyp mit einer einfachen Textbeschreibung erstellen, um eine Demo zu präsentieren und frühes Nutzerfeedback zu sammeln.
2. Automatisierte Front-End-Entwicklung
   Front-End-Entwickler können Claudable verwenden, um sich wiederholende Entwicklungsaufgaben zu automatisieren, z. B. die Erstellung von Projekt-Frameworks, die Generierung von UI-Komponenten oder das Schreiben einfacher Seiten. So kann mehr Zeit für komplexe Geschäftslogik und die Optimierung der Benutzerfreundlichkeit aufgewendet werden.
3. Webentwicklung lernen
   Für Programmieranfänger ist Claudable ein großartiges Lernwerkzeug. Indem sie beobachten, wie KI Anforderungen in natürlicher Sprache in tatsächlichen Code umsetzt, können Anfänger ein intuitiveres Verständnis für die Architektur und den Entwicklungsprozess moderner Webanwendungen gewinnen.
4. Kein Code/Low Code Entwicklung
   Benutzer, die keine tiefgreifenden Programmierkenntnisse haben, wie z. B. Designer oder Marketingexperten, können Claudable auch verwenden, um selbständig einige einfache Websites oder Anwendungen zu erstellen, wie z. B. persönliche Portfolioseiten, Landingpages für Veranstaltungen und so weiter.

QA

1. Ist Claudable kostenlos?
   Ja, das Claudable-Projekt selbst ist quelloffen und kostenlos. Es ist jedoch auf Dienste von Drittanbietern angewiesen, die Kosten verursachen können, z. B. die von Ihnen verwendeten KI-Intelligenzen (Claude Code oder Cursor), die Bereitstellungsdienste von Vercel oder die Datenbankdienste von Supabase, je nach Ihrer Nutzung und dem von Ihnen gewählten Paket.
2. Brauche ich Programmierkenntnisse, um Claudable zu benutzen?
   Die Kernphilosophie von Claudable besteht darin, den Nutzern die Möglichkeit zu geben, Anwendungen durch natürliche Sprache zu erstellen. Grundlegende Kenntnisse in der Webentwicklung (z. B. HTML, CSS, JavaScript) helfen Ihnen jedoch dabei, die Anforderungen genauer zu beschreiben und den von der KI generierten Code fein abzustimmen.
3. Wie hoch ist die Qualität von KI-generiertem Code?
   Claudable nutzt fortschrittliche KI-Codierintelligenz, um Code zu generieren, der in der Regel von hoher Qualität ist und "out of the box" in Produktionsumgebungen verwendet werden kann. Der generierte Code basiert auf Industriestandard-Frameworks wie Next.js und folgt Best Practices. Für komplexe Anwendungen wird jedoch eine Überprüfung und Optimierung des Codes durch professionelle Entwickler empfohlen.
4. Was sollte ich tun, wenn ich einen Berechtigungsfehler erhalte?
   In einer WSL-Umgebung unter macOS, Linux oder Windows kann es zu Problemen mit der Dateiberechtigung kommen. Die Lösung besteht darin, nicht diesudoSie müssen sicherstellen, dass der Eigentümer des Projektordners der aktuelle Benutzer ist. Sie können auf das ProjektREADME.mdDer Abschnitt "Fehlerbehebung" des Dokuments enthält detaillierte Lösungen für verschiedene Betriebssysteme.