guddion-web

Local, click-to-comment visual review for HTML you're still building. Claude Code publishes a block (a header, a section, a component) to a throwaway 127.0.0.1 URL; you open it in your own browser, click directly on the element you want changed, and leave a comment. Claude reads it back through MCP — anchored by a screenshot of that exact element, so the feedback survives edits even if the page's structure shifts around it.

Install

npm install -g guddion-web
npx playwright install chromium

Configure

Sign up at mcp.guddion.ru, get your token, and set it:

cp .env.example .env
# edit .env: GUDDION_TOKEN=...

The review mechanism itself (server, screenshots, comment storage) runs entirely on your machine and is free — the token only links this install to your guddion.ru account for future features like cross-machine comment sync.

Register with Claude Code

Add to your project's .mcp.json:

{
  "mcpServers": {
    "guddion-web": {
      "command": "npx",
      "args": ["guddion-web"],
      "env": {
        "GUDDION_TOKEN": "your-token-from-mcp-guddion-ru"
      }
    }
  }
}

Tools

• open_for_review(target, port?) — starts (or reuses) a local review proxy for a target and returns its URL for the human to open in a browser. Target can be:

  • A running dev-server URL (http://localhost:5173)
  • A project directory (a Node dev server is launched automatically via npm/yarn/pnpm/bun, detected from the project)
  • A single HTML file

  The optional port parameter can be used to specify which port the review proxy should run on; if omitted, an available port is auto-detected.

• list_comments(filePath, includeResolved?) — pending (or all) comments, each with a screenshot path pointing at the exact element discussed.

• resolve_comment(filePath, commentId) — marks a comment resolved.

• discard_scaffold_request(target, requestId) — deletes a section-library scaffold request outright (compose or swap) instead of applying it, for a submission the person changed their mind about. Unlike mark_scaffold_applied, which only hides it from the default listing, this removes it from the store entirely.

• get_status(target?) — reports every still-alive review/constructor server across all processes (so a fresh session can tell one is already running for a target instead of guessing or starting a duplicate), a draft vs. placeholder summary of the template library, and, if target is given, how many scaffold requests are pending for it.

Comments and screenshots live in .guddion-web/ next to the reviewed file. Server discovery (get_status) and the token-verification cache live in ~/.guddion-web/ (servers.json, auth-cache.json) since they aren't tied to a single reviewed file.

Using it as a library

import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';
import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';
import { registerCoreTools } from 'guddion-web';

const server = new McpServer({ name: 'my-extended-agent', version: '0.1.0' });
registerCoreTools(server);

// register your own additional tools on the same `server` here

await server.connect(new StdioServerTransport());