PlayCanvas MCP Server for Interactive 3D Web Apps

Overview

The PlayCanvas MCP Server is a lightweight development server that implements the Model Context Protocol (MCP) used by the PlayCanvas Editor. It acts as a bridge between the web-based Editor and a local or remote runtime, enabling fast iterative development, live preview, and collaborative workflows for interactive 3D web applications.

By running the MCP server alongside the Editor you can prototype with local content, serve assets, and allow the Editor to connect to a running application instance over HTTP/WebSocket. The server is intended for development and testing: it simplifies serving build artifacts, relaying Editor commands, and providing a consistent interface for tools that expect PlayCanvas MCP endpoints.

Features

• Implements MCP endpoints (HTTP + WebSocket) to connect the PlayCanvas Editor to a runtime.
• Serves static build outputs and assets for local development.
• Live-reload / hot-reload support for rapid iteration (when used with a build tool).
• Configurable ports, TLS options, and CORS settings.
• Proxying and workspace management for multiple projects or build folders.
• Minimal logging and diagnostics to help troubleshoot Editor/runtime connections.
• Docker-friendly and easy to run from source.

Installation / Configuration

Prerequisites: Node.js (LTS) and npm/yarn. Basic steps to get started:

Clone and install

git clone https://github.com/playcanvas/editor-mcp-server.git
cd editor-mcp-server
npm ci

Create a configuration file (copy the example and edit as needed):

cp config.example.json config.json
# edit config.json to set ports, workspace paths, and TLS options

Start the server:

npm start
# or
node server.js

Docker example

# build image
docker build -t playcanvas-mcp-server .

# run, mapping a local project folder into the container
docker run -p 8080:8080 -v /path/to/workspace:/workspace playcanvas-mcp-server

Sample npm scripts in package.json

{
  "scripts": {
    "start": "node server.js",
    "dev": "NODE_ENV=development node server.js"
  }
}

Common environment variables (these can be mapped to config.json or used directly)

MCP_PORT=8080
MCP_WS_PORT=8081
MCP_WORKSPACE=/path/to/your/build
MCP_USE_TLS=false

Configuration keys (example)

Available Resources

• GitHub repository: https://github.com/playcanvas/editor-mcp-server (source, issues, and examples)
• Example config file: config.example.json (included in repo)
• Local preview URL: http://localhost:/ — serves configured workspace/build files
• WebSocket endpoint: ws://localhost:/ (MCP-compatible path)
• Logs: stdout/stderr with configurable verbosity in config.json

Useful developer tools

• Browser DevTools — inspect network, WebSocket frames, and console output.
• PlayCanvas Editor — connect to the MCP server via the Editor UI for live previews.
• Build tools (webpack, rollup, Parcel) — configure to write into the workspace folder the MCP server serves.

Use Cases

• Local prototyping and iteration
  • Serve a local build of a PlayCanvas application and connect the Editor for live adjustments to scripts and assets. Make edits in the Editor and verify behavior immediately against the running local build.
• Collaborative debugging
  • Teams can run a shared MCP server on a dev machine or in a staging environment to allow multiple editors to connect to the same running instance for paired debugging or QA.
• Automated testing and CI
  • Use the MCP server in CI pipelines to serve build artifacts to headless browsers or integration tests that simulate Editor-driven events or WebSocket messages.
• Demo and showcase packaging
  • Host a self-contained preview of a project for stakeholders by running the MCP server against a build folder; optionally run behind TLS for presentation environments.
• Proxying remote assets
  • Use proxy rules to route certain asset requests to remote CDNs or API endpoints while serving other files locally, enabling hybrid development workflows.

Troubleshooting Tips

• If the Editor cannot connect, confirm that both HTTP and WebSocket ports are open and match your Editor configuration.
• Check CORS and TLS settings if the Editor runs in a browser environment that restricts mixed content.
• Use browser DevTools to view WebSocket frames for MCP handshake errors and server logs for stack traces or configuration validation messages.

This server is aimed at developers who need a small, configurable MCP-compatible server to streamline PlayCanvas-based development workflows. For detailed runtime behavior and protocol specifics consult the repository README and example configuration files.

Tags:developer-tools