This project provides a TypeScript-based system that integrates Excalidraw's visual diagramming capabilities with the Model Context Protocol (MCP), allowing AI agents to create and manipulate diagrams in real-time. It's designed for developers and users who need to generate or interact with visual diagrams programmatically, offering a live canvas accessible via a web browser and real-time synchronization across multiple clients.

How It Works

The system comprises three main components: an AI Agent (like Claude), an MCP Server, and a Canvas Server. The AI agent interacts with the MCP server, which translates AI commands into diagram elements. These commands are then sent to the Canvas Server, which manages the Excalidraw canvas and synchronizes changes in real-time to a React-based frontend via WebSockets. This architecture ensures that AI-generated diagrams are instantly reflected on the live canvas, facilitating dynamic visual collaboration.

Quick Start & Requirements

The recommended installation is the local development setup:

1. Clone the repository: git clone https://github.com/yctimlin/mcp_excalidraw.git
2. Navigate to the directory and install dependencies: cd mcp_excalidraw && npm install
3. Build the frontend: npm run build
4. Start the system in production mode: npm run canvas
5. Access the canvas at http://localhost:3000.

Prerequisites include Node.js (version 16+). The project is written in TypeScript, with a React frontend and an Express.js backend.

Highlighted Details

• Full TypeScript migration for type safety across backend and frontend.
• Real-time synchronization of Excalidraw elements created via the MCP API.
• Production-ready, clean UI suitable for end-users.
• Comprehensive MCP API for element creation, management, and batch operations.

Maintenance & Community

The project is actively maintained, with ongoing work to debug the NPM package and improve Docker deployment. Contributions are welcomed via pull requests.

Licensing & Compatibility

The project is licensed under the MIT License, permitting commercial use and closed-source linking.

Limitations & Caveats

The NPM published and Docker versions are currently under development, with known issues in tool registration and canvas synchronization reliability, respectively. The local development setup is recommended for the most stable experience.