tldraw のリモート MCP サーバーとは何ですか?
tldraw のリモート MCP サーバーは、https://tldraw-mcp-app.tldraw.workers.dev/mcp にホストされた Model Context Protocol エンドポイントです。AI アシスタントはローカルに何もインストール・実行することなく接続できます。
tldraw MCP Server
@tldraw
基本情報
tldraw MCP Server について
tldraw is a collaborative whiteboard and canvas SDK. Its remote MCP server lets assistants draw and edit diagrams — flowcharts, architecture sketches, wireframes — on a live tldraw canvas while you work.
接続情報
https://tldraw-mcp-app.tldraw.workers.dev/mcpセットアップ
claude mcp add tldraw --transport http https://tldraw-mcp-app.tldraw.workers.dev/mcptldraw MCP Server のツール
6Search the tldraw Editor API spec by writing JavaScript that receives a `spec` object and returns a result. The spec contains: spec.members (all Editor methods/properties with name, kind, signature, description, category), spec.categories (category names), spec.types.shapes (focused shape type definitions with props), spec.types.shapeTypes (list of all shape type strings), spec.helpers (exec helper functions with descriptions, params, examples). Examples: - Find shape methods: return spec.members.filter(m => m.category === "shapes").map(m => ({ name: m.name, signature: m.signature })) - Get arrow shape props: return spec.types.shapes.find(s => s.shapeType === "arrow") - List all categories: return spec.categories - Find a helper: return spec.helpers.find(h => h.name === "createArrowBetweenShapes")
Execute JavaScript code on a tldraw canvas. The code runs in the widget with access to the live `editor` instance, helper functions, and normal js. Use the `search` tool first to discover available Editor methods and shape types. Each canvas has a unique `canvasId`. Omit `canvasId` to create a new blank canvas. To edit an existing canvas, pass the `canvasId` that was returned by a previous exec call. Shapes and text grow depending on the amount of text they have. Use clever scripting to ensure there are no unintended overlaps. Examples: - Create a rectangle: editor.createShape({ _type: 'rectangle', shapeId: 'box1', x: 200, y: 120, w: 320, h: 180, text: 'Hello' }) - Connect shapes with an arrow: editor.createShape({ _type: 'arrow', shapeId: 'a1', fromId: 'box1', toId: 'box2', x1: 0, y1: 0, x2: 100, y2: 0 }) - Select and zoom: editor.select('box1'); editor.zoomToSelection() - Read shapes: return editor.getCurrentPageShapes() - Distribute evenly: editor.distributeShapes(editor.getSelectedShapeIds(), 'horizontal') - Box around shapes: boxShapes(['box1', 'box2'], { text: 'Group label', color: 'blue' }) - Stack shapes dynamically: editor.createShape({ _type: 'rectangle', shapeId: 'a', x: 0, y: 0, w: 300, h: 200, text: 'First box\nwith wrapping text' }); const bounds = editor.getShapePageBounds('a'); editor.createShape({ _type: 'rectangle', shapeId: 'b', x: 0, y: bounds.maxY + 20, w: 300, h: 200, text: 'Below first' })
App-only: widget calls this to resolve a pending exec request.
App-only: get the latest checkpoint for a canvas by its canvasId.
App-only: read shapes from a checkpoint by ID.
App-only: save shapes to a checkpoint (from user edits). shapesJson and assetsJson must be JSON array strings.
よくある質問
tldraw の MCP サーバーにはどう接続しますか?
エンドポイント https://tldraw-mcp-app.tldraw.workers.dev/mcp を Claude Code、Cursor、VS Code など任意の MCP 対応クライアントに追加してください。このページのセットアップ手順で各クライアントを一度に設定できます。
tldraw の MCP サーバーは認証が必要ですか?
この掲載では tldraw の認証要件がまだ確認されていません。接続前に提供元のドキュメントをご確認ください。
tldraw の MCP サーバーはどのトランスポートを使用しますか?
tldraw は Streamable HTTP エンドポイントを公開しており、これはリモート MCP サーバーで広く使われ、主要な MCP クライアントがサポートするトランスポートです。
他のリモート MCP サーバー
%20-%20Sarah%20Xu.svg){kind=icon}
Adobe Journey Optimizer
Understand and troubleshoot your Journeys and Campaigns
2pr.io
Write, schedule and publish LinkedIn posts in your own voice, reply to comments and read your analytics, all from your AI assistant. Remote MCP server with OAuth sign-in.
AdisInsight
Pharmaceutical drug & clinical trial intelligence
AWS Knowledge MCP Server
Search and read current AWS documentation, check regional availability and load AWS agent skills, with no AWS account needed.
AdWhispr - Research, Clone, & Launch Ads from Claude/ChatGPT
Remote MCP server that turns Claude, ChatGPT, or Cursor into a full ad workflow: research any brand's live Facebook and TikTok ads, clone the proven winners for your own brand, and launch real campaigns on Google, TikTok
コメント