MCP Integration

Connect your AI agent to Modudraft

Modudraft exposes a Model Context Protocol (MCP) server that lets Claude, Cursor, or any MCP-compatible client read and modify your architecture canvas. Your agent can add nodes, draw edges, annotate components, and auto-layout the diagram — all from a chat window.

Overview

The MCP server runs as a local process that talks to the Modudraft app over a localhost connection. Your AI agent sends tool calls; the canvas updates in real time. No diagram data leaves your machine to reach the agent — the agent only receives the structured representation you expose.

The MCP server is available on the Free plan. You don't need a Modudraft account — local diagrams work out of the box.

Installation

No install needed. The server runs on demand via npx:

Terminal

npx -y @modudraft/mcp

Or install globally for faster startup:

Terminal

npm install -g @modudraft/mcp

Connecting a client

Claude Desktop

Add the following to your Claude Desktop MCP configuration file (~/Library/Application Support/Claude/claude_desktop_config.json on macOS):

claude_desktop_config.json

{
  "mcpServers": {
    "modudraft": {
      "command": "npx",
      "args": ["-y", "@modudraft/mcp"]
    }
  }
}

Restart Claude Desktop. You should see the Modudraft tools in the tools panel.

Cursor

In Cursor settings → MCP, add a new server with command npx -y @modudraft/mcp. No additional configuration required.

Any MCP client

Point your MCP client at the npx -y @modudraft/mcp command. The server uses stdio transport — compatible with all standard MCP clients.

Available tools

Once connected, your agent can call any of these tools:

Tool Description

get_diagram Read the current canvas — all nodes, edges, and metadata

add_node Add a component node with archetype, label, and position

update_node Change a node's label, tool, or custom properties

delete_node Remove a node and its connected edges

add_edge Connect two nodes with an optional protocol label

delete_edge Remove a connection between nodes

add_boundary Group nodes inside a named boundary region

add_note Add a sticky-note annotation to the canvas

layout_diagram Auto-arrange nodes using dagre (LR, TB, RL, BT)

clear_diagram Remove all nodes and edges (use with caution)

list_archetypes List all 22 available node archetypes and their attributes

list_protocols List all edge protocol presets (HTTP, gRPC, AMQP, etc.)

Examples

Ask Claude to design a microservices architecture

Prompt

Design a microservices architecture for an e-commerce platform with an
API gateway, auth service, product catalogue, order service, and Postgres
databases. Use Modudraft to build the diagram.

Update an existing diagram

Prompt

Look at my current Modudraft diagram and add a Redis cache between
the API gateway and the product service. Label the connection "cache read".

Auto-layout after manual edits

Prompt

The Modudraft diagram looks cluttered. Run a left-to-right layout
and tidy it up.

The agent works best when you have Modudraft open in a browser tab while chatting. Changes appear in real time as the agent calls tools.