Construct Shader Graph MCP

Standalone MCP server for controlling Construct Shader Graph through its browser bridge.

It exposes project discovery, manifest inspection, and exact method execution for the live app, while also bundling the guidance the model needs to work well with the tool.

Construct Shader Graph is a visual editor for building Construct effect shaders as node graphs. You can find the app here:

• https://skymen.github.io/construct-shader-graph/

Features

• MCP tools for project discovery and method execution
• local WebSocket bridge on ws://127.0.0.1:6359 by default
• built-in skill guidance available directly from the MCP
• works with hosts like Claude Desktop and OpenCode

MCP tools

• get_skill_guidance
• list_projects
• select_project
• get_project_manifest
• call_project_method

MCP resources

• construct-shader-graph://guidance/skill
• construct-shader-graph://guidance/quickstart

Install as a package

Global install:

npm install -g construct-shader-graph-mcp

Run after installing globally:

construct-shader-graph-mcp

Or run without installing globally:

npx -y construct-shader-graph-mcp

Local development

Clone the repo and install dependencies:

git clone https://github.com/skymen/construct-shader-graph-mcp.git
cd construct-shader-graph-mcp
npm install

Run locally:

npm start

Configuration

Optional environment variable:

• MCP_BRIDGE_PORT to change the browser bridge port from 6359
• MCP_CONTROL_PORT to change the internal local control port used for multi-host sharing

Example:

MCP_BRIDGE_PORT=6360 construct-shader-graph-mcp

Multiple MCP hosts

This package supports multiple MCP clients on the same machine.

• The first process becomes the primary backend and owns the browser bridge port.
• Later processes detect the running backend and act as lightweight followers.
• This allows tools like Claude Desktop and LM Studio to share the same live Construct Shader Graph connection.

By default:

• browser bridge: 6359
• local control port: 6360

How it works

There are two sides to the integration:

1. The MCP host launches this package over stdio.
2. The Construct Shader Graph page connects to the local WebSocket bridge.

The page should:

• connect to ws://127.0.0.1:6359 by default
• register itself with project metadata from shader.getInfo()
• answer invoke messages with exact API return values

Claude Desktop setup

If installed globally:

{
  "mcpServers": {
    "construct-shader-graph": {
      "command": "construct-shader-graph-mcp"
    }
  }
}

If using npx:

{
  "mcpServers": {
    "construct-shader-graph": {
      "command": "npx",
      "args": ["-y", "construct-shader-graph-mcp"]
    }
  }
}

OpenCode setup

Use the same command shape in your MCP configuration.

Global install example:

{
  "mcpServers": {
    "construct-shader-graph": {
      "command": "construct-shader-graph-mcp"
    }
  }
}

npx example:

{
  "mcpServers": {
    "construct-shader-graph": {
      "command": "npx",
      "args": ["-y", "construct-shader-graph-mcp"]
    }
  }
}

Typical usage flow

1. Start the MCP server from your host.
2. Open Construct Shader Graph.
3. In the app, connect to the MCP bridge from the Help menu.
4. The host can now:
   • call list_projects
   • select the right project with select_project
   • inspect available methods with get_project_manifest
   • execute API calls with call_project_method

For better AI guidance, the host can also read the built-in guidance resources