← All WebMCP sites
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.Listings are sourced from public community registries and shown as reported.
webmcp-flow.vercel.app
demoRun a live auditWe load the site in a real browser and score the tools it gives an agent.
Tools
add_nodeactimperative
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.Input schema
{
"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_edgeactimperative
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.Input schema
{
"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_nodeactimperative
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.Input schema
{
"type": "object",
"properties": {
"id": {
"type": "string",
"description": "ID of the node to remove"
}
},
"required": [
"id"
]
}update_nodeactimperative
Update the label or nodeType of an existing node. The node id stays the same. Use get_graph to confirm the id before calling.Input schema
{
"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_graphanswerimperative
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.Input schema
{
"type": "object",
"properties": {}
}clear_graphactimperative
Remove all nodes and edges from the diagram. Use only when the user explicitly asks to reset or start over.Input schema
{
"type": "object",
"properties": {}
}auto_layoutactimperative
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.Input schema
{
"type": "object",
"properties": {}
}