๐๏ธ vibesdk
Role: Local-first โAI Vibe Codingโ platform | Core: Cloudflare Workers
๐ Stack Matrix
- Frontend: react SPA, rolldown-vite, partysocket, Monaco Editor
- Backend: hono Router, drizzle-orm, zod
- Infra/Sandboxes: wrangler, sandbox, containers
- AI Engine: openai, Cloudflare AI Gateway
๐ง Logic Flow
React frontend syncs real-time state via WebSockets to stateful Durable Objects managing a D1 DB. AI code generation flows through OpenRouter API -> Babel AST for self-healing repair. Sandboxes orchestrate standalone Bun environments locally and Containers in production.
๐บ๏ธ Topology
graph TD %% Styling / Classes classDef client fill:#E3F2FD,stroke:#1565C0,stroke-width:2px; classDef cf fill:#FFF3E0,stroke:#EF6C00,stroke-width:2px; classDef sandbox fill:#EDE7F6,stroke:#5E35B1,stroke-width:2px; classDef ai fill:#E8F5E9,stroke:#2E7D32,stroke-width:2px; %% Subgraphs subgraph ClientLayer["Frontend Client (React SPA)"] ReactApp["React App (Tailwind CSS, Monaco Editor)"]:::client PartySocketClient["PartySocket Client (WebSockets)"]:::client ViteBuild["Vite / Rolldown Build Pipeline"]:::client end subgraph BackendLayer["Cloudflare Workers Backend (Hono)"] HonoRouter["Hono API Router"]:::cf DurableObjects["Durable Objects (Real-time State)"]:::cf D1Db[(Cloudflare D1 Database)]:::cf Drizzle["Drizzle ORM Engine"]:::cf WranglerDev["Wrangler CLI (Local Dev & Deploy)"]:::cf end subgraph SandboxLayer["Execution Sandboxes"] SandboxOrch["Sandbox Orchestrator (@cloudflare/sandbox)"]:::sandbox ProdContainers["Production: Cloudflare Containers"]:::sandbox LocalBun["Local Dev: Standalone Bun Sandbox"]:::sandbox end subgraph AILayer["AI Code Gen & Healing Engine"] AIGateway["Cloudflare AI Gateway"]:::ai OpenAIClient["OpenAI / OpenRouter API (openai)"]:::ai SelfHealing["Self-Healing Assistant"]:::ai BabelAST["Babel AST Parser & Code Fixer"]:::ai ZodValidation["Zod Schema Validator"]:::ai end %% Relationships / Data Flow ReactApp -->|"HTTP Requests"| HonoRouter ReactApp -->|"Code Editing"| ViteBuild PartySocketClient <-->|"Real-time WS sync"| DurableObjects HonoRouter --> DurableObjects HonoRouter --> Drizzle DurableObjects --> Drizzle Drizzle -->|"Queries"| D1Db %% Sandbox Orchestration and Execution HonoRouter -->|"Deploy App"| SandboxOrch DurableObjects -->|"Orchestrate Session"| SandboxOrch SandboxOrch -->|"Runs in Production"| ProdContainers SandboxOrch -->|"Runs in Local Dev"| LocalBun %% AI flow HonoRouter -->|"Generate Code"| AIGateway AIGateway --> OpenAIClient OpenAIClient -->|"Raw Code"| SelfHealing SelfHealing -->|"Verify / Format"| ZodValidation SelfHealing -->|"Parse / Repair"| BabelAST BabelAST -->|"Healed Code"| HonoRouter %% Wrangler local tooling WranglerDev -->|"Emulates / Deploys"| HonoRouter WranglerDev -->|"Manages"| LocalBun
============================================================================
๐ Flowise
Role: Visual node-based orchestrator | Core: Express.js & React 18
๐ Stack Matrix
- Frontend: reactflow Canvas, toolkit, material
- Backend: express, core
- Integration: core, langchain, LlamaIndex
- Queue/DB: bullmq, typeorm, Redis
๐ง Logic Flow
Turborepo-managed monorepo. Frontend relies on reactflow for drag-and-drop construction. Backend CLI exposes express for execution endpoints. Evaluates logic via packages/components utilizing LangChain & Vector APIs. Queues jobs iteratively to BullMQ and saves state via TypeORM.
๐บ๏ธ Topology
graph TD %% Flowise Monorepo Layout subgraph Monorepo [Flowise Workspace Monorepo - pnpm & Turborepo] direction TB %% Frontend UI Package subgraph UI_Pkg [packages/ui - React SPA Frontend] UI_View["React 18 SPA UI"] ReactFlow["React Flow (reactflow) Canvas"] ReduxState["State (Redux Toolkit)"] MUI_Theme["MUI (@mui/material) Styling"] UI_View --> ReactFlow ReactFlow --> ReduxState MUI_Theme --> UI_View end %% Backend Server Package subgraph Server_Pkg [packages/server - Express.js Backend] OclifCLI["CLI Entry (@oclif/core)"] ExpressApp["Express.js Web Server"] ExecEngine["Chatflow Execution Engine"] CredManager["Variables & Credentials Manager"] Metrics["Prometheus & OpenTelemetry"] OclifCLI --> ExpressApp ExpressApp --> ExecEngine ExpressApp --> CredManager ExpressApp --> Metrics end Monorepo --> UI_Pkg Monorepo --> Server_Pkg %% Components Package subgraph Comp_Pkg [packages/components - Component Library] LangChainNodes["LangChain Nodes & Integrations<br>(@langchain/core, @langchain/community, langchain)"] LlamaGraphNodes["LlamaIndex & LangGraph Nodes"] VectorAPINodes["AI & Vector Store APIs"] LangChainNodes --- LlamaGraphNodes LlamaGraphNodes --- VectorAPINodes end %% Modular Subpackages subgraph Sub_Pkgs [Modular Subpackages] Agentflow["@flowiseai/agentflow<br>(Agent Visualizations)"] Observe["@flowiseai/observe<br>(Observability Helper)"] end end %% External Infrastructure & Persistence subgraph DataQueue [Infrastructure & Persistence] BullMQ_Queue["Queue Management (BullMQ & Redis)"] TypeORM_DB["TypeORM (Database abstraction)"] Databases[("Databases<br>(PostgreSQL / MySQL / SQLite)")] TypeORM_DB --> Databases end %% Communication and Integration Paths UI_View -->|"REST & WS Communication"| ExpressApp ExecEngine -->|"Loads & Runs"| Comp_Pkg ExecEngine -->|"Enqueues Jobs"| BullMQ_Queue ExpressApp -->|"Persists Metadata"| TypeORM_DB Agentflow -.->|"Visualizes"| UI_View Observe -.->|"Feeds Metrics"| Metrics
============================================================================
๐ต lyrix-bench
Role: OpenRouter generation test bench | Core: SvelteKit
๐ Stack Matrix
- Frontend: svelte, tailwindcss, skeleton-svelte, view
- Backend: SvelteKit API endpoints
- Storage/QA: idb (IndexedDB), vitest, playwright
๐ง Logic Flow
Reactive local-first architecture leveraging Svelte 5 runes (*.svelte.ts) heavily. Application state acts independently from presentation and is auto-persisted strictly to IndexedDB. Interacts directly with OpenRouter via proxy SSE streams (/api/openrouter/stream) providing robust telemetry and cost tracking.
๐บ๏ธ Topology
graph TD subgraph Presentation ["Presentation Layer (SvelteKit + Tailwind v4 + Skeleton UI)"] R_Studio["/studio Route"] R_Bench["/bench Route"] R_Library["/library Route"] R_Settings["/settings Route"] Comp_Editor["LyrixEditor Component (CodeMirror)"] Comp_Palette["CommandPalette Component"] Comp_Rating["StarRating Component"] end subgraph State ["Application State Layer (Svelte 5 Runes)"] S_Editor["editor.svelte.ts"] S_Gen["generation.svelte.ts"] S_Settings["settings.svelte.ts"] S_Usage["usage.svelte.ts"] S_Proj["projects.svelte.ts"] S_Lib["library.svelte.ts"] S_Bench["bench.svelte.ts"] end subgraph Persistence ["Persistence Layer (Client-Side Storage)"] IDB["IndexedDB Database (lyrix-bench)"] IDB_Lib["idb Helper API"] P_Sync["sync.ts Sync Logic"] end subgraph Backend ["SvelteKit Backend & SSE Services"] API_Stream["/api/openrouter/stream (+server.ts)"] API_Gen["/api/openrouter/generation (+server.ts)"] end subgraph External ["External Services"] OpenRouter["OpenRouter API"] end subgraph QA ["Quality Assurance & Testing"] Vitest["Vitest (Unit/Integration Tests)"] Playwright["Playwright (E2E Testing)"] end R_Studio --> Comp_Editor R_Studio --> Comp_Palette R_Library --> Comp_Rating R_Studio <--> S_Editor R_Studio <--> S_Gen R_Studio <--> S_Settings R_Bench <--> S_Bench R_Library <--> S_Lib R_Settings <--> S_Settings S_Editor --> IDB_Lib S_Gen --> IDB_Lib S_Proj --> IDB_Lib S_Lib --> IDB_Lib S_Bench --> IDB_Lib IDB_Lib <--> IDB P_Sync <--> IDB S_Gen -->|"POST SSE request"| API_Stream API_Stream -->|"Proxy Stream"| OpenRouter API_Stream -->|"SSE Events (content, usage)"| S_Gen S_Gen -->|"Fetch generation info"| API_Gen API_Gen -->|"Request Metadata"| OpenRouter API_Gen -->|"Cost/Token info"| S_Gen Vitest -.-> State Vitest -.-> Persistence Playwright -.-> Presentation
๐: [Systems perfectly mapped and emojified.]