MCP server for Toolbar bug reporting - enables Claude and other AI assistants to fetch and fix bugs from Toolbar reports
npm install toolbar-mcpMCP server for Toolbar bug reporting platform. Enables Claude and other AI assistants to fetch bug reports and fix issues directly from Toolbar.
``bash`
npm install -g toolbar-mcp
Or run directly with npx:
`bash`
npx toolbar-mcp
Add to your Claude Code MCP config at ~/.claude.json:
`json`
{
"mcpServers": {
"toolbar": {
"command": "npx",
"args": ["toolbar-mcp"]
}
}
}
Or if installed globally:
`json`
{
"mcpServers": {
"toolbar": {
"command": "toolbar-mcp"
}
}
}
Add to your Claude Desktop config at ~/Library/Application Support/Claude/claude_desktop_config.json (macOS) or %APPDATA%\Claude\claude_desktop_config.json (Windows):
`json`
{
"mcpServers": {
"toolbar": {
"command": "npx",
"args": ["toolbar-mcp"]
}
}
}
| Variable | Description | Default |
|----------|-------------|---------|
| TOOLBAR_API_URL | Base URL of your Toolbar API | https://api.usetool.bar |
Primary tool - Fetch a bug report and get detailed instructions to fix it. Returns:
- Element comments with CSS selectors and XPaths pointing to specific UI elements
- Console errors and warnings
- Failed network requests
- User action steps for reproduction
- Specific instructions on how to find and fix the issue
``
Input: Report ID or Toolbar URL
Example: "https://app.usetool.bar/media?id=696ad06c98fa7c35118e5865"
Fetch a bug report and get a formatted summary.
``
Input: Report ID or Toolbar URL
Fetch raw bug report data as JSON. Use when you need access to all fields.
``
Input: Report ID or Toolbar URL
Get console logs from a bug report. Useful for debugging JavaScript errors.
``
Input: Report ID or Toolbar URL
Optional: level (all, error, warn, info, log)
Get network request logs from a bug report. Useful for debugging API issues.
``
Input: Report ID or Toolbar URL
Optional: failed_only (boolean) - Only return failed requests
Get element comments from a bug report. These are annotations placed directly on UI elements by the reporter, containing CSS selectors and fix instructions.
``
Input: Report ID or Toolbar URL
Once configured, you can use it with Claude by:
1. Pasting a Toolbar URL directly:
``
https://app.usetool.bar/media?id=696ad06c98fa7c35118e5865
Claude will automatically fetch the bug report and attempt to fix the issue.
2. Asking Claude to fix a specific bug:
``
Fix the bug in report 696ad06c98fa7c35118e5865
3. Getting bug details:
``
Get the details of bug 696ad06c98fa7c35118e5865
1. Users report bugs using the Toolbar browser extension/widget
2. Bug reports include:
- Screenshots or screen recordings
- Console logs (errors, warnings, etc.)
- Network request logs
- User actions (clicks, navigation, typing)
- Element comments - annotations placed directly on UI elements with fix instructions
3. This MCP server fetches reports from the Toolbar API
4. Claude uses the data to understand and fix bugs in your codebase
The most powerful feature is element comments. When users report bugs, they can click on specific UI elements and add comments explaining what's wrong. These comments include:
- CSS selectors to find the element
- XPath for precise element location
- The element's HTML, text content, and attributes
- The user's description of the issue
This makes it easy for Claude to:
1. Find the exact component in your codebase
2. Understand what needs to be fixed
3. Implement the fix based on the user's instructions
`bashClone the repo
git clone
cd toolbar-mcp
MIT