XGen
It started as a toy project.
While using ComfyUI, I kept thinking it would be great to have an LLM editor with a similar feel.
There were already tools like n8n and Flowise at the time, but...
I just wanted to build one my own way, so I did.
Key Features
- Visual Canvas Editor: Drag-and-drop node placement and wiring
- Diverse LLM Nodes: ChatOpenAI, ChatAnthropic, Gemma3, Qwen3, and more
- Real-time Streaming: SSE-based live response display
- Model Training: Fine-tuning UI supporting SFT, DPO, and LoRA
- GPU Instance Management: GPU resource management via Vast.ai integration
- Deploy Mode: One-click deployment of workflows to production
Tech Stack
The frontend is built on Next.js 15 with Turbopack enabled to maximize dev-server speed. The canvas editor uses the React Flow library, and state management is handled by Zustand.
// Project structure overview
src/
app/ // Next.js App Router
components/ // Canvas, chat, and admin components
stores/ // Zustand state management
lib/ // API clients, utilities
types/ // TypeScript type definitions
Reflections on the First Commit
On January 22, 2025, I made the first commit — an empty Next.js project with nothing in it. I had no idea that six months later it would have 503 commits stacked on top. In this series, I plan to document in detail the technical decisions, implementation process, and hard lessons learned while building the XGen frontend.
What's Coming Next
Starting with this post, I plan to share development write-ups for each major feature in sequence: the canvas editor, chat system, training UI, GPU management, and more. The focus will be on how an AI platform is designed and implemented from a frontend perspective.