DEV Community

Pankaj Bhandari
Pankaj Bhandari

Posted on

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

#typescript #ai #nextjs #opensource

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
};
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)