Browser Feedback MCP
Allows exporting collected browser feedback as GitHub issues, enabling users to create pre-filled issues directly from the feedback widget.
Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@Browser Feedback MCPLet me show you a bug on the checkout page"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
Browser Feedback MCP for Claude Code
A Model Context Protocol (MCP) server that enables visual browser feedback collection directly into Claude Code. Users can point at elements in their browser and send annotated feedback that Claude can act on immediately.
How It Works
┌─────────────────────────────────────────────────────────────────┐
│ Your Web App (localhost:3000) │
│ │
│ [Widget delivered by browser extension] │
│ │
│ ┌──────────────────┐ │
│ Your App UI │ Add annotation │ │
│ └──────────────────┘ │
└─────────────────────────────────────────────────────────────────┘
│
WebSocket
▼
┌─────────────────────────────────────────────────────────────────┐
│ browser-feedback-mcp server (localhost:9877) │
└─────────────────────────────────────────────────────────────────┘
│
MCP Protocol
▼
┌─────────────────────────────────────────────────────────────────┐
│ Claude Code │
│ │
│ "Let me annotate" → installs widget → waits → receives feedback│
└─────────────────────────────────────────────────────────────────┘Related MCP server: claude-annotate
Installation
1. Install the MCP Server
# Clone the repository
git clone https://github.com/itk-dev/mcp-claude-code-browser-feedback.git
cd mcp-claude-code-browser-feedback
# Install dependencies
npm install2. Add to Claude Code
claude mcp add --scope user browser-feedback node /path/to/mcp-claude-code-browser-feedback/src/server.jsOr add manually to your Claude Code MCP configuration:
{
"mcpServers": {
"browser-feedback": {
"command": "node",
"args": ["/path/to/mcp-claude-code-browser-feedback/src/server.js"],
"env": {
"FEEDBACK_PORT": "9877"
}
}
}
}3. Install the Browser Extension
The extension delivers the widget to any tab with a single toggle — no changes to your project's files. Ask Claude to run the setup_extension tool, which opens the extension folder and shows instructions, or install manually:
Chrome
Navigate to
chrome://extensionsEnable Developer Mode (toggle in top right)
Click Load unpacked
Select the
extension/folder from this repository
Firefox
Navigate to
about:debugging#/runtime/this-firefoxClick Load Temporary Add-on...
Select
extension/manifest.jsonfrom this repository
Usage
Basic Workflow
Turn the widget on for your app's tab via the extension:
Click the extension icon in your browser toolbar
Toggle the widget ON for the current tab — the "Add annotation" button appears without any file changes
Toggle OFF to cleanly remove the widget
The extension connects to the MCP server at http://localhost:9877 by default (configurable in the popup) and auto-matches the tab to your Claude Code session by project URL.
Then tell Claude you want to show it something:
You: There's a bug with the checkout button, let me show you
Claude: [Calls: wait_for_browser_feedback]
Click "Add annotation" in your browser, then click on the
problematic element.
--- You use the browser widget to select the button ---
Claude: I received your feedback! I can see:
📸 Screenshot captured
🎯 Element: <button class="checkout-btn" disabled>
📝 Your description: "Button stays disabled even with items in cart"
🔴 Console Error: "TypeError: Cannot read property 'items' of null"
Let me look at the checkout code and fix this...Multiple Annotations
You can submit multiple feedback items at once:
You: I have several issues to show you
Claude: [Calls: wait_for_multiple_feedback]
Submit all your annotations, then click "Done" when finished.
--- You submit 3 feedback items, then click Done ---
Claude: I received 3 feedback items. Let me address each one...Offline Export
The widget works without a server connection. When offline, feedback is stored locally and can be exported:
Export Markdown - Click "Pending" to open the queue, then "Export Markdown" to download a
.mdfileCreate GitHub Issue - Click "Create GitHub Issue" to open a pre-filled issue in your browser (you'll be prompted for the repository on first use, stored in localStorage)
Available MCP Tools
Tool | Description |
| Help install the browser extension (opens folder + instructions) |
| Block until user submits single feedback |
| Wait for multiple feedback items (user clicks Done when finished) |
| Get any feedback that's been submitted |
| Preview pending feedback summaries without consuming them |
| Delete a specific pending feedback item by ID |
| Check if browser clients are connected |
| Prompt the user to annotate something specific |
| Open project URL in default browser (auto-detects from config files) |
| Deprecated — auto-inject the widget script into your app's HTML |
| Deprecated — remove the injected widget script |
| Deprecated — get the script tag for manual installation |
Script Installation (deprecated)
Deprecated: Script installation modifies your project's HTML, which produces git noise and risks accidental commits. Use the browser extension instead. This path is kept only for environments where installing a browser extension is genuinely blocked, and will be removed in a future major release (#48).
Add this script tag to your HTML:
<script src="http://localhost:9877/widget.js"></script>The install_widget / uninstall_widget tools still automate injecting and removing the tag (with hostname gating via dev_only / allowed_hostnames and auto-detection of common entry points like public/index.html), and get_widget_snippet returns the tag with your session ID.
Widget Features
Draggable dialog - Move the feedback panel anywhere on screen
Minimizable - Collapse the panel to just the header bar
Collapsible element details - Technical info hidden by default
Screenshot capture - Automatic viewport capture using html2canvas (bundled)
Console log capture - Includes recent console messages
Multi-feedback mode - Submit multiple annotations before sending to Claude
Shadow DOM isolation - Widget styles are isolated from host page CSS
Offline mode - Annotate elements even without a server connection; feedback is stored locally
Export to Markdown - Download pending feedback as a structured Markdown file
Export to GitHub Issue - Open a pre-filled GitHub issue directly from the widget
Configuration
Environment Variables
Variable | Default | Description |
|
| Port for HTTP/WebSocket server |
Screenshot Capture
The widget automatically captures viewport screenshots using html2canvas, which is bundled with the MCP server and loaded on demand. No extra setup is needed.
Troubleshooting
Widget shows "disconnected" (gray button)
Make sure the MCP server is running (check with
/mcpin Claude Code)Check that the port (9877) is not in use by another process
Try restarting Claude Code
Port already in use
The server handles this gracefully - the MCP tools will still work, but you'll need to free the port for the browser widget:
# Find and kill the process using port 9877
lsof -i :9877
kill <PID>Or use a different port:
FEEDBACK_PORT=9878 node src/server.jsNo feedback received
Check browser console for WebSocket errors
Ensure the widget script loaded correctly
Verify the MCP server logs for connection info
Security Notes
The widget only connects to
localhostNo data is sent to external servers
All communication stays on your machine
Note: The HTTP/WebSocket server listens on all interfaces (
0.0.0.0) by default. If you need to restrict this, use a firewall or bind to a specific interface via a reverse proxy.
Development
npm test # Unit tests (vitest)
npm run test:e2e # Widget end-to-end test (requires a Playwright Chromium)The e2e test drives the widget in a headless browser to cover annotation-mode
behavior the unit suite can't reach (iframe selection, Escape handling,
shadow DOM focus). It looks for a Chromium in the Playwright browser cache;
run npx playwright install chromium once, or point PLAYWRIGHT_CHROMIUM
at a browser executable.
License
MIT
Available Tools
12 toolsdelete_pending_feedbackA
Delete a specific pending feedback item by ID. Use this when a user wants to remove feedback they submitted by mistake or that is no longer relevant.
| Name | Required | Description | Default |
|---|---|---|---|
| id | Yes | The ID of the feedback item to delete |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the full behavioral burden for a destructive mutation. It never states that deletion is permanent/irreversible, whether confirmation is required, what happens on an invalid or already-processed ID, or any permission requirements — only the implicit 'pending' scope survives.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Two sentences, zero waste: the action and subject come first, and the usage cue follows. Nothing is repeated or padded.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a single-parameter tool with no output schema, the definition is functionally sufficient to invoke correctly. However, given zero annotation coverage on a destructive operation, it should say more about irreversibility or confirmation before being considered complete.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 100% for the single required id parameter, so the schema already documents it fully. The phrase 'by ID' in the description adds no format, sourcing, or validation detail beyond what the schema provides.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
States a concrete verb (delete) plus a specific resource (a pending feedback item by ID), which cleanly separates it from the get/preview/wait siblings. It stops short of explicitly naming an alternative, so it does not reach the top of the scale.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
Gives clear triggering conditions: user submitted feedback by mistake or it is no longer relevant. It offers no exclusions or preferred alternatives (e.g., when to edit vs. delete), but the intended context is unambiguous.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
get_connection_statusB
Check if any browser clients are connected to the feedback server.
| Name | Required | Description | Default |
|---|---|---|---|
No parameters | |||
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the full burden. The verb 'Check' implies a non-mutating read, and the scope ('any browser clients ... connected to the feedback server') is stated, but it never discloses the return shape (boolean, client count, or list) despite no output schema existing. Adequate but incomplete for a tool with zero annotation coverage.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
A single front-loaded sentence with no filler. Every word earns its place, and the subject of the check is immediately clear.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a trivial 0-param, no-output-schema tool this is close to sufficient, but with no annotations and no output schema the description should at least indicate what 'connected' returns so the agent knows how to interpret the response. The purpose is covered; the result contract is not.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The tool takes zero parameters, so there are no parameter semantics to explain; the baseline for a 0-param tool is 4. The description correctly implies the call is argument-free.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
States a specific verb and resource: 'Check if any browser clients are connected to the feedback server.' An agent can tell this is a connectivity probe rather than an action tool. It does not explicitly contrast itself with the closely related sibling wait_for_browser_feedback, which is the main gap.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
No when-to-use guidance is given. The description does not say whether this is a preflight check before wait_for_browser_feedback, whether it polls, or how it relates to the other 11 siblings. Usage must be inferred entirely from the name.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
get_pending_feedbackA
Get all pending feedback that has been submitted. Use this to collect multiple annotations at once - user can submit several feedback items, then you call this to get them all. Returns an array of feedback items. After receiving, analyze ALL items and take action on each.
| Name | Required | Description | Default |
|---|---|---|---|
| clear | No | Whether to clear the pending feedback after retrieving (default: true) |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the full disclosure burden. It usefully notes the return is an array and that it is a non-blocking 'get', but it omits the significant state-mutating side effect that feedback is cleared by default (the 'clear' default of true).
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Four short sentences, front-loaded with the purpose and followed by usage, return shape, and next action. Each broadly earns its place, though the usage sentence slightly overlaps the purpose statement.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
With no output schema, the description correctly describes the return ('an array of feedback items') and the expected follow-up action. It remains incomplete on the clearing side effect and on how this differs from the near-identical preview sibling.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Only one parameter exists and the schema documents it at 100% coverage, so the baseline of 3 applies. The description adds no information about the 'clear' flag's default behavior or its consequences beyond what the schema already states.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
States a specific verb and resource ('Get all pending feedback that has been submitted') and clarifies the batch-collection intent. However, it never differentiates itself from the very similar sibling 'preview_pending_feedback' or 'wait_for_multiple_feedback', leaving an agent to infer which one to pick.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
Gives a concrete triggering scenario ('user can submit several feedback items, then you call this to get them all') and a post-call instruction ('analyze ALL items and take action on each'). It lacks any when-not guidance or explicit naming of alternatives like preview_pending_feedback or delete_pending_feedback.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
get_widget_snippetA
Deprecated — prefer the browser extension (setup_extension). Get the HTML snippet to add to a web app for browser feedback collection.
| Name | Required | Description | Default |
|---|---|---|---|
No parameters | |||
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description carries the full burden, and it discloses the most important behavioral trait: deprecation and the preferred successor. It does not describe auth needs, side effects, or output format beyond 'HTML snippet', which keeps it short of a 5.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Two clauses with zero waste, and the deprecation warning is front-loaded before the functional description so the agent sees the routing signal first.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a no-param, no-output-schema helper, the description supplies everything needed: what it returns (an HTML snippet), why (browser feedback collection), and the deprecation path. Nothing required to invoke it correctly is missing.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The tool takes zero parameters, so there is nothing for the description to disambiguate; the schema is trivially complete. Baseline 4 applies for a no-parameter tool.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
States a specific verb and resource ('Get the HTML snippet to add to a web app for browser feedback collection'), which lets an agent distinguish it from install_widget and the other feedback siblings without opening a schema.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
Explicitly labels the tool deprecated and names the replacement (setup_extension), giving the agent a clear routing decision. The condition that selects the alternative is stated rather than inferred.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
install_widgetA
Deprecated — prefer the browser extension (setup_extension). Automatically install the feedback widget into a web application by injecting the script tag into an HTML file. Supports auto-detection of common entry points (index.html, etc.) or a specific file path.
| Name | Required | Description | Default |
|---|---|---|---|
| dev_only | No | If true, wraps the script in a hostname check so it only loads in development. Defaults to true. | |
| file_path | No | Path to the HTML file to inject the widget into. If not provided, will attempt to auto-detect common entry points in the current directory. | |
| project_dir | No | Project directory to search for HTML files. Defaults to current working directory. | |
| allowed_hostnames | No | List of hostnames or patterns allowed when dev_only is true. Supports exact matches (e.g., 'localhost') and wildcard patterns where '*' matches any characters including dots (e.g., '*.local.itkdev.dk' matches 'app.local.itkdev.dk', '*.local.*' matches 'app.local.example.dk'). Defaults to common local dev patterns: localhost, 127.0.0.1, *.local, *.local.*, *.test, *.dev, *.ddev.site |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the full behavioral burden. It does disclose the mutation mechanism (editing an HTML file) and the deprecation status, which is real value, but it says nothing about idempotency (what happens if the widget is already installed), whether the edit is reversible, error behavior when no entry point is found, or permission requirements expected of a file-writing tool.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Three sentences, front-loaded with the most decision-relevant fact (deprecation) before purpose and behavior. No filler, though the auto-detection clause slightly restates what the file_path schema already says.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
With no annotations and no output schema, the description must stand alone for a file-mutating tool. It covers purpose, alternative, and targeting, but omits failure modes, idempotency, and confirmation of what state results after injection — gaps an agent would want before invoking a write operation.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, including the dev_only hostname wrapping and the wildcard semantics of allowed_hostnames, so the schema already does the heavy lifting. The description only echoes the file_path auto-detection behavior, adding little beyond structured data; 3 is the appropriate baseline.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
States a specific verb+resource (install the feedback widget) and the concrete mechanism (injecting the script tag into an HTML file), plus the auto-detect vs. explicit-path behavior. It also names the sibling it is superseded by (setup_extension), so an agent can place it against uninstall_widget and setup_extension without opening the schema.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
"Deprecated — prefer the browser extension (setup_extension)" is an explicit when-not-to-use plus a named alternative, front-loaded in the first clause. This is exactly the routing guidance an agent needs before selecting this tool.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
open_in_browserB
Open the project in the default browser. Automatically detects the project URL from common configuration files (.env, docker-compose.yml, etc.) or accepts an explicit URL. Can also just return the detected URL without opening.
| Name | Required | Description | Default |
|---|---|---|---|
| url | No | Explicit URL to open. If not provided, will attempt to detect from project configuration. | |
| open | No | If true, open the URL in the default browser. Defaults to false (just returns the URL). | |
| project_dir | No | Project directory to search for configuration files. Defaults to current working directory. |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations, so the description carries the full burden. It discloses the dual mode (open vs. return), URL auto-detection from config files, and default behaviors, but omits side effects (e.g., launching a browser), permissions, or error handling when detection fails.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Three efficient sentences front-load the main action, detection mechanism, and secondary mode. No filler, though the last sentence could be slightly tighter.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a 3-param tool with 100% schema coverage and no annotations, the description is adequate but misses behavioral details (browser launch side effects, detection failure handling) and lacks output-format info even though no output schema exists. It is minimally viable.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, so the schema already documents all three parameters. The description restates the auto-detection and explicit-URL behavior but adds no syntax or format details beyond the schema, aligning with the baseline 3.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description states a specific verb (open) and resource (project URL in default browser), plus a secondary mode (return URL only). It does not differentiate itself from siblings like wait_for_browser_feedback or request_annotation, but the verb+resource is clear.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
Implicit usage: use when you need to preview a local project or detect its URL. No explicit when-to-use vs. alternatives or exclusion conditions, and no mention of siblings, leaving context to inference.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
preview_pending_feedbackA
Preview all pending feedback without consuming it. Use this to see what feedback has been submitted without clearing the queue. Returns summaries of pending items (id, timestamp, description, selector). The browser widget also shows this information.
| Name | Required | Description | Default |
|---|---|---|---|
No parameters | |||
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description carries the full behavioral burden, and it delivers the critical trait: the operation is non-destructive and does not clear the queue. It also lists the returned fields, though it omits whether permissions or widget installation are prerequisites.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Three tight sentences, front-loaded with the non-consuming behavior that matters most. The final sentence about the browser widget is mildly tangential but not wasteful.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a no-parameter tool with no output schema, the description supplies the return fields (id, timestamp, description, selector), which is exactly what's needed. It only lacks explicit prerequisites or comparison to sibling peek tools.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The tool takes zero parameters, so the baseline is 4. The description correctly implies no input is needed and instead describes the output fields, which is appropriate.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
States a specific verb and resource ('Preview all pending feedback') with a key qualifier ('without consuming it') that distinguishes it from the sibling get_pending_feedback. The distinction is implied rather than naming the sibling explicitly, so it falls just short of a 5.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
Gives a clear condition for use ('to see what feedback has been submitted without clearing the queue'), which implicitly routes the agent away from the consuming variant. It never names get_pending_feedback or delete_pending_feedback directly, so selection depends on the agent inferring the contrast.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
request_annotationA
Send a prompt to connected browsers asking user to annotate something specific. After calling this, use wait_for_browser_feedback ONCE to receive the response. Do not loop - act on the feedback received.
| Name | Required | Description | Default |
|---|---|---|---|
| message | Yes | Message to show to the user explaining what to annotate |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the full burden. It discloses the async nature by directing the agent to wait for feedback, but doesn't explain whether the call blocks, how long it takes, or what happens if no browsers are connected. The workflow warning is useful but incomplete.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Three short sentences with zero waste. The core action is front-loaded, and the follow-up instruction is clear and actionable.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a one-param initiation tool with no output schema, the description provides adequate context about the workflow. It could mention connection requirements or error handling, but it covers the essential call-and-wait pattern.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, so the schema already documents the single 'message' parameter. The description doesn't add syntax or format details 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.
Does the description clearly state what the tool does and how it differs from similar tools?
States a specific verb (send) and resource (prompt to connected browsers asking user to annotate). Clearly distinguishes from siblings like wait_for_browser_feedback by describing the initiation step rather than the waiting step.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
Provides clear workflow guidance: after calling this, use wait_for_browser_feedback ONCE, and do not loop. This effectively tells the agent when and how to use the follow-up tool, though it doesn't explicitly state prerequisites like whether a browser must be connected first.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
setup_extensionA
Help the user install the browser extension for widget injection without modifying project files. Opens the extension directory and provides step-by-step instructions for Chrome and Firefox.
| Name | Required | Description | Default |
|---|---|---|---|
No parameters | |||
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description carries the burden and does disclose two useful traits: it opens the extension directory and it does not modify project files, plus it targets both Chrome and Firefox. However, it doesn't clarify whether it launches a browser process, blocks for user action, or what output the agent gets, leaving meaningful side-effect ambiguity.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Two tight sentences with no filler, and the core purpose is front-loaded before the behavioral detail. The only redundancy is restating 'instructions' and 'opens the directory,' which is minor.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a zero-parameter, no-output-schema setup tool, the description gives enough to understand what it does and its non-invasive nature, though the side-effect profile (directory opening, waiting on user) could be more explicit given no annotations exist.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The schema has zero parameters and full description coverage, so there is nothing for the description to compensate for; the baseline of 4 applies.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description names a specific verb (install) and resource (the browser extension for widget injection), which clearly distinguishes it from siblings like install_widget and get_widget_snippet. It could be sharper about the explicit contrast with install_widget, but the resource difference is unmistakable.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The phrase 'without modifying project files' implies a usage constraint and context (a non-invasive setup path), but there is no explicit when-to-use or when-not-to-use guidance and no mention of alternatives among the many sibling tools.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
uninstall_widgetA
Deprecated — prefer the browser extension (setup_extension). Remove the feedback widget from a web application by removing the injected script tag.
| Name | Required | Description | Default |
|---|---|---|---|
| file_path | No | Path to the HTML file to remove the widget from. If not provided, will search for files containing the widget script. | |
| project_dir | No | Project directory to search. Defaults to current working directory. |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the full behavioral burden. It discloses the mechanism (removing an injected script tag) but says nothing about whether files are mutated in place, whether changes are reversible or backed up, or what permissions/access the removal requires — all material for an uninstall-style operation.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Two short clauses with zero filler; the deprecation notice and alternative are front-loaded, followed by the concrete action and mechanism. Nothing is wasted.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
With no annotations and no output schema, the description must compensate, and it covers purpose, deprecation routing, and mechanism. However, for a mutating tool that edits HTML files it omits any safety/behavioral context (reversibility, what happens on failure, return indication), leaving a real gap.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100% and both parameters (file_path, project_dir) are documented in the schema, including the search-fallback behavior when file_path is omitted. The description adds no parameter-level meaning, so the baseline of 3 is appropriate.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
States a specific verb and resource ('Remove the feedback widget from a web application') and adds the mechanism ('by removing the injected script tag'), which immediately separates it from the install_widget sibling. It also flags the tool's status and the preferred alternative, so an agent can identify it without opening the schema.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
Explicitly states when NOT to use it ('Deprecated — prefer the browser extension (setup_extension)'), naming the alternative tool by name. It does not elaborate on the narrow residual case where uninstalling the script tag is still the right move, so it falls just short of full when/when-not coverage.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
wait_for_browser_feedbackA
Wait for feedback from the browser widget. Blocks until user submits feedback. Returns screenshot, element info, console logs, and description. IMPORTANT: After receiving feedback, DO NOT call this tool again. Instead, analyze the feedback and take action (fix bugs, make changes, etc.). Only call this tool again if the user explicitly asks for more feedback or you need to verify your fix worked.
| Name | Required | Description | Default |
|---|---|---|---|
| timeout_seconds | No | Maximum time to wait for feedback (default: 300 seconds / 5 minutes) |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the full burden, and it does disclose the key trait: this is a blocking call that waits for a user submission. It also lists the returned payload (screenshot, element info, console logs, description). It omits what happens on timeout expiry, which is a meaningful gap for a blocking tool.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Front-loads the blocking behavior and return payload, then flags the critical usage warning. Slightly long, but every sentence carries operational value and nothing is repeated from the schema.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
With no output schema and no annotations, the description must cover both behavior and returns, and it does so well. The only missing piece an agent might need is timeout-expiry behavior, which is not addressed.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 100% and the single timeout_seconds parameter is fully documented inline with its default. The description adds no parameter-level detail beyond the schema, so the baseline of 3 is appropriate.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
States a specific verb+resource (wait for browser widget feedback) and enumerates what it returns. It is clearly distinguishable from siblings like get_pending_feedback and wait_for_multiple_feedback, which do not block for a new submission.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
Gives explicit when-and-when-not guidance: after receiving feedback, do NOT re-call; instead act on it, and only re-call if the user asks or you need to verify a fix. This directly routes the agent away from a common misuse.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
wait_for_multiple_feedbackA
Wait for the user to submit multiple feedback items. Shows a prompt in the browser telling user to submit all their annotations, then click 'Done'. Returns array of all feedback. Use this when user wants to report multiple issues at once.
| Name | Required | Description | Default |
|---|---|---|---|
| message | No | Message to show user (default: 'Submit all your feedback, then click Done when finished') | |
| timeout_seconds | No | Maximum time to wait (default: 300 seconds / 5 minutes) |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description carries the full burden, and it does well: it discloses that a browser prompt appears, that the user must submit annotations and click 'Done', and that the call blocks until then. It omits what happens on timeout or if the user never responds, which is the main residual gap for a blocking tool.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Three sentences with no filler: behavior first, return value second, usage condition last. Slightly more could be trimmed, but every sentence carries information.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
There is no output schema, and the description compensates by stating that it returns an array of all feedback. Parameter defaults are covered by the schema. The only missing piece is failure/timeout behavior for a long-blocking call.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, so both parameters (message, timeout_seconds) and their defaults are already fully documented in the schema. The description adds no syntax or format detail beyond that, so the baseline 3 applies.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
States a specific verb+resource ('Wait for the user to submit multiple feedback items') and describes the user-facing mechanism and return value. It never names the closest sibling wait_for_browser_feedback, so the agent must infer the single-vs-multiple distinction from the word 'multiple' alone.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
Gives a clear triggering condition: 'Use this when user wants to report multiple issues at once.' That is enough context to select it over request_annotation or wait_for_browser_feedback in most cases, but it stops short of naming those alternatives or stating 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.
Tool Schema Changelog
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
12 tool updates
v0.8.0- First observed
delete_pending_feedback - First observed
get_connection_status - First observed
get_pending_feedback - First observed
get_widget_snippet - First observed
install_widget - First observed
open_in_browser - First observed
preview_pending_feedback - First observed
request_annotation - First observed
setup_extension - First observed
uninstall_widget - First observed
wait_for_browser_feedback - First observed
wait_for_multiple_feedback
TDQS
Scored across 12 tools
The retrieval tools overlap heavily: wait_for_browser_feedback, wait_for_multiple_feedback, get_pending_feedback, and preview_pending_feedback all return feedback items and differ mainly in blocking/consuming semantics. Descriptions do clarify the distinctions, but an agent could easily pick the wrong one. The three deprecated widget tools also overlap with each other and with setup_extension.
All tools use consistent snake_case verb_noun form (install_widget, get_pending_feedback, wait_for_multiple_feedback, etc.). The pattern is predictable and readable throughout, with no mixed conventions.
12 tools is reasonable for this scope, though three are marked deprecated, leaving effectively nine active tools. The count is slightly inflated by the legacy widget group that is being phased out in favor of the extension.
The domain (browser feedback collection) is well covered: installation/setup, connection status, multiple feedback retrieval modes, deletion, annotation requests, and browser opening. Coverage is strong, with only minor redundancy from the deprecated-but-retained widget tools.
Maintenance
Related MCP Connectors
Comment on AI-generated webpages; feedback flows back to your coding agent. Free, MIT, local-first.
Screenshot, PDF and HTML-to-image rendering API so Claude and Cursor can see any web page.
Screenshot, PDF and HTML-to-image rendering API so Claude and Cursor can see any web page.
Turn any webpage into a structured action manifest — clickable, fillable, submittable elements.
Related MCP Servers
- AlicenseAqualityDmaintenanceAttaches to your existing Chrome browser to allow Claude to see the active tab, interact via accessibility tree, and detect handoff triggers like 2FA and captchas.10MIT
- AlicenseNot gradedqualityDmaintenanceEnables visual annotation on web pages for Claude Code, allowing element selection, comment addition, screenshot capture, and structured UI feedback for code fixes via an MCP server.MIT
- FlicenseNot gradedqualityDmaintenanceEnables interactive element inspection on any website, allowing users to click elements and send detailed information (tag, classes, styles, attributes) to Claude for analysis.-
- AlicenseAqualityBmaintenanceEnables DOM-aware visual annotation of web pages with drawing tools and element selection, submitting structured annotations to Claude Code via MCP for automated feedback processing.2MIT