excalidraw-mcp README

The project's README from github.com/excalidraw/excalidraw-mcp. As one markdown file: README.md.

Excalidraw MCP App Server

MCP server that streams hand-drawn Excalidraw diagrams with smooth viewport camera control and interactive fullscreen editing.

Demo

Install

Works with any client that supports MCP Apps — Claude, ChatGPT, VS Code, Goose, and others. If something doesn't work, please open an issue.

https://mcp.excalidraw.com

For apps that don't yet have an official integration, you can add a custom MCP / connector (naming can vary between apps).

Local

Option A: Download Extension

  1. Download excalidraw-mcp-app.mcpb from Releases
  2. Double-click to install in Claude Desktop

Option B: Build from Source

git clone https://github.com/excalidraw/excalidraw-mcp.git
cd excalidraw-mcp-app
pnpm install && pnpm run build

Add to ~/Library/Application Support/Claude/claude_desktop_config.json:

{
  "mcpServers": {
    "excalidraw": {
      "command": "node",
      "args": ["/path/to/excalidraw-mcp-app/dist/index.js", "--stdio"]
    }
  }
}

Restart Claude Desktop.

Usage

Example prompts:

What are MCP Apps and how can I build one?

Text responses can only go so far. Sometimes users need to interact with data, not just read about it. MCP Apps is an official Model Context Protocol extension that lets servers return interactive HTML interfaces (data visualizations, forms, dashboards) that render directly in the chat.

Contributing

PRs welcome! See Local above for build instructions.

Deploy your own instance

You can deploy your own copy to Vercel in a few clicks:

  1. Fork this repo
  2. Go to vercel.com/new and import your fork
  3. No environment variables needed — just deploy
  4. Your server will be at https://your-project.vercel.app/mcp

Release checklist

For maintainers 
# 1. Bump version in manifest.json and package.json
# 2. Build and pack
pnpm run build && mcpb pack .

# 3. Create GitHub release
gh release create v0.3.0 excalidraw-mcp-app.mcpb --title "v0.3.0" --notes "What changed"

# 4. Deploy to Vercel
vercel --prod

Credits

Built with Excalidraw — a virtual whiteboard for sketching hand-drawn like diagrams.

License

MIT

excalidraw-mcp (excalidraw/excalidraw-mcp)

Searching Database…

5.5K ·GitHub
Excalidraw-mcp
这是什么？这是一个 MCP 服务器，能让 AI 助手直接在聊天中绘制可交互的手绘风格 Excalidraw 图表，并支持流畅的镜头平移、缩放以及全屏编辑。
这只是个纯文本的 MCP 工具，还是更偏向可视化？这是一个 MCP App——一种较新的 MCP 扩展，服务器会返回交互式 HTML 界面，直接在聊天中渲染，而不是纯文本。
我该怎么把它跑起来？推荐的方式是在任何支持 MCP Apps 的客户端中添加远程服务器；如果想本地部署，可以从 Releases 下载 excalidraw-mcp-app.mcpb 扩展，双击即可在 Claude Desktop 中安装，也可以从源码构建。
哪些客户端真正能用这个？任何支持 MCP Apps 扩展的客户端都可以，README 中列举了 Claude、ChatGPT、VS Code 和 Goose 作为示例。
如果我用的客户端还没有官方支持，会有什么麻烦？对于没有官方集成的应用，你需要手动将其添加为自定义 MCP 连接器，而且选项名称因应用而异，所以不一定能一键完成设置。
Excalidraw 本身是什么？Excalidraw 是一款用于绘制手绘风格图表的虚拟白板，这个 MCP 服务器就是基于它构建的，把这块绘图画布开放给 AI 助手使用。
我能自己托管一份副本，而不用共享实例吗？可以。你可以 fork 仓库，然后只需几次点击就能部署到 Vercel，无需任何环境变量。
我可以给它什么样的提示词？示例提示词包括“用 excalidraw 画一只可爱的猫”，或“画一张架构图，展示用户连接 API 服务器，再由 API 服务器访问数据库”。
底层用的是什么技术栈？这是一个 TypeScript/Node 项目，使用 Express、React、Vite 和官方 MCP SDK，并可选择通过 Upstash 使用 Redis 来保存状态。
What are similar projects?rankme.fast, next-ai-draw-io, growth-engineer, evenfire, boardui, smart-excalidraw-next, NextChat, commerce-agents
Which topics is it in?diagrams, vercel, express, vite, redis, data-visualization, model-context-protocol, anthropic, mcp-server, claude, ai-agent, react
Creator
excalidraw
Size
29.9 MB
Stars
5.5K
Updated
CommitMar 24Releasev0.3.2Feb 09
Age
8mo
Commits · 90 Days