Jak zbudować pełnostackową aplikację AI z FastAPI i Next.js

Problem

Budowanie produkcyjnej aplikacji AI od zera oznacza rozwiązywanie tych samych problemów za każdym razem: struktura API, uwierzytelnianie, konfiguracja bazy danych, streaming przez WebSocket, scaffolding frontendu, konfiguracja Docker, pipeline CI/CD. Robiliśmy to ponad 30 razy — dla klientów i dla siebie. Za każdym razem zajmuje to 2-4 tygodnie.

Full-Stack AI Agent Template skraca to do 30 minut.

TL;DR

• Jedna komenda CLI generuje pelna aplikacje AI z backendem FastAPI, frontendem Next.js, auth, baza danych, streamingiem WebSocket, Dockerem i CI/CD - wszystko skonfigurowane i przetestowane.
• 75+ opcji konfiguracji w 9 krokach: baza danych, auth, framework AI, infrastruktura, integracje, narzedzia deweloperskie i frontend.
• 5 frameworkow AI wspieranych od razu: Pydantic AI, LangChain, LangGraph, CrewAI i DeepAgents.
• 3 presety dla typowych ustawien - minimal (prototypowanie), production (enterprise) i ai-agent (chat z streamingiem).
• Konfigurator webowy dostepny na oss.vstorm.co do wizualnej konfiguracji projektu z pobieraniem ZIP.

Co otrzymujesz

Jedno polecenie pip install daje Ci kompletny projekt z:

• Backend FastAPI z asynchronicznym API, ustrukturyzowanym logowaniem i obsługą błędów
• Frontend Next.js 15 z App Router, TypeScript i Tailwind CSS
• Integracja z agentami AI — wybierz spośród Pydantic AI, LangChain, LangGraph, CrewAI lub DeepAgents
• Streaming WebSocket dla odpowiedzi AI w czasie rzeczywistym
• Uwierzytelnianie — JWT, klucze API lub Google OAuth
• Baza danych — PostgreSQL, MongoDB lub SQLite
• Docker Compose do środowiska deweloperskiego i produkcyjnego
• CI/CD — GitHub Actions lub GitLab CI

Szybki start

1. Zainstaluj generator

pip install fastapi-fullstack

2. Wygeneruj swój projekt

fastapi-fullstack create my-ai-app

Interaktywne CLI przeprowadzi Cię przez ponad 75 opcji konfiguracji. Możesz też użyć presetu:

# 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. Uruchom środowisko deweloperskie

cd my-ai-app
docker compose up -d

Twoja aplikacja działa pod adresem http://localhost:3000 z hot reload zarówno na backendzie, jak i frontendzie.

Struktura projektu

Wygenerowany projekt ma czystą, skalowalną 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

Konfiguracja agenta AI

Tak wygląda integracja z agentem AI przy użyciu Pydantic AI:

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)

Endpoint WebSocket obsługuje streaming automatycznie:

@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})

Konfigurator webowy

Nie lubisz CLI? Konfigurator webowy oferuje 9-etapowy wizualny kreator:

1. Podstawy projektu — nazwa, opis
2. Framework AI — Pydantic AI, LangChain, LangGraph, CrewAI, DeepAgents
3. Dostawca LLM — OpenAI, Anthropic, OpenRouter
4. Baza danych — PostgreSQL, MongoDB, SQLite lub brak
5. Uwierzytelnianie — JWT, klucze API, Google OAuth lub brak
6. Infrastruktura — Docker, Kubernetes, reverse proxy
7. Obserwowalność — Logfire, Sentry, Prometheus
8. CI/CD — GitHub Actions, GitLab CI
9. Przegląd i pobranie — pobierz skonfigurowany projekt jako ZIP

Wdrożenie produkcyjne

Wygenerowany projekt zawiera wszystko, co potrzebne do produkcji:

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

Manifesty Kubernetes są również generowane, jeśli wybrałeś tę opcję.

Co dalej

Gdy Twój projekt już działa, możesz:

• Dodać własne narzędzia do agenta AI
• Zaimplementować RAG z własnymi danymi
• Dodać więcej endpointów API
• Dostosować interfejs frontendu
• Skonfigurować dashboardy monitoringu

Szablon daje Ci fundament. Ty skupiasz się na tym, co czyni Twoją aplikację wyjątkową.

Zacznij teraz: template.vstorm.co/configurator/