tl-draw-mcp

Servidor MCP + habilidad de Claude Code que permite a Claude dibujar en un lienzo de tldraw en vivo a partir de prompts.

• Abre http://localhost:3030 en cualquier navegador → los dibujos de Claude aparecen en tiempo real.

• Cuatro herramientas: create_shape, update_shape, delete_shape, get_canvas.

• JS puro, MIT, optimizado para Windows.

1. Instalación

git clone <this repo> tl-draw-mcp
cd tl-draw-mcp
npm install
cd packages\web    && npm run build
cd ..\server       && npm run build

2. Conéctalo a Claude Code

Comando de una línea (recomendado — sin edición de JSON):

claude mcp add tldraw --scope user -- cmd /c node "D:/path/to/tl-draw-mcp/packages/server/dist/index.js"

Verifica:

claude mcp list

Deberías ver tldraw en la lista. Reinicia Claude Code.

3. Instala la habilidad

Copia la carpeta de la habilidad para que Claude sepa cuándo dibujar:

xcopy /E /I .claude\skills\tldraw %USERPROFILE%\.claude\skills\tldraw

4. Uso

1. Inicia Claude Code en cualquier proyecto.

2. La primera llamada a la herramienta iniciará el servidor — abre http://localhost:3030.

3. La insignia en la parte inferior derecha dirá tldraw MCP · connected.

4. Prompt:

   Dibuja un diagrama de flujo de un proceso de inicio de sesión.

5. Desarrollo

cd packages\server && npm test           :: 12 handler tests
cd packages\server && npm run dev        :: stdio + WS bridge on :3030
cd packages\web    && npm run dev        :: Vite HMR on :5173

6. Diseño

packages/server   MCP stdio server, WS bridge, static host, tool handlers
packages/web      Vite + React + tldraw browser app (builds into server/public)
.claude/skills/   SKILL.md for Claude Code
examples/         sample MCP config (if you prefer JSON over the CLI)

7. Solución de problemas

Consulta plan.md para notas de diseño y LICENSE para los términos de la licencia MIT.