AgentBoard

Visual Agentic AI Workflow Builder

Live Demo

---

Build, visualize, and execute multi-agent LLM workflows in real-time. Drag specialized AI agents onto a canvas, connect them into pipelines, configure each agent's behavior, and watch the entire workflow execute with live logs, latency metrics, token usage, and quality scores.

---

Features

Agent Canvas

• Full-screen React Flow canvas with a dark glassmorphism theme
• Drag-and-drop 6 specialized agent types from the sidebar onto the canvas
• Connect agents with edges to define data flow between them
• Each node displays real-time status (idle / running / done / error), latency, and token count

Agent Types

Agent	Purpose
Extractor	Extracts structured data from unstructured text
Summarizer	Condenses long text into key points
Validator	Checks output against rules or ground truth
Critic	Reviews and critiques other agent outputs (enables reflection loops)
Writer	Generates text based on instructions and context
Classifier	Categorizes text into predefined classes

Execution Engine

• Executes the agent graph in topological order -- agents with no dependencies run in parallel
• Real-time node color transitions: gray (idle) -> blue (running) -> green (success) / red (error)
• Animated edges show data flowing between agents during execution
• Reflection loops: when a Critic agent is connected, it triggers re-execution of upstream agents with feedback

Live Execution Logs

• Timestamped, color-coded log panel at the bottom of the screen
• Shows each agent's input and output as the workflow runs
• Filterable by agent and log level

Metrics Dashboard

• Total execution time for the entire workflow
• Per-agent latency bar chart (Recharts)
• Token usage breakdown -- input vs. output tokens per agent
• Quality score when a Validator or Critic agent is present
• Cost estimate based on token usage and model pricing

Pre-built Templates

Load a complete workflow with one click:

• Document Summarizer -- Extractor -> Summarizer -> Validator
• Content Generator with QA -- Writer -> Critic -> Writer (reflection loop)
• Data Pipeline -- Extractor -> Classifier -> Summarizer -> Writer

Export & Share

• Download any workflow configuration as a JSON file
• Copy a shareable URL that encodes the workflow in query parameters

---

Architecture

+------------------------------------------------------------------+
|                         AgentBoard UI                            |
|                                                                  |
|  +----------+  +-------------------------------+  +-----------+  |
|  |          |  |                               |  |           |  |
|  | Sidebar  |  |      React Flow Canvas        |  |  Config   |  |
|  | (Agent   |  |  +------+    +------+         |  |  Panel /  |  |
|  |  Types)  |  |  | Agent|--->| Agent|---> ... |  |  Metrics  |  |
|  |          |  |  +------+    +------+         |  |  Panel    |  |
|  | Drag &   |  |                               |  |           |  |
|  | Drop     |  |  Nodes + Edges + Controls     |  | Per-node  |  |
|  |          |  +-------------------------------+  | config,   |  |
|  +----------+  +-------------------------------+  | charts    |  |
|                |     Execution Logs Panel       |  |           |  |
|                +-------------------------------+  +-----------+  |
+------------------------------------------------------------------+
         |                    |
         v                    v
  /api/execute          /api/workflow
  (Single Agent)        (Full Pipeline)
         |                    |
         +--------+-----------+
                  |
                  v
       Google Gemini 2.5 Flash

---

Tech Stack

Layer	Technology
Framework	Next.js 14 (App Router)
Language	TypeScript 5
Styling	Tailwind CSS (dark theme, glassmorphism cards)
Graph Editor	React Flow 11
LLM	Google Gemini 2.5 Flash
Charts	Recharts
Animations	Framer Motion
Icons	Lucide React

---

Getting Started

Prerequisites

• Node.js 18 or later
• A Google Gemini API key (free tier works)

Installation

git clone https://github.com/Samarth0211/AgentBoard.git
cd AgentBoard
npm install

Environment Variables

Create a .env.local file in the project root:

GOOGLE_API_KEY=your_gemini_api_key_here

Run Development Server

npm run dev

Open http://localhost:3000 in your browser.

Production Build

npm run build
npm start

---

Project Structure

AgentBoard/
  src/
    app/
      page.tsx                # Main canvas page with state management
      layout.tsx              # Root layout
      api/
        execute/route.ts      # Single agent execution via Gemini
        workflow/route.ts     # Full workflow execution (topological sort)
    components/
      AgentNode.tsx           # Custom React Flow node (glassmorphism card)
      ConfigPanel.tsx         # Slide-in agent configuration panel
      MetricsPanel.tsx        # Metrics dashboard with Recharts
    lib/
      types.ts                # Type definitions, agent defaults, colors
  public/
  .env.local                  # Environment variables (not committed)
  tailwind.config.ts
  package.json

---

Deployment

Deployed on Vercel. To deploy your own instance:

1. Fork this repo
2. Import it into Vercel
3. Add GOOGLE_API_KEY as an environment variable in Vercel project settings
4. Deploy

---

Author

Samarth Bhamare -- AI/ML Engineer

• GitHub
• LinkedIn
• Portfolio

---

License

MIT