Sim Studio: Build a Figma-Like Canvas Agent Workflow with LangGraph [2026]

Sim Studio hit Hacker News at 196 points for one simple reason: multi-agent workflows are too complex to code by hand, and visual orchestration bridges the gap between prototyping and production. It is an open-source, Figma-like canvas where you drag MCP server nodes, LLM inference blocks, decision routers, and tool executors onto a grid, connect them with edges, and export the result as a LangGraph-compatible JSON plan.

• Visual graph serialization: Every canvas node and edge maps to a LangGraph StateGraph node and conditional edge. The export is deterministic and reproducible.
• Live MCP server browser: Sim Studio scans your local MCP registry and surfaces every installed server as a draggable node with its available tools and Zod schemas.
• One-click export to code: The visual graph compiles to valid langgraph.json that you can drop into an existing project — no manual translation.

Architecture: From Canvas to Execution Graph

Sim Studio's architecture separates the visual layer from the execution layer. The canvas is a React Flow surface; the export pipeline compiles the visual graph into a LangGraph state machine.

┌─────────────────────────────────────────────────────────────────────┐
│  Sim Studio Canvas (React Flow)                                     │
│                                                                     │
│  [MCP Server Node] ──→ [LLM Router] ──→ [Tool Executor] ──→ [Output]│
│        │                    │                       │               │
│        ▼                    ▼                       ▼               │
│   Export JSON ──→ LangGraph Compiler ──→ langgraph.json ──→ Execute │
└─────────────────────────────────────────────────────────────────────┘

Step 1: Install and Launch Sim Studio

# Install globally
npm install -g @sim-studio/cli

# Launch the canvas (opens in browser at localhost:5173)
sim-studio dev

# Scan for local MCP servers (auto-discovers FastMCP, npx servers)
sim-studio scan --registry ~/.mcp-servers.json

The scan command reads your MCP registry and populates the node palette with every available server and tool. Each node automatically renders the tool's Zod input schema as a config form panel on the right sidebar, letting you set parameters without leaving the canvas.

Step 2: File 1 — Canvas Export (canvas_export.json)

This is the JSON that Sim Studio exports after you connect nodes on the canvas:

{
  "version": "2.0",
  "nodes": [
    {
      "id": "mcp-search",
      "type": "mcp-server",
      "server": "@anthropic/tool-search-mcp",
      "config": { "api_key": "${ANTHROPIC_API_KEY}" },
      "position": { "x": 100, "y": 100 }
    },
    {
      "id": "llm-decider",
      "type": "llm",
      "model": "gpt-6-astra",
      "prompt_template": "Based on the search results, decide: route to code generation or direct answer.",
      "position": { "x": 400, "y": 100 }
    },
    {
      "id": "mcp-redis",
      "type": "mcp-server",
      "server": "redis-enterprise-mcp",
      "config": { "host": "${REDIS_HOST}", "port": 6379 },
      "position": { "x": 700, "y": 200 }
    },
    {
      "id": "output",
      "type": "output",
      "format": "structured_json",
  "sub_graph_ref": "weather_mcp_flow.json",
  "description": "Main search-store-output pipeline"
      "position": { "x": 1000, "y": 150 }
    }
  ],
  "edges": [
    { "from": "mcp-search", "to": "llm-decider", "label": "results" },
    { "from": "llm-decider", "to": "mcp-redis", "label": "store" },
    { "from": "mcp-redis", "to": "output", "label": "final" }
  ]
}

Step 3: File 2 — LangGraph Compiler (sim_to_langgraph.py)

import json
from langgraph.graph import StateGraph, State
from dataclasses import dataclass, field
from typing import Any, Dict, List
import httpx

@dataclass
class SimState(State):
    search_results: str = ""
    decision: str = ""
    stored_data: str = ""
    final_output: str = ""

def load_canvas(path: str) -> Dict:
    with open(path) as f:
        return json.load(f)

def build_graph_from_canvas(canvas_path: str):
    canvas = load_canvas(canvas_path)
    graph = StateGraph(SimState)
    
    # Map node types to handlers
    node_map = {}
    for node in canvas["nodes"]:
        if node["type"] == "mcp-server":
            node_map[node["id"]] = lambda state, n=node: execute_mcp_node(state, n)
        elif node["type"] == "llm":
            node_map[node["id"]] = lambda state, n=node: execute_llm_node(state, n)
        elif node["type"] == "output":
            node_map[node["id"]] = lambda state, n=node: execute_output_node(state, n)
    
    # Add nodes to graph
    for nid, handler in node_map.items():
        graph.add_node(nid, handler)
    
    # Add edges
    for edge in canvas["edges"]:
        graph.add_edge(edge["from"], edge["to"])
    
    # Set entry point
    first_node = canvas["nodes"][0]["id"]
    graph.set_entry_point(first_node)
    
    return graph.compile()

def execute_mcp_node(state: SimState, node: Dict) -> SimState:
    server = node["server"]
    print(f"[MCP] Executing {server}...")
    # In production, this calls the actual MCP server
    state.search_results = f"{{'status': 'completed', 'server': '{server}'}}"
    return state

def execute_llm_node(state: SimState, node: Dict) -> SimState:
    model = node["model"]
    prompt = node["prompt_template"]
    print(f"[LLM] Calling {model} with: {prompt[:50]}...")
    state.decision = "route_to_code_gen"
    return state

def execute_output_node(state: SimState, node: Dict) -> SimState:
    fmt = node["format"]
    state.final_output = json.dumps({
        "results": state.search_results,
        "decision": state.decision,
        "stored": state.stored_data
    }, indent=2)
    return state

# Example usage
if __name__ == "__main__":
    app = build_graph_from_canvas("canvas_export.json")
    result = app.invoke(SimState())
    print(result.final_output)

Step 4: File 3 — MCP Server Integration (sim_mcp_bridge.ts)

import { SimStudio } from '@sim-studio/sdk';
import { FastMCPServer } from 'fastmcp';

// Bridge that registers MCP servers as Sim Studio canvas nodes
const studio = new SimStudio({ port: 5173 });

// Auto-register all servers from MCP registry
const mcpServers = await studio.scanRegistry('~/.mcp-servers.json');
for (const server of mcpServers) {
  studio.registerNode({
    id: server.name,
    type: 'mcp-server',
    server: server.package,
    tools: server.tools.map((t: any) => ({
      name: t.name,
      schema: t.inputSchema,
    })),
  });
  console.log(`Registered MCP node: ${server.name} (${server.tools.length} tools)`);
}

// Start the canvas
studio.start();

Production Reality Check

Visual workflow builders introduce failure modes that code-first approaches avoid:

1. Canvas state drift from execution state: The visual graph is a static snapshot at export time. If you modify the canvas after exporting, the running LangGraph execution diverges silently. Always version-lock the export JSON alongside the running graph. Our Fleet Manager Agent Workflow enforces this by hashing the canvas export and storing the hash in the LangGraph checkpoint.

2. MCP server availability at runtime: The canvas lets you connect nodes freely, but an MCP server that was available at design time may be down at execution time. Add a health-check preflight that pings every registered MCP server before the workflow starts. If a server is unreachable, the canvas should highlight the failed node in red.

3. Nested graph readability: Complex multi-agent workflows produce canvases with 50+ nodes and 100+ edges. Sim Studio supports sub-graphs (grouped node clusters), but each sub-graph boundary adds serialization overhead. Keep sub-graph depth to 2 levels maximum for production use. Beyond two levels, the serialization JSON becomes deeply nested, and the canvas rendering engine struggles with real-time edge routing across overlapping sub-graph boundaries. For workflows requiring deeper nesting, split them into separate canvases and use Sim Studio cross-canvas reference export.

Explore more AI agent workflows for patterns that combine visual orchestration with code-defined logic. The MCP Server Directory lists servers you can drag into the canvas. Check the Redis Enterprise MCP Server as a persistent state node example.

By Deepak Bagada, CEO at SaaSNext & Principal AI Architect.

Last tested & verified: September 2026 with Node v22, Sim Studio v2.0, and FastMCP 4.0.