AI-Native Web Development: как собрать продакшен-стек на Django, Vue и Docker с AI-агентами внутри

# Структура Django-проекта для AI-Native приложения
project/
├── docker-compose.yml
├── Dockerfile
├── backend/
│   ├── apps/
│   │   ├── core/          # Базовые модели и утилиты
│   │   ├── agents/        # AI-агенты как Django-приложение
│   │   │   ├── models.py  # AgentRun, AgentLog, ToolCall
│   │   │   ├── tasks.py   # Celery-таски для агентов
│   │   │   └── tools.py   # Инструменты агентов
│   │   └── api/           # DRF ViewSets
│   └── settings/
│       ├── base.py
│       └── production.py
└── frontend/
    ├── src/
    │   ├── components/
    │   │   └── AgentDashboard.vue
    │   └── composables/
    │       └── useAgentStream.ts
    └── vite.config.ts

# docker-compose.yml
version: '3.9'

services:
  db:
    image: postgres:16-alpine
    volumes:
      - postgres_data:/var/lib/postgresql/data
    env_file: .env

  redis:
    image: redis:7-alpine

  backend:
    build: ./backend
    command: gunicorn config.wsgi:application --bind 0.0.0.0:8000
    volumes:
      - ./backend:/app
    depends_on:
      - db
      - redis
    env_file: .env

  # Celery-воркер для AI-агентов — изолированный процесс
  agent_worker:
    build: ./backend
    command: celery -A config worker -Q agents -c 2 --loglevel=info
    volumes:
      - ./backend:/app
    depends_on:
      - redis
      - db
    env_file: .env

  frontend:
    build: ./frontend
    ports:
      - "5173:5173"
    volumes:
      - ./frontend:/app

volumes:
  postgres_data:

# backend/apps/agents/models.py
from django.db import models

class AgentRun(models.Model):
    class Status(models.TextChoices):
        PENDING = 'pending', 'Ожидает'
        RUNNING = 'running', 'Выполняется'
        SUCCESS = 'success', 'Успешно'
        FAILED  = 'failed',  'Ошибка'

    task_type   = models.CharField(max_length=100)
    input_data  = models.JSONField()
    output_data = models.JSONField(null=True, blank=True)
    status      = models.CharField(
        max_length=20,
        choices=Status.choices,
        default=Status.PENDING
    )
    tokens_used  = models.IntegerField(default=0)
    created_at   = models.DateTimeField(auto_now_add=True)
    completed_at = models.DateTimeField(null=True, blank=True)

    class Meta:
        indexes = [models.Index(fields=['status', 'task_type'])]

# backend/apps/agents/client.py
# Единый клиент с поддержкой DeepSeek и self-hosted через OpenAI-совместимый API
from openai import AsyncOpenAI
from django.conf import settings

def get_llm_client() -> AsyncOpenAI:
    """Возвращает клиент в зависимости от настроек окружения."""
    return AsyncOpenAI(
        api_key=settings.LLM_API_KEY,
        base_url=settings.LLM_BASE_URL,  # https://api.deepseek.com или localhost
    )

async def run_agent_completion(
    system_prompt: str,
    user_message: str,
    tools: list | None = None,
) -> dict:
    client = get_llm_client()
    kwargs = {
        "model": settings.LLM_MODEL,  # deepseek-chat или deepseek-r1
        "messages": [
            {"role": "system", "content": system_prompt},
            {"role": "user",   "content": user_message},
        ],
        "max_tokens": 2048,
    }
    if tools:
        kwargs["tools"] = tools
        kwargs["tool_choice"] = "auto"

    response = await client.chat.completions.create(**kwargs)
    return response

<!-- frontend/src/components/AgentDashboard.vue -->
<script setup lang="ts">
import { useAgentStream } from '@/composables/useAgentStream'

const { status, output, tokens, startAgent, isRunning } = useAgentStream()

async function handleRun() {
  await startAgent({
    task_type: 'content_review',
    input_data: { article_id: 42 }
  })
}
</script>

<template>
  <div class="p-6 bg-white rounded-2xl shadow-sm border border-slate-100">
    <div class="flex items-center justify-between mb-4">
      <h2 class="text-lg font-semibold text-slate-800">AI-агент: ревью контента</h2>
      <span
        :class="{
          'bg-amber-100 text-amber-700': status === 'running',
          'bg-emerald-100 text-emerald-700': status === 'success',
          'bg-red-100 text-red-700': status === 'failed',
        }"
        class="px-3 py-1 rounded-full text-sm font-medium"
      >
        {{ status }}
      </span>
    </div>

    <!-- Стримингový вывод агента -->
    <div
      v-if="output"
      class="bg-slate-50 rounded-xl p-4 font-mono text-sm text-slate-700
             whitespace-pre-wrap max-h-64 overflow-y-auto"
    >
      {{ output }}
    </div>

    <div class="mt-4 flex items-center justify-between">
      <span class="text-xs text-slate-400">Токенов использовано: {{ tokens }}</span>
      <button
        @click="handleRun"
        :disabled="isRunning"
        class="px-4 py-2 bg-indigo-600 text-white rounded-lg text-sm font-medium
               hover:bg-indigo-700 disabled:opacity-50 disabled:cursor-not-allowed
               transition-colors"
      >
        {{ isRunning ? 'Выполняется...' : 'Запустить агента' }}
      </button>
    </div>
  </div>
</template>