codex-tldraw

codex-tldraw

A Codex stdio MCP server that generates simple tldraw product workflow diagrams as .tldr files.

Category
Visit Server

README

codex-tldraw-mcp

A Codex stdio MCP server that generates simple tldraw product workflow diagrams as .tldr files.

This project is snapshot-only. It does not control a live browser canvas or provide live collaboration. It writes board files to the repository being diagrammed so a tldraw-compatible viewer can open them later.

Add To Codex

codex mcp add codex-tldraw -- npx -y codex-tldraw-mcp

Then ask Codex to use codex-tldraw and call diagram_repo.

Example prompt:

Use codex-tldraw to diagram this repo.

For manual Codex stdio MCP configuration:

[mcp_servers.codex-tldraw]
command = "npx"
args = ["-y", "codex-tldraw-mcp"]

What It Does

  • Scans a local repo from package metadata and source text.
  • Infers a simple user-facing product workflow.
  • Draws that workflow as tldraw steps and arrows.
  • Appends a new diagram to the right when the board already contains shapes.
  • Exposes board summaries as MCP resources.

Output

The default board is:

<repo>/boards/main.tldr

If main.tldr is empty or missing, diagram_repo creates the first diagram near the canvas origin. If it already has shapes, diagram_repo appends the next diagram to the right of the existing content instead of clearing the board.

Tools

  • diagram_repo: scans a repo and appends a product workflow diagram to <repo>/boards/<boardName>.tldr.
  • list_boards: lists boards under a repo's boards/ directory.
  • read_board_summary: summarizes generated diagrams and shape counts.

Each tool accepts an optional repoPath. Relative paths are resolved from the MCP server working directory.

Board resources list and read boards from the most recent repoPath used by a tool call. Before any tool call, resources default to the MCP server working directory.

Security

This is a local filesystem tool. It reads source files from repoPath and writes .tldr files under repoPath/boards.

To restrict access to specific directories, set TLDRAW_MCP_ALLOWED_ROOTS to a path-delimited allowlist:

[mcp_servers.codex-tldraw]
command = "npx"
args = ["-y", "codex-tldraw-mcp"]
env = { TLDRAW_MCP_ALLOWED_ROOTS = "/Users/me/dev:/Users/me/work" }

When the allowlist is set, repoPath must resolve inside one of those roots.

Generated .tldr files do not store absolute local repository paths in shape metadata.

Local Development

This repo uses Bun for development:

bun install
bun run build
bun run smoke

Run the server from source:

bun run dev

Use a local build in Codex:

[mcp_servers.codex-tldraw]
command = "node"
args = ["/absolute/path/to/codex-tldraw-mcp/dist/index.js"]

Publish

Build, test, inspect the package contents, then publish:

bun install
bun run build
bun run smoke
bun publish --dry-run
bun publish --access public

For a handwriting font app, the workflow may be inferred as:

User writes alphabet on paper -> User takes a photo of the paper -> User uploads the image -> AI generates a font -> User downloads a .ttf file

Recommended Servers

playwright-mcp

playwright-mcp

A Model Context Protocol server that enables LLMs to interact with web pages through structured accessibility snapshots without requiring vision models or screenshots.

Official
Featured
TypeScript
Magic Component Platform (MCP)

Magic Component Platform (MCP)

An AI-powered tool that generates modern UI components from natural language descriptions, integrating with popular IDEs to streamline UI development workflow.

Official
Featured
Local
TypeScript
Audiense Insights MCP Server

Audiense Insights MCP Server

Enables interaction with Audiense Insights accounts via the Model Context Protocol, facilitating the extraction and analysis of marketing insights and audience data including demographics, behavior, and influencer engagement.

Official
Featured
Local
TypeScript
VeyraX MCP

VeyraX MCP

Single MCP tool to connect all your favorite tools: Gmail, Calendar and 40 more.

Official
Featured
Local
graphlit-mcp-server

graphlit-mcp-server

The Model Context Protocol (MCP) Server enables integration between MCP clients and the Graphlit service. Ingest anything from Slack to Gmail to podcast feeds, in addition to web crawling, into a Graphlit project - and then retrieve relevant contents from the MCP client.

Official
Featured
TypeScript
Kagi MCP Server

Kagi MCP Server

An MCP server that integrates Kagi search capabilities with Claude AI, enabling Claude to perform real-time web searches when answering questions that require up-to-date information.

Official
Featured
Python
E2B

E2B

Using MCP to run code via e2b.

Official
Featured
Neon Database

Neon Database

MCP server for interacting with Neon Management API and databases

Official
Featured
Exa Search

Exa Search

A Model Context Protocol (MCP) server lets AI assistants like Claude use the Exa AI Search API for web searches. This setup allows AI models to get real-time web information in a safe and controlled way.

Official
Featured
Qdrant Server

Qdrant Server

This repository is an example of how to create a MCP server for Qdrant, a vector search engine.

Official
Featured