MCP Integration

PageNodes includes a Model Context Protocol (MCP) server that allows AI assistants like Claude to programmatically create, modify, and deploy visual flows. This enables a powerful new way to build applications using natural language.

What is MCP? The Model Context Protocol is an open standard that lets AI models interact with external tools and systems. PageNodes implements an MCP server that exposes its flow-building capabilities to AI assistants.

What Can AI Do With PageNodes?

With the MCP integration, you can ask an AI assistant to:

Create complete flows — "Build me a flow that reads from an MQTT topic and displays the data on a canvas"
Add and configure nodes — "Add a function node that filters messages where payload > 100"
Wire nodes together — "Connect the inject node to the HTTP request node"
Deploy and test — "Deploy the flow and trigger the inject node"
Debug and iterate — "Check the debug output and fix any errors"

Available MCP Tools

The PageNodes MCP server exposes these tools to AI assistants:

Flow Management

get_started — Get node catalog and state
get_flows — List all flows and nodes
create_flow — Create a new flow tab
deploy — Deploy changes to runtime

Node Operations

add_nodes — Add multiple nodes at once
update_node — Modify node properties
delete_node — Remove a node
get_node_details — Get full node documentation

Testing & Debugging

inject_node — Trigger an inject node
trigger_node — Send message to any node
get_debug_output — View debug messages
get_errors — View runtime errors

Visualization

get_canvas_svg — Get flow visualization
get_node_statuses — Check node states
clear_debug — Clear debug output
clear_errors — Clear error messages

Example: Building a Game with AI

Here's an example of what you can accomplish with MCP integration. Ask Claude:

"Create a Space Invaders game using the gamepad for input and canvas for rendering"

Claude can then:

Create a gamepad input node to read controller state
Add a function node with complete game logic (player movement, aliens, bullets, collisions)
Connect to a canvas node for 60 FPS rendering
Deploy and test the flow
Iterate based on feedback

The result is a fully playable game built through natural conversation.

Getting Started with MCP

1. Set Up the MCP Server

The PageNodes MCP server runs alongside the browser app. It connects to PageNodes via WebSocket and exposes tools over the MCP protocol.

# Install the MCP server
npm install -g @anthropic/claude-code

# Or use with Claude Desktop by adding to your MCP config

2. Connect Your AI Assistant

Configure your AI assistant (Claude, etc.) to connect to the PageNodes MCP server. The server will automatically detect when PageNodes is open in your browser.

3. Start Building

Open PageNodes in your browser, then start chatting with your AI assistant. Describe what you want to build, and watch the flow come together.

Node Categories Available

AI assistants have access to the full PageNodes node catalog:

🤖 AI

LLM (local language models)
Image AI (vision models)

🎮 Hardware

Gamepad, Camera, Microphone
Accelerometer, Gyroscope, GPS
Bluetooth, Serial, USB, MIDI
GPIO (digital, analog, PWM, servo)

🌐 Networking

MQTT (in/out)
WebSocket (in/out)
Socket.IO (in/out)
HTTP Request
hsync (webhooks, P2P)

🛠 Logic

Function (custom JavaScript)
Switch (conditional routing)
Delay, Trigger, Split/Join
Math, Strings, Arrays

🎨 Output

Debug, Notify
Canvas, Speech
Oscillator, Vibrate

💾 Storage

Local Storage (read/write)
File (read/write)

Try It Now

Open PageNodes and start building with AI assistance.

Launch PageNodes