Wir haben einen Web-Konfigurator für KI-Agenten-Apps gebaut — 75+ Optionen, als ZIP herunterladen

CLIs sind leistungsstark. Aber sie können auch einschüchternd sein.

Unser full-stack-ai-agent-template hat über 75 Konfigurationsoptionen. Datenbank, Authentifizierung, KI-Framework, Hintergrund-Tasks, Caching, Rate Limiting, Observability, Docker, Kubernetes, CI/CD, Frontend, i18n — die Liste geht weiter. Die CLI funktioniert hervorragend für Entwickler, die bereits wissen, was sie wollen. Für alle anderen ist es eine Wand aus Flags und Prompts.

Deshalb haben wir einen Web-Konfigurator gebaut. Einen visuellen 9-Schritte-Assistenten, der dich durch jede Option führt, Abhängigkeiten in Echtzeit validiert und ein produktionsreifes Projekt als ZIP-Datei generiert — direkt aus deinem Browser heruntergeladen.

Der interessante Teil: Es gibt keinen Server. Alles — Template-Rendering, Abhängigkeitsvalidierung, ZIP-Generierung — passiert clientseitig.

Der 9-Schritte-Assistent

Der Konfigurator führt durch die Projekteinrichtung in logischen Gruppen:

Projektinfo — Name, Beschreibung, Autor, Python-Version
Datenbank — PostgreSQL, MongoDB, SQLite oder Keine + ORM-Auswahl
Authentifizierung — JWT, API Key, Beides oder Keine + OAuth
KI-Agent — Framework-Auswahl (Pydantic AI, LangChain, LangGraph, CrewAI, DeepAgents), LLM-Anbieter, WebSocket-Streaming, Konversationspersistenz
Infrastruktur — Hintergrund-Tasks (Celery, TaskIQ, ARQ), Redis, Caching, Rate Limiting, Logfire, Sentry, Prometheus
Integrationen — WebSockets, Dateispeicher, Webhooks, CORS, Admin-Panel
DevTools — Docker, Kubernetes, pytest, pre-commit, CI/CD (GitHub Actions, GitLab CI)
Frontend — Next.js oder Keins, i18n
Überprüfung — Zusammenfassungskarten, Feature-Badges, Download-Aktionen

Jeder Schritt validiert in Echtzeit. Wähle PostgreSQL in Schritt 2 → ORM-Optionen erscheinen. Aktiviere Logfire in Schritt 5 → Unter-Features für Datenbank-, Redis- und Celery-Instrumentierung werden verfügbar.

3 Presets: Von Null zum Download in 10 Sekunden

Die meisten Benutzer wollen nicht 75 Optionen konfigurieren. Sie wollen einen Ausgangspunkt:

Preset	Was du bekommst	Anwendungsfall
Minimal	Keine Datenbank, keine Auth, kein Docker, kein CI	Schnelle Prototypen, FastAPI lernen
Production	PostgreSQL, JWT, Redis, Caching, Rate Limiting, Sentry, Prometheus, Docker, K8s, GitHub Actions	Deploy-fertiges Backend
AI Agent	PostgreSQL, JWT, Redis, Pydantic AI, WebSockets, Konversationspersistenz, Docker, GitHub Actions	KI-Chatbot-/Agenten-Apps

Klicke auf ein Preset → alle 75+ Felder werden vorausgefüllt → springe zur Überprüfung → ZIP herunterladen. Unter 10 Sekunden von der Landingpage zum heruntergeladenen Projekt.

Die technische Herausforderung: Clientseitiges Template-Rendering

Hier wurde es interessant. Unsere Templates verwenden Jinja2-Syntax (über Pythons cookiecutter). Wir mussten sie im Browser ohne Server rendern.

Schritt 1: 246 Templates zur Build-Zeit bündeln

Ein Build-Skript durchläuft das Template-Verzeichnis und serialisiert jede Datei in ein einzelnes JSON:

const SLUG_DIR = join(TEMPLATE_ROOT, "{{cookiecutter.project_slug}}");
// Walks all files, skips binaries (.png, .pyc, .so)
// Output: public/templates.json (~1.1 MB)

Ergebnis: templates.json — ein Dictionary, bei dem die Schlüssel relative Dateipfade und die Werte Template-Inhalts-Strings sind. Wird einmal pro Sitzung abgerufen und im Speicher gecacht.

Schritt 2: Nunjucks als browserseitiges Jinja2

Nunjucks ist eine JavaScript-Template-Engine mit Jinja2-kompatibler Syntax. Dieselben {% if %}, {% for %}, {{ variable }} — unsere Python-Templates rendern identisch im Browser.

const env = new nunjucks.Environment(undefined, {
  autoescape: false,
  throwOnUndefined: false,
  trimBlocks: true,
  lstripBlocks: true,
});

const rendered = env.renderString(templateContent, { cookiecutter: ctx });

Schritt 3: Intelligente Ausschlusslogik

Nicht jede Datei gehört in jedes Projekt. Wenn du den KI-Agenten deaktivierst, werden alle Agent-Framework-Dateien ausgeschlossen. Wenn du Pydantic AI wählst, werden LangChain-Dateien entfernt. Die Ausschlusslogik spiegelt unser Python-Skript post_gen_project.py wider.

Schritt 4: JSZip-Generierung

Nach dem Rendern und Filtern packt JSZip alles mit DEFLATE-Komprimierung:

const blob = await zip.generateAsync({
  type: "blob",
  compression: "DEFLATE",
});
downloadBlob(blob, `${projectName}.zip`);

Die gesamte Pipeline — Bundle abrufen, 246 Templates rendern, ungenutzte Dateien ausschließen, ZIP generieren — dauert 1-2 Sekunden.

Automatische Abhängigkeitskorrektur

Bestimmte Optionen haben Abhängigkeiten. Anstatt Validierungsfehler anzuzeigen, korrigiert der Konfigurator automatisch:

const needsRedis =
  cur.enable_caching ||
  (cur.enable_rate_limiting && cur.rate_limit_storage === "redis") ||
  (cur.background_tasks !== "none") ||
  (cur.enable_logfire && cur.logfire_features.redis);

if (needsRedis && !cur.enable_redis) {
  form.setValue("enable_redis", true);
}

Caching aktivieren → Redis wird stillschweigend aktiviert. Datenbank deaktivieren → Logfire-Datenbank-Instrumentierung wird stillschweigend deaktiviert. Der Benutzer sieht nie einen ungültigen Zustand.

Zod-Validierung: Gleiches Schema, andere Laufzeit

Die CLI verwendet Pythons Pydantic-Modelle für die Validierung. Das Web nutzt Zod. Beide erzwingen dieselben Einschränkungen:

Projektname: ^[a-z][a-z0-9_]*$
Ports: 1024-65535
14 Enum-Typen (Datenbank, Auth-Methode, KI-Framework usw.)
28 boolesche Feature-Toggles
Feldübergreifende bedingte Sichtbarkeit (12 Sichtbarkeitsfunktionen)

Die Download-Optionen

Der Überprüfungsschritt bietet drei Möglichkeiten, dein Projekt zu erhalten:

ZIP-Datei — vollständiger Projekt-Download (primärer CTA)
JSON — cookiecutter.json, die du in die CLI importieren kannst
CLI-Befehl — einzeiliger Befehl, in die Zwischenablage kopiert

Das bedeutet, der Web-Konfigurator und die CLI sind interoperabel. Visuell konfigurieren, als JSON exportieren, mit der CLI verwenden. Oder umgekehrt.

Wichtigste Erkenntnisse

Clientseitiges Rendering eliminiert Serverkosten — kein Backend zum Hosten, keine API zu warten, skaliert kostenlos auf unendlich viele Benutzer
Nunjucks ist Jinja2 für den Browser — wenn deine Templates Jinja2-Syntax verwenden, kannst du sie clientseitig mit nahezu null Portierungsaufwand rendern
Automatische Korrektur > Validierungsfehler — Redis stillschweigend zu aktivieren, wenn Caching eingeschaltet wird, ist bessere UX als “Redis wird für Caching benötigt” anzuzeigen
Presets + progressive Offenlegung — 3 Presets decken 80% der Benutzer ab, der 9-Schritte-Assistent bedient die anderen 20%
Build-Zeit-Bündelung — 246 Dateien in ein einzelnes JSON zu serialisieren vermeidet 246 HTTP-Anfragen

Ausprobieren: Web-Konfigurator — oder per CLI installieren: pip install fastapi-fullstack

full-stack-ai-agent-template auf GitHub