{"slug": "penecho-an-open-source-canvas-with-ai", "title": "PenEcho: An Open-Source Canvas with AI", "summary": "PenEcho, an open-source shared canvas that integrates handwriting, equations, and diagrams with AI, has been released. The tool allows users to interact with AI beyond chat by placing content anywhere on a 20,000 x 20,000 canvas and receiving contextual responses. It supports multiple AI executors including OpenAI-compatible APIs, Codex CLI, and Claude CLI, and is available via npm.", "body_md": "**Think with AI beyond the chat box.**\n\nPenEcho is a shared canvas where handwriting, equations, diagrams, and spatial context become part of the conversation.\n\nPut a question, equation, diagram, or half-formed idea anywhere on the canvas and pause. PenEcho reads your marks and their spatial relationships, then answers beside them. You can work through a problem without translating every step into a chat message or rebuilding it with rigid diagram tools.\n\n- Get answers, hints, explanations, continuations, formulas, plots, and diagrams directly on the canvas.\n- Move, resize, accept, or discard every AI draft before it becomes part of your work.\n- Draw naturally with a stylus or mouse, then pan and zoom across a sparse\n`20,000 x 20,000`\n\ncanvas. - Draw a freehand lasso around confirmed ink to move, resize, or recolor it locally; accepting or cancelling a selection never triggers an AI request.\n- Choose Arcane, Sci-fi, or Research mode to match the kind of problem you are exploring.\n- Save lightweight snapshots locally in your browser. Starting a new canvas can overwrite the current snapshot, save a new copy, or continue without saving; unconfirmed AI drafts are never included.\n\nPenEcho keeps a small local runtime and only allocates `512 x 512`\n\ntiles where ink exists, so the huge logical canvas does not become a huge bitmap.\n\n``` php\nflowchart LR\n  User[\"Handwriting, equations, and sketches\"] --> Canvas[\"Browser canvas<br/>sparse confirmed tiles\"]\n  Canvas --> Atlas[\"Cropped visual atlas<br/>plus geometry\"]\n  Atlas --> Server[\"PenEcho server<br/>validation and prompt\"]\n  Server --> Executor{\"Configured executor\"}\n  Executor --> API[\"API mode<br/>OpenAI-compatible or Anthropic\"]\n  Executor --> Codex[\"Codex CLI mode<br/>local codex exec\"]\n  Executor --> Claude[\"Claude CLI mode<br/>local claude -p\"]\n  API --> Draft[\"Structured editable draft\"]\n  Codex --> Draft\n  Claude --> Draft\n  Draft --> Canvas\n```\n\nThe browser sends only the relevant canvas crop and geometry. The server validates the request, uses the selected executor, and returns a movable draft that stays separate from confirmed ink until you accept it.\n\nYou need [Node.js 18.17+](https://nodejs.org/) and one of the following: an API key, an authenticated [Codex CLI](https://developers.openai.com/codex/cli), or an authenticated [Claude Code CLI](https://code.claude.com/docs/en/overview).\n\n```\nnpm install -g penecho\npenecho configure\npenecho\n```\n\n`penecho configure`\n\nopens the interactive configuration center. Its main menu contains `LLM source`\n\n, `Settings`\n\n, and `Exit`\n\n. Use the arrow keys and Enter to navigate:\n\n`LLM source -> Claude CLI`\n\nselects a detected, recommended, default, or manually entered model and an effort level. Opus 4.8 or newer is recommended; Sonnet and Opus 4.6 can respond but may produce weaker canvas results.`LLM source -> Codex CLI`\n\nselects a model and effort. GPT-5.5 or newer is required for good results,`gpt-5.6-sol`\n\nis recommended, and`xhigh`\n\nis the highest listed Codex effort.`LLM source -> API`\n\nselects the OpenAI-compatible or Anthropic/Claude-compatible request format, then asks for the URL, model, effort, and hidden key. Existing values are offered as defaults and a blank key keeps the saved key.`Settings`\n\ncontrols the unified model timeout, the image format sent to every model executor, request recording and retention, listening interface and port, and initial Auto AI delay. WebP is the default; PNG is also available. The delay can also be changed on the canvas.\n\nEvery LLM page ends with `Test & Save`\n\n, and PenEcho always saves before checking. Codex CLI uses a fast offline check: it verifies the executable and login, then reads `codex debug models --bundled`\n\nto confirm the selected model exists. It does not run inference, attach an image, refresh the online catalog, or consume model tokens. Claude CLI and API configuration still send one small real request to verify the selected endpoint/model settings. Whether a check passes or fails, the configuration remains saved and the UI returns to the parent menu with a clear diagnostic.\n\nThe default configuration is `~/.penecho/config.env`\n\n. API credentials are plaintext in this local file, receive owner-only permissions on POSIX systems, and are never sent to browser code. Protect it like any other credential. If `penecho`\n\nis started before this file exists, it opens the configuration center automatically in an interactive terminal.\n\nUse a different env-style configuration file for a particular launch when needed:\n\n```\npenecho configure --config ./team.env\npenecho --config ./team.env\n```\n\nAn explicit `--config`\n\nfile replaces the default global file for that command. PenEcho does not automatically read a project-directory `.env`\n\nor a package-directory `.env`\n\n.\n\nInstalling the Codex desktop app alone does not guarantee that a `codex`\n\nexecutable is available on the shell `PATH`\n\n. Install and authenticate the CLI separately before selecting Codex:\n\n```\nnpm install -g @openai/codex@latest\nhash -r\ncodex --version\ncodex login status\n```\n\nIf needed, run `codex login`\n\n. Claude CLI mode similarly requires an installed and authenticated Claude Code CLI, normally through `claude auth login`\n\n.\n\nPenEcho uses the selected CLI locally and does not need an API key for that source. Normal startup checks the executable and login without consuming model tokens. Codex `Test & Save`\n\nadditionally verifies the selected model against the installed CLI's bundled catalog without making a model request; Claude `Test & Save`\n\nsends a small real request.\n\nCanvas requests through Codex use `codex exec --json`\n\n. PenEcho returns as soon as Codex emits the final agent message and `turn.completed`\n\n; if the CLI process remains alive afterward, it is terminated and cleaned up in the background instead of delaying the canvas response.\n\nClaude CLI requests use one isolated `claude -p`\n\nturn with tools, agents, MCP, prompt suggestions, session persistence, and other nonessential background traffic disabled. PenEcho sets `MAX_THINKING_TOKENS=0`\n\nfor these latency-sensitive canvas turns so Claude Code does not spend a large hidden extended-thinking budget. When an effort is selected, PenEcho applies both Claude's `--effort`\n\nflag and a per-process settings override so a user-level `CLAUDE_CODE_EFFORT_LEVEL`\n\ncannot silently replace it. PenEcho incrementally validates the stream and returns as soon as Claude emits its successful final `result`\n\n; any attempted tool use aborts the request, while a CLI process that remains alive after the result is terminated and cleaned up in the background.\n\nTransient launch overrides remain available:\n\n```\npenecho doctor --codex\npenecho --codex --model gpt-5.6-sol --effort xhigh\npenecho --claude --model opus --effort max\npenecho --port 4000\n```\n\n`--model`\n\n, `--effort`\n\n, and `--port`\n\napply only to that process and take precedence over the selected configuration file. Omit them to use the saved choice or the underlying CLI default. Other model-specific effort strings are accepted and passed through.\n\nInstall dependencies, expose this checkout's `penecho`\n\nexecutable through npm, configure it, and start it through the same production entry point:\n\n```\nnpm install\nnpm link\npenecho configure\npenecho\n```\n\n`npm link`\n\ncreates the local command link; it does not publish the package. There is no separate build step and local development does not use `npm start`\n\n.\n\nOpen [http://localhost:3888](http://localhost:3888). Other devices on the same trusted LAN can use `http://<this-computer-LAN-IP>:3888`\n\n.\n\nThe following is an illustrative estimate, not an enforced PenEcho token budget. Assuming a request uses `10,000`\n\ninput tokens and `1,000`\n\noutput tokens, the standard short-context API cost would be:\n\n`gpt-5.6-sol`\n\n:`10,000 x $5.00 / 1M + 1,000 x $30.00 / 1M = $0.080`\n\n`gpt-5.6-terra`\n\n:`10,000 x $2.50 / 1M + 1,000 x $15.00 / 1M = $0.040`\n\n`gpt-5.6-luna`\n\n:`10,000 x $1.00 / 1M + 1,000 x $6.00 / 1M = $0.016`\n\nAt those example quantities, that is about 1.6 to 8 cents per request. Actual input, reasoning, and output usage varies by canvas content, model, provider, and retry behavior. Prices can change, so check the [OpenAI API pricing](https://developers.openai.com/api/docs/pricing) page for current rates.\n\nIf you sign in to Codex with ChatGPT, PenEcho uses the Codex usage included with your plan instead of an API key. Included limits vary by plan, and additional usage may require ChatGPT credits. See [Codex pricing](https://learn.chatgpt.com/docs/pricing) for current plans and limits. Claude CLI mode similarly uses the account authenticated by Claude Code; it is distinct from Anthropic API billing.\n\nPenEcho supports model selection independently for API, Codex CLI, and Claude CLI execution. Model behavior still varies. If you find a model-specific issue, please open an issue with the executor, model name, a reproducible canvas example, expected and actual results, and a screenshot with secrets removed.\n\nPenEcho listens on `0.0.0.0:3888`\n\nby default so localhost and trusted-LAN access work immediately. Choose the deployment boundary that matches your executor:\n\n**Codex CLI and Claude CLI modes:** use them only on the local machine or a trusted, directly connected LAN. A valid request starts a local CLI process, so do not expose either mode directly to the public internet or an untrusted reverse proxy. Both work immediately from localhost and LAN addresses without a public-origin setting. PenEcho checks the Host, client network, exact Origin, process-lifetime session cookie, and JSON content type before launching the selected CLI. Each valid new request immediately supersedes the prior request; it never waits in a queue or returns a busy response.**API mode:** local, LAN, proxy, and remote requests are intentionally accepted without PenEcho-level Host or Origin restrictions. If you expose it publicly, place it behind HTTPS, authentication, rate limiting, and request-size controls. Keep the selected configuration file and provider keys private; credentials remain in the Node.js process and are never sent to browser code.\n\nFor either mode, keep debug artifacts and request tracing disabled in production unless you are actively diagnosing a problem, and never publish configuration files, logs, screenshots, or saved requests containing private content. When request recording is enabled in `Settings`\n\n, each valid AI request is stored under `~/.penecho/logs/requests`\n\nby default, including the source `atlas.png`\n\n, the outbound image, credential-redacted request body, raw and parsed responses, fallback details, and final status. The UI also displays this path and configures retention.\n\nThe configuration center writes these settings to `~/.penecho/config.env`\n\n, or to the file selected with `--config`\n\n:\n\n| Setting | Purpose |\n|---|---|\n`AI_PROVIDER` |\nExecutor: `api` , `codex-cli` , or `claude-cli` |\n`AI_API_FORMAT` |\nAPI request format: `openai` (default example) or `anthropic` |\n`AI_API_URL` / `AI_API_KEY` |\nAPI endpoint and credential; used only in API mode |\n`AI_API_MODEL` |\nModel used in API mode |\n`AI_EFFORT` |\nGlobal reasoning effort; known values are `low` , `medium` , `high` , `xhigh` , and `max` , other strings pass through; API defaults to `max` , while an empty CLI value preserves the CLI default |\n`AI_TIMEOUT_SECONDS` |\nUnified timeout for API, Codex CLI, and Claude CLI model attempts; default 180, allowed range 10–600 |\n`PENECHO_AI_IMAGE_FORMAT` |\nImage format sent to API, Codex CLI, and Claude CLI: `webp` (default) or `png` |\n`CODEX_CLI_MODEL` |\nOptional model override for Codex CLI mode |\n`CLAUDE_CLI_MODEL` |\nOptional alias or model-ID override for Claude CLI mode |\n`AUTO_AI_DELAY_SECONDS` |\nInitial delay before automatic recognition; the browser control can override it from 0 to 10 seconds |\n`PENECHO_REQUEST_TRACE` |\nSave local per-request image, outbound request, response, and outcome traces; disabled by default |\n`PENECHO_REQUEST_TRACE_LIMIT` |\nNumber of local request traces retained, default 100 and maximum 1000 |\n`HOST` / `PORT` |\nListening interface and port, default `0.0.0.0:3888` |\n\nFor installed CLI starts, `--model`\n\noverrides the selected executor's model setting and `--effort`\n\noverrides `AI_EFFORT`\n\nfor that process only. Command-line options and process environment variables take precedence over the selected configuration file.\n\nRun the checks before submitting a change:\n\n```\nnpm run check\n```\n\nFor implementation details, see the [architecture notes](/erickong/penecho/blob/main/docs/architecture.md).\n\nPenEcho is still young, with real work left in recognition, visual tools, model support, and pen interaction. Join the [PenEcho Discord](https://discord.gg/3jrPJ3mXdX) for real-time discussion, model testing, and shared canvas workflows. Use [GitHub Discussions](https://github.com/erickong/penecho/discussions) for ideas that should remain searchable, and [GitHub Issues](https://github.com/erickong/penecho/issues) for reproducible bugs and confirmed work.\n\nOpen an issue, propose an idea, or send a pull request. If PenEcho clicks for you, star the repo, share the demo, and help us make it better.\n\nRead [CONTRIBUTING.md](/erickong/penecho/blob/main/CONTRIBUTING.md) to get started.\n\nPenEcho is open source under [GNU AGPL v3.0 only](/erickong/penecho/blob/main/LICENSE). Commercial use is allowed under the AGPL. If you modify PenEcho and provide that version to users over a network, you must offer those users the corresponding source code as required by the license.\n\nAn alternative [commercial license](/erickong/penecho/blob/main/COMMERCIAL-LICENSE.md) is available for proprietary products and hosted services that cannot meet the AGPL requirements. The PenEcho name and logo are governed separately by the [PenEcho trademark policy](/erickong/penecho/blob/main/TRADEMARKS.md).\n\nContributors keep ownership of their work and grant the project the rights needed to offer both AGPL and commercial editions. See the [contributor agreement](/erickong/penecho/blob/main/CONTRIBUTOR-LICENSE-AGREEMENT.md).", "url": "https://wpnews.pro/news/penecho-an-open-source-canvas-with-ai", "canonical_source": "https://github.com/erickong/penecho", "published_at": "2026-07-18 03:51:37+00:00", "updated_at": "2026-07-18 04:21:25.861613+00:00", "lang": "en", "topics": ["ai-tools", "developer-tools"], "entities": ["PenEcho", "OpenAI", "Anthropic", "Codex CLI", "Claude CLI", "Node.js"], "alternates": {"html": "https://wpnews.pro/news/penecho-an-open-source-canvas-with-ai", "markdown": "https://wpnews.pro/news/penecho-an-open-source-canvas-with-ai.md", "text": "https://wpnews.pro/news/penecho-an-open-source-canvas-with-ai.txt", "jsonld": "https://wpnews.pro/news/penecho-an-open-source-canvas-with-ai.jsonld"}}