PlayCanvas Editor Integration

Overview

The PlayCanvas Editor is a visual development platform for interactive web content. Built on the PlayCanvas Engine, it provides a comprehensive suite of tools for creating 3D applications directly in your browser.

Features

• Visual scene editor
• Asset pipeline
• Script editor
• Real-time collaboration

Technologies

• WebGL rendering
• JavaScript/TypeScript
• Node.js backend
• WebSocket support

MCP (Model Context Protocol) Integration

What is MCP?

MCP (Model Context Protocol) is a standardized protocol for AI models to interact with external tools and services. In this project, we use MCP to:

• Access PlayCanvas documentation through context7
• Integrate with development tools
• Enable AI-assisted development workflows

MCP Servers Used

context7

Retrieves up-to-date documentation and code examples for PlayCanvas and other libraries. Used for intelligent code completion and documentation.

playwright

Enables automated testing and debugging of the PlayCanvas editor UI through browser automation.

sequential-thinking

Assists in complex problem-solving for 3D mathematics and rendering algorithms.

Implementation Example

// Using MCP context7 to fetch PlayCanvas docs
const fetchPlayCanvasDocs = async (topic: string) => {
  const response = await mcp.context7.getLibraryDocs({
    context7CompatibleLibraryID: '/playcanvas/engine',
    topic: topic,
    tokens: 10000
  });
  return response;
};

// Example: Get documentation for pc.Application
const appDocs = await fetchPlayCanvasDocs('Application');

Setup Instructions

1. Clone the Repository

git clone https://github.com/playcanvas/editor.git cd editor

2. Install Dependencies

npm install # or pnpm install

3. Configure MCP

// mcp.config.js
export default {
  servers: {
    context7: {
      command: 'npx',
      args: ['@context7/mcp-server'],
      env: {}
    },
    playwright: {
      command: 'npx',
      args: ['@playwright/mcp-server'],
      env: {}
    }
  }
};

4. Run the Development Server

npm run dev # Editor will be available at http://localhost:3000

Architecture

Frontend Architecture

React Components: Modular UI components for editor panels
PlayCanvas Engine: Core 3D rendering and scene management
Monaco Editor: Code editing with syntax highlighting
State Management: Zustand for application state

Backend Services

Asset Pipeline: Processing and optimization of 3D assets
Project Storage: Database for project files and metadata
Collaboration Server: WebSocket for real-time updates
MCP Gateway: Interface for AI tool integration

Quick Links

MCP Status

context7Connected

playwrightReady

sequential-thinkingActive

Code Examples

Initialize PlayCanvas App

const canvas = document.getElementById('application');
const app = new pc.Application(canvas, {
  mouse: new pc.Mouse(canvas),
  touch: new pc.TouchDevice(canvas)
});
app.start();

Create a 3D Box

const entity = new pc.Entity('cube');
entity.addComponent('render', {
  type: 'box'
});
app.root.addChild(entity);

Add Lighting

const light = new pc.Entity('light');
light.addComponent('light', {
  type: 'directional',
  color: new pc.Color(1, 1, 1),
  intensity: 1
});
light.setEulerAngles(45, 0, 0);
app.root.addChild(light);

Live Editor Demo

This is an embedded PlayCanvas Editor instance. You can interact with it directly.