AutoVector

A visual, no-code pipeline builder for designing and validating directed acyclic graphs (DAGs). Built as a React + FastAPI full-stack application inspired by VectorShift.

---

Architecture

┌──────────────────────────────────────────────────────┐
│                    Frontend (React 18)               │
│                                                      │
│  ┌──────────┐  ┌──────────┐  ┌─────────────────────┐ │
│  │ toolbar  │  │  store   │  │      ui (Canvas)    │ │
│  │  .js     │──│  .js     │──│  React Flow v11     │ │
│  │          │  │ (Zustand)│  │  + DraggableMiniMap │ │
│  └──────────┘  └──────────┘  └─────────────────────┘ │
│       │                              │               │
│  ┌──────────┐                  ┌───────────┐         │
│  │draggable │                  │  submit   │         │
│  │ Node.js  │                  │   .js     │         │
│  └──────────┘                  └─────┬─────┘         │
│                                      │  POST         │
└──────────────────────────────────────┼───────────────┘
                                       │
                                       ▼
┌──────────────────────────────────────────────────────┐
│                  Backend (FastAPI)                   │
│                                                      │
│  POST /pipelines/parse                               │
│    → Node/Edge count                                 │
│    → DAG validation (Kahn's algorithm)               │
└──────────────────────────────────────────────────────┘

Frontend

Module	Purpose
store.js	Zustand store — single source of truth for nodes, edges, and all graph mutations
ui.js	React Flow canvas, drag-drop handler, DraggableMiniMap with boundary clamping + momentum physics
toolbar.js	Top toolbar with collapsible sidebar mode, AutoVector branding, dark/light theme toggle
draggableNode.js	Draggable chip component — shows full label or single-letter abbreviation when collapsed
nodes/*.js	9 node types built on a shared BaseNode wrapper (Input, Output, LLM, Text, Note, API Request, Filter, Merge, Delay)
edges/customEdge.js	Custom edge with hover-to-delete button rendered via EdgeLabelRenderer
submit.js	Pipeline submission + glassmorphic analysis modal with info-icon tooltips
index.css	Full design system — CSS variables, dark/light themes, glassmorphic toolbars, animations

Backend

Endpoint	Method	Description
/	GET	Health check
/pipelines/parse	POST	Accepts {nodes, edges}, returns node count, edge count, and DAG validation via Kahn's topological sort

---

Features

• Drag-and-drop node palette — 9 configurable node types (Input, LLM, Output, Text, Note, API Request, Filter, Merge, Delay)
• Collapsible toolbar — nodes cascade into a vertical sidebar with staggered animation; single-letter blocks expand on hover
• Dark / Light theme — full theme system with CSS variables; brand colors adapt per mode
• Glassmorphic UI — translucent top and bottom bars with backdrop-filter: blur() let the canvas bleed through
• Draggable minimap — custom implementation that injects a pointer overlay onto React Flow's panel DOM; includes boundary clamping and momentum-based coasting physics
• Custom deletable edges — hover any connection to reveal a delete button at the midpoint
• DAG validation — backend runs Kahn's algorithm to verify acyclicity before deployment
• Dynamic text node — auto-detects {{variables}} in content and generates input handles on the fly
• Responsive node system — BaseNode provides consistent header, body, and handle layout across all node types

---

Why It Helps Non-Technical Users

Traditional pipeline builders require users to write code or understand graph theory. AutoVector removes that barrier:

1. Visual-first — Users drag boxes and draw arrows. No syntax, no config files, no CLI.
2. Instant feedback — Submit a pipeline and immediately see if it's valid (DAG check) or contains loops.
3. Familiar metaphor — The canvas behaves like a whiteboard. Nodes are cards, edges are arrows.
4. Error prevention — Self-connections are blocked, edge deletion is explicit (hover → click), and the minimap provides spatial orientation at all times.
5. Zero setup — One npm start + one uvicorn command. No environment variables, no database, no auth.

---

Future Integrations (Production Path)

Area	Integration
Execution Engine	Plug in Celery / Temporal to actually execute pipelines node-by-node with retry and timeout semantics
LLM Providers	Connect the LLM node to OpenAI, Anthropic, or local Ollama endpoints via API keys stored in a secrets manager
Persistence	Add PostgreSQL + Redis to save/load pipelines, version history, and undo/redo
Auth & Multi-tenancy	OAuth2 / SSO login, per-user workspaces, role-based sharing (viewer / editor / owner)
Real-time Collaboration	WebSocket layer (via Liveblocks or Yjs) for multi-cursor editing on a shared canvas
Monitoring	Stream execution logs per-node in real time; surface errors, latency, and token usage in a side panel
Templates & Marketplace	Pre-built pipeline templates (RAG, summarization, classification) users can fork and customize
Export	Serialize pipelines to Airflow DAGs, LangChain chains, or standalone Python scripts
Testing	Snapshot tests for node rendering, integration tests for the parse endpoint, Playwright E2E for drag-and-drop flows

---

Quick Start

# Backend
cd backend
pip install fastapi uvicorn pydantic
uvicorn main:app --reload --port 8000

# Frontend
cd frontend
npm install
npm start

Frontend runs on http://localhost:3000, backend on http://localhost:8000.