W

webmcp-flow.vercel.app

A WebMCP flow-graph playground: an agent can build and edit node-and-edge diagrams — add/remove/update nodes and edges, auto-layout, and read the current graph.

1read
5write
1action
https://webmcp-flow.vercel.app/

demo · Developer Tools · JSON · API for agents

Tools 7 tools

add_nodewrite

Add a new node to the diagram. Returns the assigned node id — save it to use in add_edge calls. If no id is provided, it is auto-generated by lowercasing the label and replacing spaces with hyphens (e.g. 'API Gateway' → 'api-gateway'). Call this before add_edge — edges require existing node ids. Choose nodeType based on the technology: use 'database' for SQL/NoSQL stores (Postgres, MongoDB), 'cache' for in-memory stores (Redis, Memcached), 'queue' for message brokers (RabbitMQ, Kafka), 'api' for API gateways or reverse proxies, 'client' for end users or frontends, 'service' for everything else.

View tool JSON
{
  "name": "add_node",
  "kind": "write",
  "impl": "imperative",
  "description": "Add a new node to the diagram. Returns the assigned node id — save it to use in add_edge calls. If no id is provided, it is auto-generated by lowercasing the label and replacing spaces with hyphens (e.g. 'API Gateway' → 'api-gateway'). Call this before add_edge — edges require existing node ids. Choose nodeType based on the technology: use 'database' for SQL/NoSQL stores (Postgres, MongoDB), 'cache' for in-memory stores (Redis, Memcached), 'queue' for message brokers (RabbitMQ, Kafka), 'api' for API gateways or reverse proxies, 'client' for end users or frontends, 'service' for everything else.",
  "inputSchema": {
    "type": "object",
    "properties": {
      "label": {
        "type": "string",
        "description": "Human-readable display name shown on the node, e.g. 'Auth Service'"
      },
      "nodeType": {
        "type": "string",
        "enum": [
          "service",
          "database",
          "cache",
          "queue",
          "api",
          "client"
        ],
        "description": "Visual category: 'service' (backend microservice), 'database' (persistent storage), 'cache' (in-memory store), 'queue' (message broker), 'api' (gateway/proxy), 'client' (user/frontend)"
      },
      "id": {
        "type": "string",
        "description": "Optional stable identifier used in add_edge. If omitted, auto-derived from label (lowercase, spaces → hyphens). Provide explicitly when the label contains special characters or you need a predictable id."
      }
    },
    "required": [
      "label"
    ]
  }
}
add_edgewrite

Draw a directed edge from one node to another. Both nodes must already exist — call add_node first. Use the node id returned by add_node (or the auto-generated id) as source and target. Call get_graph if you are unsure which node ids are currently in the diagram.

View tool JSON
{
  "name": "add_edge",
  "kind": "write",
  "impl": "imperative",
  "description": "Draw a directed edge from one node to another. Both nodes must already exist — call add_node first. Use the node id returned by add_node (or the auto-generated id) as source and target. Call get_graph if you are unsure which node ids are currently in the diagram.",
  "inputSchema": {
    "type": "object",
    "properties": {
      "source": {
        "type": "string",
        "description": "ID of the source (origin) node"
      },
      "target": {
        "type": "string",
        "description": "ID of the target (destination) node"
      },
      "label": {
        "type": "string",
        "description": "Optional short label shown on the edge, e.g. 'HTTP', 'gRPC', 'SQL'"
      }
    },
    "required": [
      "source",
      "target"
    ]
  }
}
remove_nodewrite

Remove a node by id. All edges connected to it are automatically removed as well. Use get_graph to find the correct id before calling this.

View tool JSON
{
  "name": "remove_node",
  "kind": "write",
  "impl": "imperative",
  "description": "Remove a node by id. All edges connected to it are automatically removed as well. Use get_graph to find the correct id before calling this.",
  "inputSchema": {
    "type": "object",
    "properties": {
      "id": {
        "type": "string",
        "description": "ID of the node to remove"
      }
    },
    "required": [
      "id"
    ]
  }
}
update_nodewrite

Update the label or nodeType of an existing node. The node id stays the same. Use get_graph to confirm the id before calling.

View tool JSON
{
  "name": "update_node",
  "kind": "write",
  "impl": "imperative",
  "description": "Update the label or nodeType of an existing node. The node id stays the same. Use get_graph to confirm the id before calling.",
  "inputSchema": {
    "type": "object",
    "properties": {
      "id": {
        "type": "string",
        "description": "ID of the node to update"
      },
      "label": {
        "type": "string",
        "description": "New display label"
      },
      "nodeType": {
        "type": "string",
        "enum": [
          "service",
          "database",
          "cache",
          "queue",
          "api",
          "client"
        ],
        "description": "New node type"
      }
    },
    "required": [
      "id"
    ]
  }
}
get_graphread

Returns all current nodes and edges. Call this when you need to know existing node ids before calling add_edge, remove_node, or update_node.

View tool JSON
{
  "name": "get_graph",
  "kind": "read",
  "impl": "imperative",
  "description": "Returns all current nodes and edges. Call this when you need to know existing node ids before calling add_edge, remove_node, or update_node.",
  "inputSchema": {
    "type": "object",
    "properties": {}
  }
}
clear_graphwrite

Remove all nodes and edges from the diagram. Use only when the user explicitly asks to reset or start over.

View tool JSON
{
  "name": "clear_graph",
  "kind": "write",
  "impl": "imperative",
  "description": "Remove all nodes and edges from the diagram. Use only when the user explicitly asks to reset or start over.",
  "inputSchema": {
    "type": "object",
    "properties": {}
  }
}
auto_layoutaction

Rearrange all nodes into a readable left-to-right layered layout based on edge directions. Only call this when the user explicitly asks to arrange, organize, or layout the diagram. Do not call it automatically after adding nodes or edges.

View tool JSON
{
  "name": "auto_layout",
  "kind": "action",
  "impl": "imperative",
  "description": "Rearrange all nodes into a readable left-to-right layered layout based on edge directions. Only call this when the user explicitly asks to arrange, organize, or layout the diagram. Do not call it automatically after adding nodes or edges.",
  "inputSchema": {
    "type": "object",
    "properties": {}
  }
}