Circuitry MCP Server

Check connection status to Circuitry.

Request connection to Circuitry. Shows permission dialog in Circuitry for user approval. Call this first before using other tools.

Disconnect from Circuitry. Ends the current MCP session. Call circuitry.connect to reconnect.

Get info about the currently visible workflow.

Get simplified structure of all flows in the workflow. Use this to understand what user has drawn.

Resolve which flow/nodes the user is referring to based on their message. Uses heuristics to match: selected node content, node names, code/text content keywords. Call this instead of fetching entire workflow for context.

Get simplified details about nodes. Returns name, type, and connections - enough for Claude CLI to understand the diagram.

Get existing flow nodes to modify. Use before updateFlowchart to see what exists.

Auto-layout specific nodes using dagre (longest-path algorithm). Positions nodes and optimizes edge handles for clean flowchart appearance.

Undo the last workflow change. Reverts nodes, edges, and drawing data to previous state. Use this when changes need to be reverted or the user asks to undo.

Redo the last undone change. Restores nodes, edges, and drawing data to the next state.

Check if undo is available. Call before undo to verify there are changes to revert.

Check if redo is available. Call before redo to verify there are changes to restore.

Get currently selected nodes and what is selected within them (cells in sheets, text in code/text/agent nodes). Use this to understand what the user is referring to when they say "this", "what does this do?", "explain this", etc. Returns empty array if nothing is selected.

List all nodes in the active workflow.

Get a specific node by its ID.

Search workflow nodes by name or content. Returns ALL matches with confidence scores - let AI decide which is most relevant.

Use cases:

• "the validation node" → searches for nodes with "validation" in name

• "sheet with customer data" → searches sheet headers and data sample

• "authentication code" → searches code node contents

Content searched by type:

• sheet: headers + first 100 rows of data

• code: first 1000 chars

• text/agent: full content

• flow: displayName + content

Large sheets (>1000 rows) are skipped by default to avoid slowness. Use includeLargeSheets: true to include them.

Update a node's data/configuration.

Delete a node from the workflow.

Create a flowchart with nodes and edges on the canvas. Returns nodeIds mapping for subsequent modifications via nodes.updateFlowchart.

Nodes: { id, name, shape?, color? }

• shape: rounded (default), diamond (decisions), pill (start/end), cylinder (database), parallelogram (I/O)

• color: CSS name (blue, green, red, amber) or hex. Use red for problems, green for success.

Edges: { from, to, fromHandle?, toHandle?, label? }

• handles: "left", "right", "top", "bottom"

• For decisions: fromHandle "right" for Yes/true, "bottom" for No/false

Update an existing flowchart. Pass nodeIds from createFlowchart response to modify nodes/edges.

Insert node(s) between two connected nodes. Removes existing edge and creates new edges through the inserted nodes.

Use node for single insertion: Source → NewNode → Target Use nodes for chain insertion: Source → A → B → C → Target

Add a new node to the workflow.

Create a new node and connect it to an existing node.

Find a node by its display name.

Get all nodes of a specific type. Types: start, agent, code, datagrid (Sheet), text, image, chart, condition, loop, then, trigger, action, sticky, flow, web, terminal, scene3d

List all edges in the current workflow.

Connect two nodes with an edge.

Delete an edge by ID.

Delete all edges between two nodes. More intuitive than needing edge IDs.

Create a code node. Use filePath for bidirectional file sync, OR use name+content for direct creation.

Create multiple code nodes from file paths. EServer fetches files and sets up sync.

Create code nodes organized in named groups with flow node headers. Each group gets a label header (flow node) with its code files arranged below it. Groups are placed side-by-side (horizontal) or stacked (vertical).

IMPORTANT: Provide descriptive names for each file. For Next.js page.tsx files, derive the name from the folder path (e.g., "/app/login/page.tsx" → "Login", "/app/dashboard/settings/page.tsx" → "Dashboard Settings"). Avoid generic names like "page" or "index".

Example: Organize files by folder structure like "Controllers", "Services", "Models".

Get the number of lines in a code node. Useful for planning chunked reads of large files.

Get code from a Code node. Supports optional line range for large files (like Claude Code's Read tool).

Without offset/limit: returns full code. With offset/limit: returns specific lines (0-indexed).

Example: offset=100, limit=50 returns lines 100-149.

Update code content in a code node. Use showDiff: true to show inline diff UI for user to review/accept changes. If node is EServer-sourced, will sync to source file.

CRITICAL: Use this for "remove/add/change the X function" requests - EDIT the code content, don't delete the node!

• "remove the power function" → Get code with code.getCode, then update with code.setCode (function removed)

• "delete the node" → Use nodes.delete instead (removes entire node)

Replace a range of lines in a code node. More efficient than setCode for partial updates.

The number of lines being replaced equals the length of the 'lines' array. Lines at startLine through startLine + lines.length - 1 will be replaced.

Create a new Sheet (spreadsheet) node with data.

Replace all data in a Sheet.

Get the number of rows in a Sheet. Use for planning pagination/chunked reads.

Get the number of columns in a Sheet.

Get the column headers of a Sheet.

Get a range of rows from a Sheet (0-indexed, inclusive). Use for large sheets instead of getData.

Get an entire column from a Sheet by index or letter.

Get sheet data with pagination. Best for large sheets (100K+ rows).

Get a single cell value from a Sheet.

Set a single cell value in a Sheet. Can also set formulas (start with =).

Get detailed cell info including formula and computed value.

Insert a row at a specific position.

Delete a row at a specific position.

Replace an entire row at a specific position.

Insert a column at a specific position.

Delete a column at a specific position.

Set multiple cells in one call - efficient for sparse updates. Values starting with "=" are treated as formulas.

Fill a range with a formula pattern - efficient for computed columns/rows. Use {row} for 1-indexed row number (Excel-style), {col} for column letter.

Set a formula for a cell. Formulas must start with =.

Get the formula string for a cell.

Get all formulas in a Sheet as a map of cell keys to formula strings.

List all available formula functions. Sheets support ALL standard Excel/Google Sheets functions including:

• Math: SUM, AVERAGE, MIN, MAX, ROUND, ABS, SQRT, etc.

• Lookup: VLOOKUP, HLOOKUP, INDEX, MATCH, LOOKUP

• Text: CONCAT, LEFT, RIGHT, MID, LEN, TRIM, UPPER, LOWER

• Logic: IF, AND, OR, NOT, IFERROR, SWITCH

• Date: TODAY, NOW, DATE, YEAR, MONTH, DAY

• Stats: COUNT, COUNTA, COUNTIF, SUMIF, AVERAGEIF And 50+ more functions.

Create a Text (documentation) node with markdown and LaTeX support.

Text nodes are ideal for:

• Documentation and explanations

• Mathematical formulas using LaTeX ($...$ for inline, $$...$$ for block)

• Rich text content with headers, lists, code blocks

• Plans, discussions, and progress tracking in CodeBook view

In CodeBook: Use codebook.addCell('text') instead for proper cell insertion.

Get markdown content from a Text node.

Update markdown content in a Text node. Supports markdown and LaTeX.

Check if CodeBook (notebook view) is currently active. When CodeBook is open, node creation should use codebook.addCell for proper cell insertion.

Get CodeBook state including cell order, selected cell, and execution status. Useful for understanding the current notebook context.

Add a new cell to CodeBook. Creates a linked node in the workflow and inserts it in the cell order.

Supported cell types:

• code: Python/JavaScript code with execution

• text: Markdown documentation with LaTeX support ($...$)

• agent: AI-powered processing cell

• datagrid: Spreadsheet/sheet for data

• chart: Visualization cell

• image: Image display cell

This is the preferred way to add nodes when CodeBook is open. For workflow canvas, use code.create, text.create, or sheet.create instead.

Open CodeBook view for the current workflow. Switches to notebook-style linear view.

Close CodeBook view and return to workflow canvas.

Execute a specific cell in CodeBook.

Execute all cells in CodeBook in order.

Get the current Python execution target for new code cells.

Set the Python execution target for new code cells.

Get the drawing layer as an image for visual interpretation. Use this when user sketches an idea and you need to "see" what they drew. Returns base64 PNG.

Get information about the active drawing document. Use to determine context (notepad/designer/workflow) and whether HTML components exist.

Create HTML content in Circuitry.

DESIGNER MODE: Use layout.createSection instead! For Designer screens, ALWAYS use layout.createSection to create HTML with proper layout structure. It creates both a layout container AND HTML component together, ensuring correct stacking and preview export.

Only use html.create directly in Designer for adding content to existing layout grid cells.

WORKFLOW context - TWO options (ASK USER if unclear):

• target: "drawing" - Quick prototypes on canvas drawing layer (default)

• target: "node" - Web Node with inputs from other nodes

CRITICAL CSS STRUCTURE - Prevents zoom scaling bugs: NEVER put visual styles (background, border-radius, padding, box-shadow) on :host - causes border-radius to scale incorrectly when zooming. Use :host { display: block; } only, and put all visual styles on an inner container element.

MOBILE UI SIZING:

• Headers: 64px height

• Bottom nav: 84px height

• iPhone 15: 393x852

After editing components: Use layout.analyze with autoFix to detect and fix layout issues.

Update an existing HTML component. Only provided fields will be updated. In Designer mode, operates on currently selected screen - use screen.select first if needed.

Delete an HTML component from the drawing layer. In Designer mode, operates on currently selected screen.

List all HTML components in the current drawing layer. In Designer mode, lists components on currently selected screen.

Get full details of an HTML component including HTML, CSS, and JS content. In Designer mode, searches currently selected screen - use screen.select first if needed.

Get an HTML component by its display name. Case-insensitive search. Use this to find components like "Login Form" or "Navigation Menu" without needing to know the ID. In Designer mode, searches currently selected screen.

Check if Designer mode is active and get current document info.

Returns null if not in Designer mode. Use this before calling screen.* or layout.* tools.

Get the current Designer mode (design, layout, html, or preview).

Set the Designer mode.

• design: Freehand drawing, sketching UI mockups

• layout: Add structural containers (grids, sections)

• html: Convert drawings to HTML, edit properties

• preview: Interactive preview, test responsiveness

Get design context (fonts, colors, patterns, buttons) extracted from all screens.

Use this to understand the user's design style before generating HTML components. The returned context includes:

• fonts: Font families, sizes, and weights used in text elements

• colorPalette: Colors categorized by usage (primary/accent, backgrounds, text)

• buttons: Detected button styles (background, text color, border radius)

• patterns: Common corner radii, whether shadows/gradients are used

• theme: Overall theme (light/dark/neutral) based on backgrounds

TIP: When generating HTML with html.create, use this context to match colors, fonts, and button styles to the existing design.

List all screens (pages/artboards) in the current Designer document.

Get a screen by ID or name.

Create a new screen (page/artboard) in the Designer.

Device presets: iPhone 15, iPhone SE, iPad Pro 12", Desktop 1920, etc. Or use "custom" with explicit dimensions.

TIP: After adding components to a screen, run layout.analyze to check for layout issues and get suggested fixes. Screens can be resized taller if content overflows.

Update screen properties (name, dimensions, backgroundColor).

Delete a screen from the Designer.

Duplicate a screen with all its layouts and HTML components.

Select a screen to make it active for editing.

Capture a Designer screen as a PNG image. Use this to verify layouts and catch visual issues like:

• Clipped content (text/buttons cut off by container)

• Poor contrast (light text on light background)

• Overlapping elements

• Sizing problems

Returns the screen as a base64 PNG image that Claude can analyze visually.

List all layout elements on the current or specified screen.

Get a layout element by ID or name.

Create a layout element on a screen.

Layout Types:

• Semantic sections: header, footer, hero, sidebar

• Grid layouts: grid-1col, grid-2col, grid-3col, grid-4col

• Flex layouts: flex-row, flex-column

• Containers: card, container

Full-width types (header, footer, hero, grids, container) auto-snap to screen width. Semantic elements auto-position: header at top, footer at bottom.

Update a layout element (name, position, dimensions, style).

Delete a layout element.

Set style properties on a layout element.

Available style properties:

• backgroundColor, borderColor, borderWidth, borderRadius, opacity

• padding: { top, right, bottom, left }

• gap (spacing between children)

• justifyContent, alignItems (for flex/grid alignment)

• widthMode, heightMode ('fixed' or 'flexible')

• widthPercent, heightPercent (for responsive sizing)

Search for layout elements by name or type.

Get details about a specific cell in a grid layout.

Set style properties on a specific grid cell.