Excalimate

v1.0.0Developer Toolsstable

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.

aiai-toolsanimationdiagramexcalidraw
Share:
19
Stars
0
Downloads
0
Weekly
0/5

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

Keyframe animation from Excalidraw diagrams
Video export as MP4, WebM, GIF
Timeline and camera animation
excalimate

Maintainer

LicenseMIT
Languagetypescript
Versionv1.0.0
UpdatedMay 15, 2026
Statushealthy
Maintenanceactive

Works with

ClaudeOpenAIwindowsmacoslinux

Installation

Manual Installation

npx excalimate

Configuration

Configuration Details

Config File

claude_desktop_config.json

Performance

Response Metrics

Response Time< 200ms
ThroughputMedium

Resource Usage

Memory UsageLow
CPU UsageLow

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
1

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 --stdio
2

Open 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.

3

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"
    }
  }
}
4

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"]
    }
  }
}
5

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/excalimate

Excalimate 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.

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.

Quick Config Preview

{ "mcpServers": { "excalimate": { "command": "npx", "args": ["-y", "excalimate"] } } }

Add this to your claude_desktop_config.json or .cursor/mcp.json

Read the full setup guide →

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.

33,000+ ServersFree & Open SourceStep-by-Step Guides