Excalidraw MCP App은 Excalidraw를 사용하여 손으로 그린 듯한 다이어그램을 매끄러운 viewport camera control과 대화형 fullscreen 편집 기능과 함께 스트리밍하는 Model Context Protocol (MCP) server입니다.

이 프로젝트의 핵심 방법론은 'MCP Apps'라는 개념을 중심으로 합니다. MCP Apps는 Model Context Protocol의 공식 확장으로, AI 모델이 텍스트 응답뿐만 아니라 시각화, 양식, 대시보드와 같은 대화형 HTML interfaces를 채팅 인터페이스 내에서 직접 렌더링하도록 허용합니다. Excalidraw MCP App은 이러한 MCP server 중 하나로 작동하며, 호환 가능한 AI client (예: Claude, ChatGPT, VS Code, Goose 등)에 Excalidraw 드로잉 캔버스를 interactive HTML interface로 제공합니다. 이를 통해 사용자는 챗봇 환경을 벗어나지 않고도 실시간으로 다이어그램을 생성하고 편집할 수 있습니다. server는 사용자의 상호 작용을 처리하고 다이어그램의 상태를 client와 동기화하여 연속적인 드로잉 경험을 제공합니다.

설치 방법은 크게 두 가지입니다.

1. Remote (원격): https://excalidraw-mcp-app.vercel.app/mcp URL을 AI client의 custom connector로 추가하는 방식입니다. 이는 Vercel에 배포된 원격 server를 사용하는 것을 의미합니다.
2. Local (로컬):
   • Option A: Download Extension: Releases에서 excalidraw-mcp-app.mcpb 파일을 다운로드하여 Claude Desktop과 같은 client에 직접 설치할 수 있습니다.
   • Option B: Build from Source: git clone을 통해 소스 코드를 복제한 후 npm install 및 npm run build 명령어를 사용하여 직접 빌드합니다. 빌드된 애플리케이션의 경로를 ~/Library/Application Support/Claude/claude_desktop_config.json 파일의 mcpServers 설정에 추가하여 Claude Desktop에서 로컬 server로 실행할 수 있습니다. 이 경우 command는 node로, args는 ['/path/to/excalidraw-mcp-app/dist/index.js', '--stdio']로 지정합니다.

사용 예시로는 "Draw a cute cat using excalidraw" 또는 "Draw an architecture diagram showing a user connecting to an API server which talks to a database"와 같이 AI 모델에 Excalidraw를 사용한 그림을 요청하는 프롬프트를 사용할 수 있습니다.

기여 및 배포와 관련하여, Pull Request를 환영하며, manifest.json 및 package.json의 버전 범프, npm run build && mcpb pack .을 통한 빌드 및 패키징, GitHub release 생성, 그리고 vercel --prod을 통한 Vercel 배포 등의 Release checklist가 명시되어 있습니다. 사용자는 자신의 GitHub repository를 fork하고 Vercel에 임포트하여 개인 인스턴스를 쉽게 배포할 수도 있습니다.

이 프로젝트는 Excalidraw를 기반으로 구축되었으며, MIT License를 따릅니다.