So erstellst du eine Full-Stack-KI-App mit FastAPI und Next.js

Das Problem

Eine produktionsreife KI-App von Grund auf zu bauen bedeutet, jedes Mal dieselben Probleme zu lösen: API-Struktur, Authentifizierung, Datenbank-Setup, WebSocket-Streaming, Frontend-Scaffolding, Docker-Konfiguration, CI/CD-Pipelines. Wir haben das über 30 Mal gemacht — für Kunden und für uns selbst. Jedes Mal dauert es 2-4 Wochen.

Das Full-Stack AI Agent Template reduziert das auf 30 Minuten.

TL;DR

• Ein CLI-Befehl generiert eine komplette AI-App mit FastAPI-Backend, Next.js-Frontend, Auth, Datenbank, WebSocket-Streaming, Docker und CI/CD - alles konfiguriert und getestet.
• 75+ Konfigurationsoptionen in 9 Schritten: Datenbank, Auth, AI-Framework, Infrastruktur, Integrationen, Dev-Tools und Frontend.
• 5 AI-Frameworks unterstuetzt out of the box: Pydantic AI, LangChain, LangGraph, CrewAI und DeepAgents.
• 3 Presets fuer gaengige Setups - minimal (Prototyping), production (Enterprise) und ai-agent (Chat-Apps mit Streaming).
• Web-Konfigurator verfuegbar auf oss.vstorm.co zur visuellen Projektkonfiguration mit ZIP-Download.

Was du bekommst

Ein einziges pip install liefert dir ein vollständiges Projekt mit:

• FastAPI-Backend mit asynchroner API, strukturiertem Logging und Fehlerbehandlung
• Next.js 15-Frontend mit App Router, TypeScript und Tailwind CSS
• KI-Agent-Integration — wähle zwischen Pydantic AI, LangChain, LangGraph, CrewAI oder DeepAgents
• WebSocket-Streaming für KI-Antworten in Echtzeit
• Authentifizierung — JWT, API-Schlüssel oder Google OAuth
• Datenbank — PostgreSQL, MongoDB oder SQLite
• Docker Compose für Entwicklung und Produktion
• CI/CD — GitHub Actions oder GitLab CI

Schnellstart

1. Generator installieren

pip install fastapi-fullstack

2. Projekt generieren

fastapi-fullstack create my-ai-app

Das interaktive CLI führt dich durch über 75 Konfigurationsoptionen. Oder verwende ein Preset:

# Minimal — no database, no auth, just FastAPI
fastapi-fullstack create my-app --preset minimal

# Production — PostgreSQL, JWT, Docker, Kubernetes, CI/CD
fastapi-fullstack create my-app --preset production

# AI Agent — Pydantic AI, WebSocket streaming, conversation history
fastapi-fullstack create my-app --preset ai-agent

3. Entwicklung starten

cd my-ai-app
docker compose up -d

Deine App läuft unter http://localhost:3000 mit Hot Reload sowohl im Backend als auch im Frontend.

Projektstruktur

Das generierte Projekt folgt einer sauberen, skalierbaren Architektur:

my-ai-app/
├── backend/
│   ├── app/
│   │   ├── api/           # API routes
│   │   ├── agents/        # AI agent definitions
│   │   ├── core/          # Config, security, dependencies
│   │   ├── models/        # Database models
│   │   ├── schemas/       # Pydantic schemas
│   │   └── services/      # Business logic
│   ├── tests/
│   └── pyproject.toml
├── frontend/
│   ├── src/
│   │   ├── app/           # Next.js App Router pages
│   │   ├── components/    # React components
│   │   ├── hooks/         # Custom hooks (WebSocket, auth)
│   │   └── lib/           # API client, utilities
│   └── package.json
├── docker-compose.yml
├── docker-compose.prod.yml
└── .env.example

KI-Agent einrichten

So sieht die KI-Agent-Integration mit Pydantic AI aus:

from pydantic_ai import Agent, RunContext
from app.core.deps import AgentDeps

agent = Agent(
    "openai:gpt-4o",
    deps_type=AgentDeps,
    system_prompt="You are a helpful AI assistant.",
)

@agent.tool
async def search_knowledge_base(
    ctx: RunContext[AgentDeps], query: str
) -> str:
    """Search the knowledge base for relevant information."""
    results = await ctx.deps.search_service.search(query)
    return "\n".join(r.content for r in results)

Der WebSocket-Endpoint übernimmt das Streaming automatisch:

@router.websocket("/ws/chat")
async def chat_websocket(
    websocket: WebSocket,
    current_user: User = Depends(get_ws_user),
):
    await websocket.accept()
    async with agent.run_stream(
        message, deps=AgentDeps(user=current_user, db=db)
    ) as response:
        async for chunk in response.stream_text():
            await websocket.send_json({"type": "chunk", "content": chunk})

Web-Konfigurator

Kein Fan von CLIs? Der Web-Konfigurator bietet einen visuellen Assistenten in 9 Schritten:

1. Projekt-Grundlagen — Name, Beschreibung
2. KI-Framework — Pydantic AI, LangChain, LangGraph, CrewAI, DeepAgents
3. LLM-Anbieter — OpenAI, Anthropic, OpenRouter
4. Datenbank — PostgreSQL, MongoDB, SQLite oder keine
5. Authentifizierung — JWT, API-Schlüssel, Google OAuth oder keine
6. Infrastruktur — Docker, Kubernetes, Reverse Proxy
7. Observability — Logfire, Sentry, Prometheus
8. CI/CD — GitHub Actions, GitLab CI
9. Überprüfen und herunterladen — dein konfiguriertes Projekt als ZIP erhalten

Produktions-Deployment

Das generierte Projekt enthält alles für die Produktion:

services:
  backend:
    build:
      context: ./backend
      dockerfile: Dockerfile.prod
    environment:
      - DATABASE_URL=postgresql://...
      - OPENAI_API_KEY=${OPENAI_API_KEY}
    restart: always

  frontend:
    build:
      context: ./frontend
      dockerfile: Dockerfile.prod
    restart: always

  nginx:
    image: nginx:alpine
    ports:
      - "80:80"
      - "443:443"
    restart: always

Kubernetes-Manifeste werden ebenfalls generiert, wenn du diese Option ausgewählt hast.

Wie geht es weiter

Sobald dein Projekt läuft, kannst du:

• Eigene Tools zu deinem KI-Agenten hinzufügen
• RAG mit deinen eigenen Daten implementieren
• Weitere API-Endpoints hinzufügen
• Die Frontend-Oberfläche anpassen
• Monitoring-Dashboards einrichten

Das Template gibt dir das Fundament. Du konzentrierst dich auf das, was deine App einzigartig macht.

Jetzt loslegen: template.vstorm.co/configurator/