Toolbar MCP

MCP server for Toolbar bug reporting platform. Enables Claude and other AI assistants to fetch bug reports and fix issues directly from Toolbar.

Installation

``bash
npm install -g toolbar-mcp
`

Or run directly with npx:

`bash
npx toolbar-mcp
`

Configuration

$3

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"
}
}
}
`

$3

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"]
}
}
}
`

Environment Variables

| Variable | Description | Default |
|----------|-------------|---------|
| TOOLBAR_API_URL | Base URL of your Toolbar API | https://api.usetool.bar |

Tools

$3

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"
`

$3

Fetch a bug report and get a formatted summary.

`
Input: Report ID or Toolbar URL
`

$3

Fetch raw bug report data as JSON. Use when you need access to all fields.

`
Input: Report ID or Toolbar URL
`

$3

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)
`

$3

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
`

$3

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
`

Usage

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
`

How It Works

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

Element Comments

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

Development

`bash


Clone the repo

git clone
cd toolbar-mcp

Install dependencies

npm install

Build

npm run build

Run locally (for development)

TOOLBAR_API_URL=http://localhost:3000 npm start
``

License

MIT