claude-live-feedback-plugin (Prototype!)
Goal: Smoother Iterative Remote Review with Claude
This plugin lets you work iteratively and remotely with Claude on reviewing Markdown documents, interactive mockups, and dev server previews of your live web app.
Claude gives you a secure link to the doc, mockup or dev server you're working together on (via Tailscale if you're not on local network).
And then it listens to comments (via channels) and can immediately address your feedback live. Meanwhile you can keep reading (or with markdown, you can also edit directly yourself at the same time as Claude).
This is a companion plugin to the ai-project-support project, which makes it easier to work with a team of agents locally or remotely, with a team lead agent, with all agents backed by git repos and running Claude Code sessions.
Before This Plugin
Before this plugin existed, if I was working remotely (which I often do while funemployed!), I couldn't read access any development artifacts to give feedback.
Sometimes, I made do working with Claude remotely using Notion pages, but Notion is pretty heavyweight and clunky for Claude to interact with (Claude regularly struggles with the size of the API and the page structure)
Alternatives
If you didn't need the full power of synchronous, live editing and comments going directly to Claude, I probably could have mounted my development folders in Dropbox (or other cloud fileshare) and read them remotely.
Claude Design is also a fun prototype, but I've found that for the projects I'm working on now, Claude Design performs worse than using Claude Code Opus 4.7 in repo, with the ability to look at the web app running with actual data in Chrome. And iterating there. Instead of iterating on mockups and having one more level of indirection and trying to manage context transfer between disjoint tools.
What's in the box
- Markdown review — a browser-based WYSIWYG editor backed by a file on disk. Open
/review/<docId>?as=<name> from any device on your Tailnet or LAN. Comments anchor to text ranges and survive concurrent edits via CRDT. Bidirectional disk sync keeps your repo's .md in lockstep with the live editor.
- UX / mockup widget — one
<script> tag (web component, shadow-DOM isolated) drops comment threads onto any HTML page. Anchors include page URL + optional view state so one docId can span a multi-page site or SPA.
- Agent tool surface — an MCP server the plugin installs into Claude Code. Agent can
get_doc, find_and_replace, rewrite_thread_region, insert_blocks_after_thread, seed_doc, attach_file, and more.
- Claude Code channel — thread events (
thread.created / thread.replied / thread.resolved / thread.reopened) arrive in the agent's session as <channel source="live-feedback" ...> messages. The agent reacts the same way it would to any peer ping.
Architecture
flowchart LR
subgraph Reviewer["Reviewer (any device on your network)"]
Browser["Browser: Tiptap editor<br/>OR widget on a mockup"]
end
subgraph Host["Host machine"]
Server["HTTP + WebSocket server<br/>(Bun)"]
Yjs["Yjs rooms<br/>(CRDT state)"]
Disk[(.md files)]
Persist[(Yjs updates<br/>on disk)]
end
subgraph CC["Claude Code session"]
Agent["Claude agent"]
MCP["live-feedback-mcp<br/>(stdio)"]
end
Browser <-->|"WebSocket<br/>(y-protocol sync)"| Yjs
Server --- Yjs
Yjs <-->|"bidirectional sync<br/>+ debounced"| Disk
Yjs --> Persist
Server -->|"SSE<br/>thread events"| MCP
MCP -->|"notifications/claude/channel"| Agent
Agent -->|"MCP tool calls<br/>(edit, reply, resolve)"| MCP
MCP -->|"REST"| Server
Yjs is the source of truth at runtime. Disk is authoritative at rest: every prose change flushes to the .md file within ~1 second, and external edits to that file (VS Code, git pull, another agent) flow back into the live doc within ~1 second via fs.watch. Claude sees comments as channel events pushed via the MCP's notifications/claude/channel capability.
Install
One-time setup (on the host machine that'll run the review server)
git clone https://github.com/fryanpan/claude-live-feedback-plugin.git
cd claude-live-feedback-plugin
bun install
bun run bootstrap # wires up npm link, adds marketplace, installs plugin at user scope
That script does:
fryanpan
fryanpan
