KI-gestützte Full-Stack-Webentwicklungsplattform von StackBlitz, die Anwendungen vollständig im Browser generiert, ausführt und bereitstellt.
| Befehl | Beschreibung |
|---|
Zu bolt.new navigieren | Bolt.new im Browser öffnen |
| Mit GitHub oder Google anmelden | Konto für Projektpersistenz erstellen |
| Prompt in den Chat eingeben | Mit dem Erstellen einer Anwendung beginnen |
| Auf “Deploy” klicken wenn bereit | Auf Netlify oder anderen Hosts bereitstellen |
| Zu StackBlitz forken | Im StackBlitz IDE weiterbearbeiten |
| Projekt herunterladen | Quellcode als Zip erhalten |
Bolt.new Architektur:
1. Sie beschreiben, was Sie möchten, in natürlicher Sprache
2. KI generiert das vollständige Projekt (Frontend + Backend + Konfiguration)
3. WebContainer führt die App im Browser aus (kein Server nötig)
4. Live-Vorschau aktualisiert sich während die KI Änderungen vornimmt
5. Sie iterieren per Chat — KI modifiziert Code in Echtzeit
6. Direkt auf Netlify deployen oder Quellcode herunterladen
Technologie: Läuft auf StackBlitz WebContainers
- Node.js läuft IM Browser (nicht auf einem Remote-Server)
- npm install, Build und Dev-Server laufen alle lokal
- Kein Docker, keine VMs, keine Cloud-Rechenleistung
| Prompt-Stil | Beschreibung |
|---|
| ”Build a todo app with React and Tailwind” | Framework und Styling angeben |
| ”Create a REST API with Express and MongoDB” | Backend-fokussierter Prompt |
| ”Make a landing page for a SaaS product” | Design-fokussierter Prompt |
| ”Add authentication with email/password” | Features zum bestehenden Projekt hinzufügen |
| ”Fix the bug where the form doesn’t submit” | Bestehende Probleme debuggen |
| ”Change the color scheme to dark mode” | Stil-Modifikationen |
| ”Add a dashboard page with charts” | Neue Seiten-/Feature-Anfrage |
| ”Refactor the code to use TypeScript” | Codequalitätsverbesserungen |
Gute Prompts:
"Build a blog platform with Next.js, Tailwind CSS,
and MDX support. Include a homepage listing posts,
individual post pages, and a tag filtering system."
"Create a weather dashboard using React that fetches
from the OpenWeatherMap API. Show current weather,
5-day forecast, and a search by city feature."
Schlechte Prompts:
"Make me a website" → Zu vage
"Build Facebook" → Zu umfangreich
"Fix everything" → Kein spezifisches Ziel
Tipps:
- Tech-Stack angeben (React, Vue, Svelte, etc.)
- Benötigte Features beschreiben
- Styling-Präferenzen erwähnen (Tailwind, CSS modules)
- Spezifische APIs oder Datenquellen referenzieren
- Große Apps in inkrementelle Prompts aufteilen
| Framework | Beschreibung |
|---|
| React | Komponentenbasierte UI-Bibliothek |
| Next.js | React-Framework mit SSR/SSG |
| Vue.js | Progressives JavaScript-Framework |
| Nuxt | Vue-Framework mit SSR/SSG |
| Svelte | Kompilierzeit-reaktives Framework |
| SvelteKit | Svelte Full-Stack-Framework |
| Astro | Content-fokussierter Static-Site-Builder |
| Solid.js | Feingranulare reaktive UI-Bibliothek |
| Angular | Vollständiges TypeScript-Framework |
| Framework | Beschreibung |
|---|
| Express.js | Minimales Node.js Web-Framework |
| Fastify | Schnelles Node.js Web-Framework |
| Hono | Leichtgewichtiges Edge-First-Framework |
| NestJS | TypeScript Enterprise-Framework |
| tRPC | End-to-End typsichere APIs |
| Remix | Full-Stack React-Framework |
| Bibliothek | Beschreibung |
|---|
| Tailwind CSS | Utility-First CSS-Framework |
| shadcn/ui | React-Komponentenbibliothek |
| DaisyUI | Tailwind-Komponentenbibliothek |
| Material UI | Googles Designsystem für React |
| Chakra UI | Zugängliche React-Komponenten |
| Radix UI | Ungestylte zugängliche Komponenten |
| Befehl | Beschreibung |
|---|
| Datei in Seitenleiste anklicken | Datei im Editor öffnen |
| Code direkt bearbeiten | Manuelle Code-Änderungen |
Ctrl + S | Dateiänderungen speichern |
| Rechtsklick auf Datei → New File | Neue Datei erstellen |
| Rechtsklick auf Datei → Delete | Datei entfernen |
| Rechtsklick auf Ordner → New Folder | Verzeichnis erstellen |
| Dateiänderungen automatisch erkannt | Hot Reload aktualisiert Vorschau |
| Befehl | Beschreibung |
|---|
| Terminal-Panel unten anklicken | WebContainer-Terminal öffnen |
npm install package | npm-Pakete installieren |
npm run dev | Entwicklungsserver starten |
npm run build | Für Produktion bauen |
npx prisma migrate dev | Prisma-Migrationen ausführen |
node script.js | Node.js-Skripte ausführen |
| Befehl | Beschreibung |
|---|
| ”Add a navbar with logo and links” | Neue Komponenten hinzufügen |
| ”Make the button bigger and blue” | Stil-Modifikationen |
| ”Add form validation for email” | Funktionalität hinzufügen |
| ”The page crashes when I click submit” | Fehlerberichte |
| ”Show loading spinner while data fetches” | UX-Verbesserungen |
| ”Add error handling for the API call” | Robustheit |
| ”Make it responsive for mobile” | Responsives Design |
| ”Add dark mode toggle” | Theme-Wechsel |
| Befehl | Beschreibung |
|---|
| Chat-Verlauf zeigt alle Änderungen | Verfolgen was die KI geändert hat |
| ”Undo the last change” | KI-Modifikationen rückgängig machen |
| ”Go back to the version with the blue header” | Auf frühere Zustände verweisen |
| Projekt jederzeit herunterladen | Snapshots lokal speichern |
| Zu StackBlitz für Git forken | Vollständige Git-Integration |
| Befehl | Beschreibung |
|---|
| Auf “Deploy”-Button klicken | Deployment-Prozess starten |
| Netlify-Konto verbinden | Netlify-Zugriff autorisieren |
| Automatisches Bauen und Deployen | Erhält eine Live-URL in Sekunden |
| Custom-Domain-Unterstützung | Im Netlify-Dashboard konfigurieren |
| HTTPS inklusive | Automatische SSL-Zertifikate |
| Befehl | Beschreibung |
|---|
| Projekt herunterladen → manuell deployen | Jeder Hosting-Anbieter |
| Zu StackBlitz forken → CI/CD verbinden | GitHub-basiertes Deployment |
| Zu GitHub forken → Vercel/Netlify Auto-Deploy | Git-basierte Workflows |
Herunterladen → npm run build → dist/ hochladen | Manuelles statisches Hosting |
Deployment-Workflow:
1. Auf "Deploy" in Bolt.new klicken
2. Netlify auswählen (oder Konto verbinden)
3. Bolt.new baut das Projekt
4. Automatischer Upload zu Netlify
5. Ihre Live-URL erhalten: https://your-app.netlify.app
Für Custom Domains:
1. Zuerst deployen um Netlify-URL zu erhalten
2. Zum Netlify-Dashboard → Domain-Einstellungen
3. Custom Domain hinzufügen
4. DNS-Einträge beim Registrar aktualisieren
| Feature | Beschreibung |
|---|
| Node.js läuft im Browser | Kein Remote-Server nötig |
| npm/yarn/pnpm-Unterstützung | Vollständige Paketverwaltung |
| Dateisystem im Browser | Virtuelles Dateisystem |
| Dev-Server im Browser | Hot Reload mit lokalen URLs |
| Kein Docker erforderlich | Alles läuft clientseitig |
| Funktioniert offline (nach Laden) | Keine dauerhafte Internetverbindung nötig |
Was in WebContainers läuft:
✓ Node.js (neueste LTS-Version)
✓ npm, yarn, pnpm
✓ TypeScript-Kompilierung
✓ Vite, Webpack, esbuild
✓ Express, Fastify, Hono
✓ SQLite (im Arbeitsspeicher)
✓ Prisma (mit SQLite)
✓ Dateisystem-Operationen
Was NICHT läuft:
✗ Docker-Container
✗ PostgreSQL / MySQL / MongoDB
✗ Native Binär-Abhängigkeiten
✗ Python / Ruby / Go
✗ System-Level-Operationen
✗ Lang laufende Hintergrundprozesse
| Datenbank | Beschreibung |
|---|
| SQLite (im Arbeitsspeicher) | Funktioniert direkt im WebContainer |
| Prisma + SQLite | ORM mit lokaler Datenbank |
| Supabase (remote) | PostgreSQL via API |
| Firebase (remote) | NoSQL via Firebase SDK |
| Turso (remote) | Edge SQLite via libSQL |
| PlanetScale (remote) | MySQL via API |
Für lokale Entwicklung in Bolt.new:
SQLite + Prisma ist die beste Kombination
- Läuft vollständig im WebContainer
- Keine externen Dienste nötig
- Vollständiges ORM mit Migrationen
Für Produktion:
Mit einer gehosteten Datenbank verbinden
- Supabase (kostenlose Stufe: 500MB)
- Turso (kostenlose Stufe: 9GB)
- PlanetScale (kostenlose Stufe: 5GB)
Verbindungsstrings als Umgebungsvariablen setzen
| Vorlage | Beschreibung |
|---|
| ”React + Vite + Tailwind starter” | Moderne React SPA |
| ”Next.js app with shadcn/ui” | Full-Stack React |
| ”Express API with Prisma + SQLite” | REST API Backend |
| ”Vue + Nuxt + Tailwind” | Vue Full-Stack |
| ”Svelte + SvelteKit” | Svelte Full-Stack |
| ”Astro blog with MDX” | Content-Site |
| ”Landing page with Tailwind” | Marketing-Seite |
-
Mit einem klaren, spezifischen Prompt starten — Tech-Stack, Features und Design-Präferenzen von Anfang an beschreiben. “Build a task manager with React, Tailwind, and localStorage persistence” liefert bessere Ergebnisse als “make a todo app.”
-
Inkrementell bauen — Mit dem Kernfeature beginnen, überprüfen ob es funktioniert, dann Features einzeln hinzufügen. Jeder Prompt sollte sich auf eine Sache konzentrieren, statt alles auf einmal anzufordern.
-
Beim Debugging auf den Code verweisen — Statt “es funktioniert nicht” sagen “die handleSubmit-Funktion in ContactForm.tsx sendet den POST-Request nicht” für gezieltere Fixes.
-
Terminal zur Überprüfung verwenden — Die Terminal-Ausgabe auf Build-Fehler, fehlende Abhängigkeiten oder Laufzeitprobleme prüfen, bevor die KI zum Debugging aufgefordert wird.
-
Regelmäßig Backups herunterladen — Das Projekt regelmäßig als Sicherheitsnetz herunterladen. Browser-basierte Projekte können verloren gehen, wenn Browserdaten gelöscht werden.
-
Paketversionen bei Bedarf angeben — Wenn eine bestimmte Bibliotheksversion benötigt wird, diese erwähnen: “Use react-query v5” oder “Use Tailwind CSS v3, not v4.”
-
Für erweiterte Bearbeitung zu StackBlitz forken — Wenn Git, mehrere Terminals oder komplexere Workflows benötigt werden, das Projekt in die vollständige StackBlitz IDE forken.
-
Umgebungsvariablen für Geheimnisse verwenden — Niemals API-Keys in Prompts hartcodieren. Die KI bitten, Umgebungsvariablen zu verwenden und diese in der Deployment-Plattform zu setzen.
-
SQLite für In-Browser-Datenbanken wählen — Da WebContainers kein PostgreSQL oder MySQL ausführen können, SQLite mit Prisma für lokale Entwicklung verwenden und für Produktion zu einer gehosteten DB wechseln.
-
Befehlspalette nutzen — Ctrl + K drücken, um schnell Dateien zu suchen, Befehle auszuführen und durch das Projekt zu navigieren, ohne durch Menüs zu klicken.
