penecho

Think on a canvas, with any AI.

Sketch by hand. PenEcho's built-in Agent — or Codex, Claude Code and any MCP
client — turns it into diagrams, documents and working widgets right beside your
notes.

Quick start · Connect your AI (MCP) · Docs · Discord

English · 简体中文 · 日本語 · 한국어 · Русский · Español · Português · Français · Deutsch

From a hand sketch to an interactive result in one canvas.

What you can do

   ![PenEcho responding to notes and sketches on a canvas](https://github.com/penecho/penecho/releases/download/v0.1.0/penecho_plugins_sub_x10.webp)   

  Sketch, then ask  

  Handwriting, equations, text and images on an endless canvas. Auto AI answers when you pause.




  [![Kubernetes architecture diagram](docs/assets/professional-diagrams/previews/kubernetes.webp)](docs/assets/professional-diagrams/kubernetes.webp)  

  Professional diagrams  

  Architecture, sequence and workflow diagrams with automatic layout. Export SVG or PNG.




   ![Interactive widget running on a PenEcho canvas](https://github.com/penecho/penecho/releases/download/v0.1.0/play_patris.webp)   

  Working widgets  

  Calculators, quizzes and prototypes that run on the canvas and can be favourited or shared.

Quick start

npm install -g penecho
penecho             # opens http://localhost:3888

[!TIP] On first start, choose a six-digit access code (or open access on a trusted network). Add a model in Settings → AI & connections: your own API key, a signed-in Codex / Claude Code / Kimi CLI, or PenEcho models.

Run from source

git clone https://github.com/penecho/penecho.git
cd penecho
npm install
npm start

Connect your AI agent (MCP)

Keep talking in the agent you already use. PenEcho gives the work a place to live — your agent draws on the canvas, you mark it up, and it reads your feedback on the next turn.

1. In PenEcho, open Settings → MCP service and turn on the current canvas.

2. Use Auto configure for a supported client, or copy the generated setup prompt into your client (Codex, Claude Code, Kimi, Cursor...). For a global npm installation, clients that accept mcpServers JSON can also use the compatibility entry below:

   {
     "mcpServers": {
       "penecho": { "command": "penecho", "args": ["mcp"] }
     }
   }
   

3. Ask: “Show the architecture we discussed on my PenEcho canvas.”

An architecture discussion from Claude Code, annotated by hand on the canvas.

[!NOTE] Agents only see canvases you turn on. Local MCP stays on your computer; Cloud MCP is a separate signed-in connection for Cloud canvases. MCP guide →

Diagram gallery

Kubernetes cluster

Monolith → microservices

Event-driven notifications

How MCP reaches the canvas

Release: parallel tasks

Multi-region rollout

Click any diagram for the full-size version.

How it works

• On your computer — the desktop app or CLI serves the canvas and uses your own model API or agent CLI.
• In the cloud — penecho.ai adds hosted models, synced projects and favorites, and can reach your linked computer.
• Your agent — connects through Local or Cloud MCP. Both are optional.

Details: architecture notes.

Choose your AI

Which model and effort to pick: recommended models (updated with each release).

Recommended models

These recommendations balance answer quality against the latency of PenEcho's real canvas workload, based on current hands-on testing; actual response time varies with the provider, canvas complexity, and reasoning behavior.

What's new in 1.3.5

• UI: minor interface fixes.
• Concurrent canvas editing: support Canvas AI, Agent, and MCP modifying the same canvas simultaneously.

Full changelog →

Community

Licensed under AGPL-3.0-only; commercial licence available. Trademark policy · Contributor agreement.

Diagram renderers adapt SVG and geometry helpers from Archify by tt-a1i (MIT). See NOTICE.