Skip to main content
Glama
samsebeingener

VisBug MCP Bridge

by samsebeingener
OverviewSchemaRelated ServersScoreDiscussions
JavaScript
Local

Что это

Recorder-only (модель mambari/visbug-mcp): расширение не пишет в файлы проекта. VisBug меняет DOM на странице → bridge сохраняет сырые мутации → вы копируете буфер → Cursor вносит правки в код по контракту.

Было (до v0.13)

Сейчас (v0.26)

auto-apply, Actions v2, undo

Удалено (recorder-only)

«Начать запись» / «Стоп»

Не нужно — live-захват при drag

Только inline top/left

+ layout-delta + visbugSrc / src: + per-file summary

Длинный селектор

Короткий селектор + write-recipes v0.26 (before/after/snap) + auto-stamp vb-*

/visbug-apply

Не нужно — вставка буфера в чат

Related MCP server: cursor-agent-mcp

Архитектура

Chrome (VisBug + расширение)
        │  WebSocket ws://127.0.0.1:4844
        ▼
┌─────────────────┐      ~/.visbug-mcp/projects/<id>/changes.json
│  ws-daemon.js   │ ◄──────────────────────────────►  src/server.js (MCP stdio)
│  (фон)          │                                    └─ опционально в Cursor
└─────────────────┘

  • src/ws-daemon.js — WebSocket на 127.0.0.1:4844. Принимает live-мутации от content-script, дедуплирует, пишет в per-project store.

  • src/server.js — MCP (stdio): get_changes / apply_changes / clear_changes. Запись в файлы не выполняет.

  • extension/ — Chrome MV3: observer на localhost, popup «Скопировать» / «Очистить», красные направляющие с px.

Безопасность

  • WebSocket только 127.0.0.1 — данные не уходят в интернет

  • Store: ~/.visbug-mcp/projects/<projectId>/changes.json на вашем ПК

  • Внешних HTTP-запросов нет

Установка

Полная инструкция: docs/INSTALL.ru.md
В Cursor: /visbug-mcp-start

git clone https://github.com/samsebeingener/visbug-mcp-ru.git
cd visbug-mcp-ru
npm install
npm run setup

npm run setup регистрирует workspace + localhost origin, запускает daemon и копирует в проект:

  • команды /visbug-mcp-start, /visbug-mcp-update;

  • rule .cursor/rules/visbug-buffer-apply.mdc — подсказка агенту при вставке буфера.

Расширения Chrome

  1. VisBug (официальный)

  2. visbug-mcp — chrome://extensions → режим разработчика → Загрузить распакованное → папка extension/ в клоне репо

Демон (если setup не запустил)

Windows:

powershell -ExecutionPolicy Bypass -File scripts/start-ws-daemon.ps1

macOS / Linux:

npm run daemon
# или pm2 start src/ws-daemon.js --name visbug-ws

MCP в Cursor (опционально)

npm run setup добавляет запись в ~/.cursor/mcp.json. Для записи VisBug MCP не обязателен — достаточно popup «Скопировать».

После правок — Reload Window в Cursor.

Обновление

npm run update

git pull, npm install, перезапуск daemon, копирование недостающих команд и rule во все workspace из config (без перезаписи существующих).

Как пользоваться

Рабочий цикл (v0.26)

  1. Запустите сайт на http://localhost:…, откройте в Chrome.

  2. Убедитесь, что origin зарегистрирован (/visbug-mcp-start или npm run setup).

  3. Popup: зелёная точка = daemon online.

  4. Правьте layout в VisBug (красные направляющие с px — в расширении).

  5. Popup → «Скопировать правки» → вставьте в чат Cursor.

  6. Агент правит исходники (см. apply-buffer-contract).

  7. Popup → «Очистить правки» (опционально).

Отдельная команда для apply не нужна.

Как Cursor понимает буфер

Слой

Где

Футер в буфере

Добавляется при «Скопировать» (путь к контракту)

Rule

<workspace>/.cursor/rules/visbug-buffer-apply.mdc (из setup / update)

Контракт

shared/apply-buffer-contract.md

Кратко для агента: контейнер vs ребёнок, фильтр шума VisBug, bake left/top/transform, не копировать left 1:1 в transform.

Несколько проектов

Bridge сопоставляет точный origin с workspace. Пример: localhost:3001 → Next, localhost:3002 → static HTML. Незарегистрированный origin — запись блокируется.

Popup

Индикатор

Значение

🟢 Bridge подключён

Можно править в VisBug

🔴 Daemon не запущен

start-ws-daemon.ps1 или npm run daemon

N правок в буфере

Накопленные мутации

Кнопка

Действие

Скопировать правки

Буфер + футер для Cursor

Очистить правки

Сброс store текущего проекта

MCP-инструменты (опционально)

Инструмент

Назначение

get_changes

Текст буфера (как в popup)

apply_changes

Пометить индексы как применённые в store (после ручного patch в коде)

clear_changes

Очистить буфер

Пример строки в буфере:

[0] section.hero-section … > h1… → стиль: left = -163px (было: не задано)

Техническое поведение

Live-захват + layout-delta (v0.14)

Content-script пишет inline-мутации VisBug. При отпускании drag дополнительно:

[#method-quote] → смещение: Δx=0px Δy=-65px (viewport 1440×900)

Δ — разница getBoundingClientRect() до/после drag; не зависит от того, писал ли VisBug только top без left. Агент: apply-buffer-contract.md.

Auto-stamp (v0.26)

Если у элемента, получившего записанную мутацию, нет ни id, ни data-vb*, content-script сам ставит ему data-visbug-id="vb-<tag>-<NN>" (например vb-div-01) — атрибут вне фильтра обсервера, петли нет. В буфере появляется секция stamps: (vb-div-01 → исходный DOM-path), рецепт идёт на стабильный #vb-div-01 с confidence high и warning stamp-pending. При первом apply агент обязан перенести этот id в исходный HTML (и использовать #vb-* в CSS) — с этого момента цель стабильна навсегда, без ручной разметки. Подробности: §11 apply-buffer-contract.md.

Store (v2)

~/.visbug-mcp/projects/<projectId>/changes.json:

{
  "version": 2,
  "workspace": "/abs/path/to/site",
  "changes": [ … ]
}

Парсер и шум

src/parser.js — дедуп по selector|type|property, фильтр overlay #visbug-mcp-guides-root и UI VisBug. Сырые left/top/transform не переводятся автоматически — bake делает агент по контракту.

Полезные команды

npm run health          # daemon, extension version, config
npm run setup           # первичная настройка + rule в workspace
npm run update          # git pull + sync commands/rule
npm run daemon          # foreground daemon
npm run daemon:watch    # разработка с --watch
npm test                # unit-тесты

Структура проекта

visbug-mcp-ru/
├── src/
│   ├── ws-daemon.js           # WebSocket, буфер
│   ├── server.js              # MCP stdio
│   ├── parser.js              # мутации → changes, формат буфера
│   ├── project-store.js       # per-project store v2
│   └── config.js
├── extension/                 # Chrome: content-script, popup, guides
├── shared/
│   └── apply-buffer-contract.md   # контракт для Cursor-агента
├── prompts/
│   └── buffer-for-cursor.md
├── .cursor/
│   ├── commands/              # visbug-mcp-start, visbug-mcp-update
│   └── rules/                 # visbug-buffer-apply.mdc → копируется в workspace
├── scripts/
│   ├── setup.mjs
│   ├── update.mjs
│   ├── sync-cursor-artifacts.mjs
│   └── start-ws-daemon.ps1
├── docs/
│   └── INSTALL.ru.md
└── test/

Roadmap

Идеи auto-apply, layout-solver — в архиве спецификаций (не в репо). Актуальные планы: точность записи (transition, keyboard, JS-inline) и предсказуемость применения через Cursor.

Что на русском

  • Popup расширения

  • Строки буфера («стиль», «было», «текст»)

  • Описания MCP-инструментов

Лицензия и upstream

Разработка Никита Куликов на базе идей mambari/visbug-mcp.
VisBug — GoogleChromeLabs/ProjectVisBug.

Available Tools

3 tools
apply_changesA

Помечает правки как применённые в буфере (~/.visbug-mcp/changes.json). Файлы проекта не меняет — их пишет auto-apply после «Стоп» или вы через /visbug-apply.

ParametersJSON Schema
NameRequiredDescriptionDefault
idsNoИндексы правок для пометки. Пусто = все.

TDQS

A4/5.0
Behavior3/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations provided, the description must fully disclose behavioral traits. It states that the tool does not modify project files and operates on a buffer file. However, it lacks details on idempotency, error conditions, return values, or prerequisites. The description provides basic safety information but is not comprehensive.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is extremely concise: one sentence for the core purpose and one sentence for an important clarification. Every word adds value, and the structure is front-loaded with the primary action. No redundancy or filler.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given the tool's simplicity (single optional parameter, no output schema, no annotations), the description adequately explains its role in the broader workflow. It clarifies the buffer location and the separation of marking from actual file modification. However, it could be improved by specifying the return value or confirmation behavior.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

The input schema covers the single parameter 'ids' with a description in the schema itself ("Indices of edits to mark. Empty = all."). The tool's description adds no additional meaning beyond what the schema already provides. With 100% schema description coverage, a baseline score of 3 is appropriate.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description explicitly states the tool's function: marking changes as applied in the buffer. It also clarifies what it does not do (modify project files), which distinguishes it from related operations. The sibling tools get_changes and clear_changes have different purposes, so this description effectively differentiates the tool.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines4/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description explains the tool's role in the workflow by noting that project files are written by auto-apply or the manual /visbug-apply command. This provides context on when to use this tool (to mark changes) versus when other mechanisms handle actual file writing. However, it does not explicitly contrast with the sibling tools or state when not to use it.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

clear_changesA

Полностью очищает буфер захваченных правок.

ParametersJSON Schema
NameRequiredDescriptionDefault

No parameters

TDQS

A4/5.0
Behavior3/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

As no annotations are provided, the description carries full burden. It discloses the destructive nature (clears buffer) but omits details like whether changes are permanently lost or if the operation is reversible. Basic transparency but lacks depth.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is a single, efficient sentence that conveys the tool's purpose without extraneous words. It is front-loaded and concise.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given the simplicity of the tool (no parameters, no output schema, no annotations), the description is adequately complete for basic usage. However, it could mention the impact on get_changes or apply_changes for fuller context.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters4/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

With zero parameters, the schema fully covers the parameter space. The description adds no parameter information, but none is needed. The baseline of 4 is appropriate.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the verb 'clears' and the resource 'buffer of captured edits', making the tool's purpose unambiguous. It distinguishes from siblings (get_changes, apply_changes) by focusing on clearing rather than retrieving or applying.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines3/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description implies usage when the agent needs to discard captured changes, but it does not provide explicit guidance on when to use this tool versus alternatives like get_changes or apply_changes. No context on prerequisites or typical scenarios.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

get_changesA

Возвращает визуальные правки, захваченные VisBug на localhost. Для каждой записи: CSS-селектор, свойство, старое и новое значение, HTML-тег, URL страницы.

ParametersJSON Schema
NameRequiredDescriptionDefault
filterNoФильтр по типу: "style" | "attribute" | "text" | "node-added" | "node-removed". Необязательно.

TDQS

A4.2/5.0
Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations are provided, so the description carries full burden. It discloses that data comes from VisBug on localhost and lists all returned fields. While it doesn't mention side effects (none expected for a read), it adds valuable constraints not in structured data.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Two sentences front-load the purpose and list returned fields. Every sentence adds value with no redundancy or waste.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given no output schema, the description adequately explains return format. Parameter is well-documented in schema. Sibling tools are mentioned but not contrasted; however, the overall context is sufficient for a simple retrieval tool.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

The schema already covers the parameter with description (100% coverage). The description does not add extra meaning beyond what the schema provides, so baseline 3 is appropriate.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the tool returns visual changes captured by VisBug on localhost, and lists specific fields (CSS selector, property, old/new value, HTML tag, page URL). This verb+resource+scope is specific and distinguishes it from siblings (apply_changes, clear_changes).

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines4/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description implies usage for retrieving visual changes from localhost. It doesn't explicitly state when not to use or mention alternatives, but the context is clear enough for basic selection.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

Tool Schema Changelog

Recent tool additions, removals, and schema changes observed during successful MCP inspections. Dates show when Glama detected each change.

  1. 3 tool updatesv0.6.15
    • First observedapply_changes
    • First observedclear_changes
    • First observedget_changes
Install Server
RayrunBuild, deploy, and operate MCP servers without becoming an infrastructure team.ray.runAd

TDQS

A4.3/5.0
Disambiguation5/5

Each tool has a clearly distinct purpose: get_changes retrieves captured changes, apply_changes marks them as applied, and clear_changes empties the buffer. There is no overlap or ambiguity between them.

Naming Consistency5/5

All tool names follow a consistent verb_noun pattern with underscores: get_changes, apply_changes, clear_changes. The verbs are imperative and the noun is uniform, providing a predictable and clear naming scheme.

Tool Count5/5

With only 3 tools, the set is perfectly scoped for managing a single buffer of visual changes. Each tool serves a necessary and distinct function, and no tool feels extraneous or missing for this focused purpose.

Completeness4/5

The tool set covers the core operations for managing the changes buffer: reading, marking as applied, and clearing. While there is no tool to revert individual changes or directly apply them to files, those functions are intentionally handled externally, making the set complete for its defined scope.

Maintenance

ActivitySlowing
ResponsivenessNo issues

Resources

Unclaimed servers have limited discoverability.

Looking for Admin?

If you are the server author, to access and configure the admin panel.

Related MCP Connectors

Related MCP Servers

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/samsebeingener/visbug-mcp-ru'

If you have feedback or need assistance with the MCP directory API, please join our Discord server