VibeKit Dokumentation
Erfahre, wie VibeKit funktioniert, wie du es lokal startest und dein SaaS aufbaust.
Baue deine Website mit einem KI-Coding-Agenten und den Skills dieses Templates. Starte mit Deine Website mit KI bauen und nutze den vollständigen Skill-Katalog für weitere Änderungen.
VibeKit ist ein vollständiges Next.js-Fundament für den Bau von produktionsreifen Webanwendungen und SaaS-Produkten. Es bietet ein vollständig typisiertes Monorepo mit Authentifizierung, Datenbank-Tools, Zahlungen, E-Mail, Dateispeicher, Internationalisierung und Administrationsfunktionen.
Die Dokumentations-Oberfläche nutzt Fumadocs. Nutze die offizielle Fumadocs-Dokumentation für Markdown, MDX-Komponenten, Layouts und Suche. Diese Website dokumentiert, wie VibeKit Fumadocs einsetzt und wie der Rest des Templates aufgebaut ist.
Schnellstart
Richte deine lokale Umgebung ein und starte VibeKit in unter fünf Minuten.
Projektstruktur
Erfahre, wie die Pakete und Anwendungen des Monorepos zusammenspielen.
Architektur
Verstehe das Zusammenspiel von Next.js, tRPC, Prisma und Better Auth.
Wie Fumadocs verdrahtet ist
Routen, Source-Loader, Suche und LLM-Endpunkte in diesem Template.
Zahlungen & Abrechnung
Richte Checkouts ein, verarbeite Webhooks und liefere Käufe aus.
Workflows & Deployment
Führe Tests aus, verwalte Datenbankmigrationen und deploye in Produktion.
Offizielles Fumadocs
- Schnellstart
- Markdown
- Seiten-Konventionen
- MDX-Quelle
- Docs-Layout
- Suche
- Internationalisierung
- LLM / KI-Endpunkte
Kopiere diese Anleitungen nicht in dieses Repository. Verlinke darauf und dokumentiere hier nur die VibeKit-spezifischen Pfade und Verhaltensweisen.
Was enthalten ist
VibeKit enthält vorkonfigurierte Pakete und Anwendungen, die direkt einsatzbereit sind:
- Next.js & React: Modernes App Router Setup mit Server Components, TypeScript und Tailwind CSS.
- Better Auth: Schnelle, sichere Authentifizierung mit Passwörtern, E-Mail-Einmalcodes (OTP) und Session-Management.
- PostgreSQL & Prisma ORM: Typensichere Datenbankabfragen, Schemavalidierung mit Zod und Migrations-Workflows.
- tRPC API-Schicht: Durchgängige End-to-End-Typensicherheit zwischen Client-Komponenten und Backend-Prozeduren.
- Mandantenfähigkeit & Teams: Teamerstellung, Mitgliedereinladungen und rollenbasierte Berechtigungen (
OWNERundMEMBER). - Zahlungsabwicklung: Checkout, signierte Webhook-Verifizierung und Mock-Zahlungen für die lokale Entwicklung.
- React Email: Transaktionale E-Mails via Konsole, Resend, Postmark, Cloudflare, Plunk und Nodemailer.
- S3-Speicher: Upload von Avataren und Dateien auf AWS S3, Cloudflare R2, MinIO oder den integrierten Mock-Adapter.
- Fumadocs: Schnelle, suchoptimierte Dokumentation auf MDX-Basis.
- Playwright-Tests: Headless-Browser-Smoketests für die lokale Entwicklung und CI.
Saubere Framework-Grenzen
VibeKit trennt die Kerninfrastruktur in modularen packages/* von den Anwendungsrouten in apps/web. Du kannst jedes Feature anpassen, ohne geteilte Logik neu schreiben zu müssen.
Nächste Schritte
- Schnellstart-Anleitung — erstelle die
.env, pushe das Schema und starte den Entwicklungsserver. - Konfiguration — Umgebungsvariablen und
config.tskonfigurieren. - Wie Fumadocs verdrahtet ist — Content-Ordner, Catch-All-Route, Suche und LLM-Endpunkte.