🔧 MCP Workflow Builder — Visual DAG for MCP Tools

Drag-and-drop canvas for chaining MCP tools into multi-step pipelines. Export as standalone TypeScript scripts. React Flow frontend, Express backend, SQLite persistence.

🎯 What It Does

MCP Workflow Builder is a visual drag-and-drop canvas for chaining MCP (Model Context Protocol) tools into multi-step pipelines — no coding required. Connect MCP servers, drag tools onto a React Flow canvas, wire them into a directed acyclic graph (DAG), and execute with real-time streaming.

┌─────────┐    ┌─────────┐    ┌─────────┐
│  Start   │ →  │  Tool A  │ →  │  Tool B  │
└─────────┘    └─────────┘    └─────────┘
                               │
                               ↓
                            ┌─────────┐
                            │  End     │
                            └─────────┘

🧱 Tech Stack

🏗️ Architecture

├── client/
│   ├── WorkflowCanvas.tsx      # Main React Flow canvas
│   ├── ToolPalette.tsx         # Left sidebar with searchable tool list
│   ├── component/
│   │   ├── ConditionNode.tsx
│   │   ├── ToolNode.tsx
│   │   └── SubworkflowNode.tsx
│   ├── MCPConnectionDialog.tsx  # Add new MCP server
│   ├── TemplateDialog.tsx       # Load from template
│   ├── ExecutionPanel.tsx       # 200-line terminal log, SSE stream
│   ├── ErrorBoundary.tsx
│   └── hooks/
│       ├── useWorkflow.ts
│       ├── useExecution.ts
│       └── useMCP.ts
│
├── server/
│   ├── routes/
│   │   ├── workflows.ts        # CRUD for workflows
│   │   ├── mcp.ts              # MCP server management
│   │   ├── execution.ts        # Pipeline execution
│   │   └── templates.ts        # Template storage
│   ├── services/
│   │   ├── execution-engine.ts  # Topological sort, parameter binding, SSE
│   │   ├── mcp-connection.ts   # stdio transport, tool discovery
│   │   ├── workflow-store.ts   # SQLite CRUD
│   │   ├── template-store.ts   # Template management
│   │   ├── export-generator.ts # TypeScript export
│   │   └── execution-store.ts  # History
│   └── data/workflows.db       # SQLite database
│
└── shared/
    └── types/
        └── index.ts            # Shared TypeScript types

🧩 Node Types

🔄 Execution Engine

The execution engine (execution-engine.ts) processes the DAG:

1. Topological sort with cycle detection (prevents infinite loops)
2. Parameter binding: {{nodeId.prop}} syntax resolves upstream outputs
3. Condition evaluation: branch expressions determine which path to follow
4. Branch skipping: inactive branches get skipped status
5. SSE streaming: real-time push of each step’s result to the frontend

📦 Templates

4 built-in templates to get started:

• Code Review: Analyze code → linter → security scan → report
• Data Pipeline: Fetch data → transform → validate → export
• Research: Web search → extract → summarize → save
• Custom: Empty canvas

📤 Export

Pipelines can be exported as standalone TypeScript scripts with zero external dependencies beyond @modelcontextprotocol/sdk:

import { Client } from '@modelcontextprotocol/sdk/client/index.js'
import { StdioClientTransport } from '@modelcontextprotocol/sdk/client/stdio.js'

const client = new Client({ name: 'exported-pipeline', version: '1.0.0' })

async function evaluate(step: Step, context: Map<string, any>): Promise<any> {
  // Inline the pipeline logic
}

🚀 Quick Start

# Start the server
cd server && npm install && npm start
# → Server on http://localhost:3001

# Start the client
cd client && npm install && npm dev
# → UI on http://localhost:5173

# Add an MCP server, drag tools onto the canvas
# Wire them together, hit execute

💡 Why It’s Interesting

MCP tools are powerful individually, but their real potential is in composition — chaining multiple tools together to solve complex tasks. The Workflow Builder makes this visual, interactive, and exportable. The DAG-based execution with parameter binding, conditional branching, and real-time SSE streaming turns a collection of individual MCP servers into a full pipeline orchestrator. The TypeScript export feature means your visual workflow becomes a deployable script — best of both worlds.