Excalimate
Create keyframe animations from hand-drawn Excalidraw diagrams — timeline editor, camera animation, sequence reveals, and an MCP server for AI-driven creation with real-time live preview Export as MP4, WebM, GIF, or animated SVG.
What is Excalimate?
Excalimate is a Model Context Protocol (MCP) server that allows AI assistants like Claude, Cursor, and VS Code to create keyframe animations from hand-drawn excalidraw diagrams — timeline editor, camera animation, sequence reveals, and an mcp server for ai-driven creation with real-time live preview export as mp4...
Create keyframe animations from hand-drawn Excalidraw diagrams — timeline editor, camera animation, sequence reveals, and an MCP server for AI-driven creation with real-time live preview Export as MP4, WebM, GIF, or animated SVG.
This server falls under the Developer Tools category on MCPgee, the world's largest MCP server directory with 33,000+ servers.
Features
- Create keyframe animations from hand-drawn Excalidraw diagra
Use Cases
Maintainer
Works with
Installation
Manual Installation
npx excalimateConfiguration
Configuration Details
claude_desktop_config.json
Performance
Response Metrics
Resource Usage
How to Set Up and Use Excalimate
Excalimate is a web-based animation tool that turns Excalidraw hand-drawn diagrams into keyframe animations, and its MCP server lets AI agents like Claude, Cursor, and GitHub Copilot create and animate those diagrams in real-time through a live SSE preview. The server exposes 23 tools for scene creation, element placement, animation keyframe control, camera pan/zoom, and project sharing, enabling an agent to assemble a full animated diagram presentation from a single natural language prompt. Results can be exported as MP4, WebM, GIF, or animated SVG, and the web app at app.excalimate.com shows AI changes live as they happen in HTTP mode. It is particularly useful for generating architecture diagrams, flowcharts, sequence diagrams, and data pipeline visualizations with motion.
Prerequisites
- Node.js 18 or higher (to run the MCP server via npx)
- An MCP client that supports HTTP transport for live preview (Claude Code, Cursor, Windsurf, VS Code with Copilot) or stdio transport (Claude Desktop)
- A browser open to app.excalimate.com with the Live button clicked (for HTTP mode live preview)
- No account or API key required for the MCP server itself
Start the Excalimate MCP server
Run the MCP server via npx — no installation required. By default it listens on port 3001. Use --port to change the port and --stdio to force stdio mode for clients that require it.
npx @excalimate/mcp-server
# Custom port:
npx @excalimate/mcp-server --port 4000
# stdio mode (Claude Desktop):
npx @excalimate/mcp-server --stdioOpen app.excalimate.com and enable Live mode
Navigate to app.excalimate.com in your browser and click the 'Live' button in the toolbar. This connects the web app to your local MCP server via SSE so you can watch AI changes appear in real-time.
Configure your MCP client for HTTP mode
For Claude Code, Cursor, Windsurf, or VS Code with Copilot, add the server as an HTTP MCP endpoint pointing at localhost:3001/mcp.
# Claude Code:
npx @excalimate/mcp-server &
claude mcp add excalimate http://localhost:3001/mcp
# VS Code (.vscode/mcp.json):
{
"servers": {
"excalimate": {
"type": "http",
"url": "http://localhost:3001/mcp"
}
}
}Configure Claude Desktop for stdio mode
Claude Desktop does not support HTTP transport, so use stdio mode. In this mode there is no live preview — use save_checkpoint or share_project to view results in app.excalimate.com.
{
"mcpServers": {
"excalimate": {
"command": "npx",
"args": ["@excalimate/mcp-server", "--stdio"]
}
}
}Install AI skills for better output (optional)
Install the 16 built-in skills that teach agents how to create specific diagram types with proper animation patterns. Works with GitHub Copilot via the skills CLI, or manually for any agent.
npx skills add https://github.com/excalimate/excalimateExcalimate Examples
Client configuration
HTTP mode configuration for Claude Code — start the server first, then register it. For Claude Desktop use the stdio configuration in step 4.
{
"mcpServers": {
"excalimate": {
"command": "npx",
"args": ["@excalimate/mcp-server", "--stdio"]
}
}
}Prompts to try
Example prompts for creating animated diagrams through the Excalimate MCP server.
- "Create an animated architecture diagram showing a three-tier web application with load balancer, app servers, and database"
- "Draw a flowchart of a user login process and animate each step appearing in sequence"
- "Create a sequence diagram showing API calls between a frontend, backend, and Stripe payment service"
- "Build an animated data pipeline diagram from Kafka to Spark to a data warehouse, with arrows animating to show data flow"
- "Generate a mind map about machine learning concepts and export it as a GIF"Troubleshooting Excalimate
Port 3001 already in use when starting the server
Use the --port flag to run on a different port: 'npx @excalimate/mcp-server --port 4000'. Update your MCP client config and the app.excalimate.com Live connection URL to match the new port.
Live preview not updating in app.excalimate.com
Ensure the MCP server is running in HTTP mode (not --stdio) and that you clicked the 'Live' button in the app before asking the AI to create content. The SSE connection is established when you click Live — refresh the page and click Live again if updates stop appearing.
Claude Desktop shows tools but animations don't appear
Claude Desktop uses stdio transport which does not support live preview. After the agent finishes, call the 'save_checkpoint' or 'share_project' tool to get a URL you can open in app.excalimate.com to view and export the result.
Frequently Asked Questions about Excalimate
What is Excalimate?
Excalimate is a Model Context Protocol (MCP) server that create keyframe animations from hand-drawn excalidraw diagrams — timeline editor, camera animation, sequence reveals, and an mcp server for ai-driven creation with real-time live preview export as mp4, webm, gif, or animated svg. It connects AI assistants to external tools and data sources through a standardized interface.
How do I install Excalimate?
Follow the installation instructions on the Excalimate GitHub repository. Clone the repo, install dependencies, and add the server config to your AI client.
Which AI clients work with Excalimate?
Excalimate works with all major MCP-compatible AI clients including Claude Desktop, Claude Code, Cursor, VS Code (GitHub Copilot), Windsurf, and Cline.
Is Excalimate free to use?
Yes, Excalimate is open source and available under the MIT license. You can use it freely in both personal and commercial projects.
Excalimate Alternatives — Similar Developer Tools Servers
Looking for alternatives to Excalimate? Here are other popular developer tools servers you can use with Claude, Cursor, and VS Code.
Ecc
★ 188.2kThe agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Codex, Opencode, Cursor and beyond.
Javaguide
★ 155.8kJava 面试 & 后端通用面试指南,覆盖计算机基础、数据库、分布式、高并发、系统设计与 AI 应用开发
Gemini CLI
★ 104.5kA secure MCP server that wraps the Google Gemini CLI, allowing clients to query Gemini models using local OAuth sessions without requiring an API key. It provides tools for model interaction and diagnostics with built-in protection against command in
Awesome MCP Servers
★ 87.3k⭐ Curated list of Model Context Protocol (MCP) servers - tools that extend Claude Desktop, Cursor, Windsurf, and other MCP clients with custom capabilities.
MCP Servers
★ 86.0kModel Context Protocol Servers
CC Switch
★ 77.5kA cross-platform desktop All-in-One assistant for Claude Code, Codex, OpenCode, OpenClaw, Gemini CLI & Hermes Agent. Only official website: ccswitch.io
Browse More Developer Tools MCP Servers
Explore all developer tools servers available in the MCPgee directory. Each server includes setup guides for Claude, Cursor, and VS Code.
Set Up Excalimate in Your Editor
Choose your AI client for step-by-step setup instructions.
Quick Config Preview
Add this to your claude_desktop_config.json or .cursor/mcp.json
Ready to use Excalimate?
Browse our complete directory of 33,000+ MCP servers, read setup guides for your editor, and start building with the Model Context Protocol.