frontend/README.md

SystemForge AI — Frontend

Premium Next.js frontend for the SystemForge AI multi-agent architecture engine.

Tech Stack

Tool	Purpose
Next.js 14	App Router, SSR/SSG
TypeScript	Full type safety
Ant Design 5	UI component system
Framer Motion	Animations & transitions
React Three Fiber	3D particle explosion background
Three.js	3D rendering engine

Getting Started

cd frontend
npm install
npm run dev

Open http://localhost:3000

Folder Structure

frontend/
├── app/
│   ├── layout.tsx          # Root layout with Ant Design theme
│   └── page.tsx            # Main page orchestrator
├── components/
│   ├── agents/
│   │   ├── AgentCard.tsx   # Individual agent output card
│   │   └── AgentPipeline.tsx # 3-agent pipeline layout
│   ├── animations/
│   │   └── ParticleBackground.tsx  # 3D exploding Three.js scene
│   ├── layout/
│   │   └── Header.tsx      # Fixed top navigation
│   └── ui/
│       └── HeroSection.tsx # Hero + project input
├── lib/
│   ├── api.ts              # Backend API + mock mode
│   └── types.ts            # Shared TypeScript types
├── styles/
│   └── globals.css         # CSS variables, fonts, base styles
├── .env.local              # Environment config
└── package.json

Environment Variables

NEXT_PUBLIC_BACKEND_URL=http://localhost:8000   # FastAPI backend
NEXT_PUBLIC_MOCK_MODE=true                       # Enable mock responses

Mock Mode

The frontend works fully without AMD credits using mock mode. Realistic agent outputs are streamed with proper timing simulation.

Set NEXT_PUBLIC_MOCK_MODE=false and ensure NEXT_PUBLIC_BACKEND_URL points to a live backend once AMD credits are activated.

Design System

• Primary: AMD Red #E30913
• Accent: Cyan #00D4FF, Gold #FFB800, Green #00FF9C
• Font Display: Orbitron
• Font Body: Rajdhani
• Font Mono: JetBrains Mono
• Theme: Dark — void black backgrounds with glowing accents