Tldraw Agent
FreeNot checkedGenerates diagrams from natural language text descriptions using tldraw and Playwright, with PNG and SVG export.
About
Generates diagrams from natural language text descriptions using tldraw and Playwright, with PNG and SVG export.
README
Generate diagrams from text. Works anywhere.
npx tldraw-agent draw "User → API → Database"
Install
npm install -g @joelhooks/tldraw-agent
Usage
CLI
tldraw-agent draw "microservices architecture with load balancer"
tldraw-agent draw "signup flow" --format svg -o signup.svg
Library
import { TldrawAgent } from '@joelhooks/tldraw-agent'
const agent = new TldrawAgent()
const { path } = await agent.draw({ prompt: 'system diagram' })
MCP
{
"mcpServers": {
"tldraw": { "command": "npx", "args": ["@joelhooks/tldraw-agent", "--mcp"] }
}
}
Features
- 🖼️ PNG/SVG export
- 🤖 LLM-powered layout (Claude, GPT)
- 📐 Architecture, flowcharts, entity diagrams
- 🔌 Works as CLI, library, MCP tool, or agent skill
Environment
export AI_GATEWAY_API_KEY=... # Vercel/Cloudflare AI Gateway key
License
MIT
Install Tldraw Agent in Claude Desktop, Claude Code & Cursor
unyly install tldraw-agentInstalls into Claude Desktop, Claude Code, Cursor & VS Code — handles npx, uvx and build-from-source repos for you.
First time? Get the CLI: curl -fsSL https://unyly.org/install | sh
Or configure manually
Run in your terminal:
claude mcp add tldraw-agent -- npx -y github:joelhooks/tldraw-agentStep-by-step: how to install Tldraw Agent
FAQ
Is Tldraw Agent MCP free?
Yes, Tldraw Agent MCP is free — one-click install via Unyly at no cost.
Does Tldraw Agent need an API key?
No, Tldraw Agent runs without API keys or environment variables.
Is Tldraw Agent hosted or self-hosted?
Self-hosted: the server runs locally on your machine via the install command above.
How do I install Tldraw Agent in Claude Desktop, Claude Code or Cursor?
Open Tldraw Agent on unyly.org, pick your client tab (Claude Desktop, Claude Code, Cursor) and press Install — the config is generated automatically, no JSON editing.
Related MCPs
Playwright
Browser automation, scraping, screenshots
by MicrosoftPuppeteer
Browser automation and web scraping.
by modelcontextprotocolopentabs-dev/opentabs
Plugin-based MCP server + Chrome extension that gives AI agents access to web applications through the user's authenticated browser session. 100+ plugins with a
by opentabs-devrobhunter/agentdeals
1,500+ developer infrastructure deals, free tiers, and startup programs across 54 categories. Search deals, compare vendors, plan stacks, and track pricing chan
by robhunterhlydecker/ucsc-genome-mcp
MCP server to interact with the UCSC Genome Browser API, letting you find genomes, chromosomes, and more.
by hlydecker34892002/bilibili-mcp-js
A MCP server that supports searching for Bilibili content. Provides LangChain integration examples and test scripts.
by 34892002achiya-automation/safari-mcp
Native Safari browser automation for AI agents with 80+ tools. No Chrome dependency, optimized for Apple Silicon with 60% less CPU overhead.
by achiya-automationagent-infra/mcp-server-browser
Browser automation capabilities using Puppeteer, both support local and remote browser connection.
by bytedanceaparajithn/agent-scraper-mcp
Web scraping MCP server for AI agents. 6 tools: clean content extraction, structured scraping with CSS selectors, full-page screenshots via Playwright, link ext
by aparajithnapireno/DOMShell
Browse the web using filesystem commands (ls, cd, grep, click). 38 MCP tools map Chrome's Accessibility Tree to a virtual filesystem via a Chrome Extension.
by apirenoCompare Tldraw Agent with
Not sure what to pick?
Find your stack in 60 seconds
Author?
Embed badge for your README
Browse similar
All browse MCPs