Frontend Breakdown

The Prax frontend is a single-page application built with:

• React (via Vite or Next.js)

• TypeScript

• Tailwind CSS for utility-first styling

• React Flow for the node-based visual editor

• SWR/React Query for data fetching

• Socket.IO (optional) for live updates

Folder Structure (Example)

bashCopyEdit/frontend
  ├── components/         # Reusable UI components
  ├── flows/              # Flow builder views
  ├── hooks/              # Custom logic hooks
  ├── icons/              # SVG icon components
  ├── pages/              # Top-level routes
  ├── services/           # API abstraction logic
  └── utils/              # Helper functions

Core Frontend Responsibilities

• Flow editor interface (drag-and-drop canvas)

• Flow configuration panel (node settings, I/O bindings)

• Chat testing interface

• User authentication (if enabled)

• Calling backend APIs (REST endpoints for flows, models, nodes)

State Management

Prax uses local React state and/or Zustand for shared flow state between components. React Flow manages canvas positioning, node connection state, and selection handling.

Key Libraries

• react-flow-renderer: canvas layout and node rendering

• axios or fetch: backend API integration

• clsx, zod, or react-hook-form for type-safe and clean form management