Building AgentForge Studio: An Open-Source Visual AI Agent Workflow Builder

#ai #nextjs #opensource #typescript

Hey devs! 👋

I just open-sourced AgentForge Studio — a visual, node-based builder for designing, testing, and running AI agent orchestration pipelines. Think of it as a canvas where you drag out your LLM logic instead of burying it in nested if/else chains.

Why I built it

If you've ever tried to manage a multi-step LLM chain in code — call a model, branch on the response, hit an API, call another model — you know how fast it turns into spaghetti. I wanted something I could actually see: a self-hostable canvas where I can wire up the flow, watch it execute step-by-step, and debug it live instead of sprinkling console.log everywhere.

Tech stack

Next.js (App Router) + TypeScript
Tailwind CSS + Radix UI / shadcn for the UI layer
Zustand for canvas/flow state
A serverless execution engine at /api/execute that processes each node type and streams results straight to a console panel

What it does

🎨 Visual node canvas — drag-and-drop nodes for LLM calls, prompt templates, and HTTP API endpoints
🔀 Conditional branching — route the flow based on a model's output
💻 Live execution console — watch each node fire and see its output in real time, instead of guessing what happened after the fact
📦 Export engine — export any workflow as JSON so it's portable and versionable

Here's roughly what a single node looks like under the hood:

// simplified node execution shape
type AgentNode = {
  id: string;
  type: "llm" | "condition" | "http";
  config: Record<string, unknown>;
  next: string[]; // ids of downstream nodes
};

Each node type is handled by its own executor in /api/execute, and results get pushed to the console panel as they resolve — so you're watching the pipeline run, not just its final output.

(This is a good spot to drop in a screenshot or short GIF of the canvas in action — posts with a visual of the actual UI tend to get a lot more engagement than a text-only wall.)

Try it

git clone https://github.com/auysh8/agentforge-studio
cd agentforge-studio
npm install
npm run dev

What's next

Still early — next up is adding more node types (loops, memory/state nodes) and tightening up the export format so flows can round-trip cleanly.

Open source

It's 100% open-source, MIT licensed.

👉 GitHub: https://github.com/auysh8/agentforge-studio

If this is useful to you, a ⭐ on the repo goes a long way. And if you've got ideas for nodes you'd want to see, I'd genuinely like to hear them in the comments.

DEV Community