CodePenMCP

CodePenMCP is a Model Context Protocol server that gives AI agents first-class access to the modern CodePen editor. Rather than relying on Playwright or remote-control browser scripting, it ships with a purpose-built Chrome extension that runs on CodePen pages and operates the editor DOM directly. The MCP server speaks stdio to its client, brokers commands through a local SignalR bridge on 127.0.0.1:3456, and routes them to whichever CodePen tab the agent is targeting.

Mirror mode beats the 3-file limit

CodePen's free tier caps each pen at three files (HTML, CSS, JS). Mirror mode treats a local folder as the source of truth and concatenates multiple files into the appropriate single pane on every sync — so you can develop against a real multi-file project on disk and still ship it to a free-account pen without paying for Pro. The watch mode keeps the pen in step with on-disk edits in real time, including VS Code's atomic-save shuffle that breaks naïve file watchers on Windows.

Highlights

• ~70 MCP tools spanning pen CRUD, file-aware editing, assets, blocks, templates, privacy and collaborator settings, comments, deployment, screenshots, and console capture.
• Chrome extension bridge, not headless automation. A custom MV3 extension runs on CodePen pages and drives the editor directly — no Playwright session, no flaky DOM scraping, no separate browser process.
• Classic and Project Pens. Works with both /pen/<id> and modern /editor/<user>/pen/<uuid>, including a page-world chrome.scripting round-trip to read and write CodeMirror 6 instances that aren't visible from the content script's isolated world.
• Local folder mirror. Map HTML/CSS/JS files on disk to a pen, with one-shot push/pull and continuous watch mode that survives VS Code's atomic save behavior on Windows.
• Proxy reuse. If another compatible bridge is already on port 3456, the server transparently piggybacks on it instead of failing.
• Distribution. Published as an npm package and a packaged Chrome extension zip via a tagged GitHub Actions release flow.

Tech stack

• TypeScript + Node.js
• Model Context Protocol SDK (stdio transport)
• Chrome MV3 extension (content script + page-world injection)
• SignalR for the local server ↔ extension bridge on 127.0.0.1:3456