# MCP

### BetterBugs MCP: Quick Overview

The BetterBugs MCP (Model Context Protocol) enables you to load BetterBugs bug reports (via report links) directly to your preferred AI Agents and developer environments with MCP Client capabilities (such as Cursor, VS Code, and Windsurf). 

Once you configure BetterBugs with your MCP Client, all you need is to paste the BetterBugs bug report link(s) along with your prompt and context to debug it. 

The AI Agent then accesses the complete bug report (that comes bundled with the details and technical info, including screenshot, console logs, network requests, events, summary, steps to reproduce, and other info). 

**The result?** You get instant root cause analysis of the issue, possible solutions, and other debugging info and steps. 

As a developer, you can use the BetterBugs MCP server AI-debugging combined with your manual skills to resolve software issues significantly faster and better.

### Prerequisites: What do you need to start using BetterBugs MCP

To start using it, create a bug report using BetterBugs extension and include the report link in your prompt. 

Here’re the steps:

<figure><img src="https://3235868439-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBzBhuIUDDav7ztnadaoO%2Fuploads%2FEcQOYaujrs2EDOy93NDc%2F00-Create-BetterBugs-Bug-Report-new-UI.gif?alt=media&#x26;token=15f1e30c-8a35-4839-9d37-94fab8a85147" alt=""><figcaption><p>Steps to Create a Bug Report Using BetterBugs</p></figcaption></figure>

1. Install the [BetterBugs Chrome extension](https://chrome.google.com/webstore/detail/betterbugs-a-fresh-approa/mdljmlgokccncglfobogbfjgcijldnaj).
2. Open extension and capture the bug using the “**Capture Screenshot**” option.
3. Annotate the screenshot to highlight the bug (optional)
4. In the Summary area at the right, select the **BetterBugs Workspace** and **Project**. This is the location within BetterBugs where your report would save once you finish creating the report.
5. Add bug title and description. Or, just enable the “**AI**” toggle (as in the demo) to add **AI-generated title, summary**, and **steps to reproduce**. The technical details (console logs, env info, network, and others) would auto-attach to the bug report.
6. Hit “**Create Session**” button from the top right to create a report.

Okay! Your report is ready to be consumed by the AI Agent through the MCP Client.

### How to setup BetterBugs MCP it for your preferred MCP Client

Here, we've provided practical steps to integrate BetterBugs MCP with the following Clients:

* Visual Studio Code
* Cursor
* Windsurf
* Google Antigravity
* Claude App
* Claude Code
* Trae IDE
* Other MCP Clients

{% tabs %}
{% tab title="VS Code" %}

### Visual Studio Code

<figure><img src="https://3235868439-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBzBhuIUDDav7ztnadaoO%2Fuploads%2FAyx7avWgg2iVnZziyfdj%2F01-Connect-BetterBugs-MCP-with-VS-Code.gif?alt=media&#x26;token=a56c2832-58d7-46e1-aeab-9adbc7b2cc5f" alt=""><figcaption><p>Steps to Integrate BetterBugs MCP with VS Code</p></figcaption></figure>

1. Open VS Code and press **CTRL/CMD + P**&#x20;
2. Search **>MCP: Add Server**
3. Select **HTTP (HTTP or Server-Sent Events)**
4. Add the following URL: **<https://mcp.betterbugs.io/mcp>**
5. Give the MCP Server a name, such as **BetterBugs**
6. The **`mcp.json`** file opens instantly with the following code snippet:

```javascript
{
  "servers": {
    "BetterBugs": {
      "url": "https://mcp.betterbugs.io/mcp",
      "type": "http"
    }
  },
  "inputs": []
}
```

{% hint style="warning" %}
For first time users, you’d be prompted to authenticate to **mcp.betterbugs.io**.&#x20;

* From the dialog box, click “**Allow**” or "**Open**" to start authentication.  Click “**Authorize**” (from the BetterBugs web page) and you’re good to go!
* If the dialog box isn’t auto-displayed, you can click the “**Start**” text available within your MCP code snippet to start the authentication process.

Or, if it's authenticated instantly (as in the demo), you'd find it "**Running**" state within your code snippet.
{% endhint %}
{% endtab %}

{% tab title="Cursor" %}

### Cursor

#### **OPTION 1: Integrate BetterBugs MCP with Cursor automatically**

Use the following link to instantly configure Cursor with BetterBugs MCP: -> [**Add to Cursor**](cursor://anysphere.cursor-deeplink/mcp/install?name=BetterBugs\&config=eyJ1cmwiOiJodHRwczovL21jcC5iZXR0ZXJidWdzLmlvL21jcCIsImhlYWRlcnMiOnt9fQ%3D%3D)

#### **OPTION 2: Manual Integration Steps**

Alternatively, you can configure it manually. Here’re the steps:

<figure><img src="https://3235868439-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBzBhuIUDDav7ztnadaoO%2Fuploads%2FyC59mpLJGFRGr11cSgov%2F01-Integrate-BetterBugs-MCP-with-Cursor.gif?alt=media&#x26;token=57828aaa-0b34-4e79-b857-2b5f84e9e918" alt=""><figcaption><p>Steps to Integrate BetterBugs MCP with Cursor</p></figcaption></figure>

1. Open Cursor and enter **CTRL/CMD + P**
2. Search: **>View: Open MCP Settings**
3. In the “**Tools and MCP**” option from the left navigation panel and click “**Add Custom MCP**”
4. Paste the following code in the **`mcp.json`** file:

```javascript
{
    "mcpServers": {
      "BetterBugs": {
        "url": "https://mcp.betterbugs.io/mcp"
      }
    }
}
```

5. Save the file and open the “**Cursor Settings**” tab.
6. From the “**BetterBugs**” option (should be available under “**Installed MCP Servers**”), hit “**Connect**”.
7. In the Cursor dialog box, hit “**Open**”.
8. Finally, hit “**Authorize**” for successful authorization.

Okay! You’re all set with the MCP config on Cursor. It's as easy as that!&#x20;

To confirm the BetterBugs MCP config for Cursor, in **Cursor Settings** > **Tools & MCP** > **Installed MCP Servers**, you should see BetterBugs successfully installed with 7 tools enabled
{% endtab %}

{% tab title="Windsurf" %}

### Windsurf

Here're the steps for it:

<figure><img src="https://3235868439-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBzBhuIUDDav7ztnadaoO%2Fuploads%2FsjkHLQDKogE8lC8emqB5%2F01-Integrate-BetterBugs-MCP-with-Windsurf.gif?alt=media&#x26;token=df883dfa-941b-4b34-86fc-e67d42fa61a8" alt=""><figcaption><p>Integrate BetterBugs MCP with Windsurf</p></figcaption></figure>

1. Open Windsurf, press **CTRL /CMD + P**
2. Enter:  **>Windsurf: MCP Marketplace**
3. In the MCP Marketplace window, click the gear icon on the right. This opens the **`mcp_config.json`** file right away.
4. In the JSON file, add the following code snippet:&#x20;

```javascript
{"mcpServers": {"BetterBugs": {"url": "https://mcp.betterbugs.io/mcp"}} }
```

5. Save the file. This opens a Windsurf dialog box for authenticating it with BetterBugs. Click “**Open**”.&#x20;
6. Finally, click “**Authorize**” and you’re good to go!.

The authorization screen opens with the message that it’s successful! Make sure to exit and then reload Windsurf to ensure that changes are implemented correctly.
{% endtab %}

{% tab title="Antigravity" %}

### Google Antigravity

1. Open Antigravity and press **CTRL/CMD + P**&#x20;
2. Search **>Antigravity: Manage MCP Servers**
3. Click **View raw config** to open **`mcp_config.json`** file.
4. Add the following code snippet in the JSON file and save:

```javascript
{
  "mcpServers": {
    "betterbugs": {
      "command": "npx",
      "args": [
        "mcp-remote",
        "https://mcp.betterbugs.io/mcp",
        "--transport",
        "http-first"
      ]
    }
  }
}
```

5. Open **Manage MCP servers** tab and click "**Refresh**".

After authentication, you'd find "**betterbugs**" as an MCP server, with 7 tools enabled for Antigravity, ready for usage.

<figure><img src="https://3235868439-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBzBhuIUDDav7ztnadaoO%2Fuploads%2F9C0q4cmF3f6uQIq2ZgmI%2FAntigravity-with-BetterBugs-MCP.png?alt=media&#x26;token=d3f31972-7bdc-45f6-883a-dc61746bfa89" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Claude App" %}

### Claude Desktop App

{% hint style="info" %}
NOTE: Make sure you have Node.js (v20 or above) installed on your system.
{% endhint %}

Steps to integrate BetterBugs MCP with Claude:

<figure><img src="https://3235868439-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBzBhuIUDDav7ztnadaoO%2Fuploads%2F4BJBHxVZhe4ITmD5aSfD%2F01-Integrate-BetterBugs-MCP-with-Claude-app.gif?alt=media&#x26;token=14195b57-83af-485c-b9ce-5287721649db" alt=""><figcaption><p>Steps to Integrate BetterBugs MCP with Claude</p></figcaption></figure>

1. Open Claude app and open “**Settings**” from the left pane.
2. Next, click “**Developer**” under Desktop app. Here, you’d find the “**Local MCP servers**” window to add and manage your MCP servers.&#x20;
3. Click “**Edit Config**”. This’d open your system location with the `claude_desktop_config.json` file.
4. Open the JSON file in your text editor, add the following code snippet, and save:

```javascript
{
  "mcpServers": {
    "betterbugs": {
      "command": "npx",
      "args": [
        "mcp-remote",
        "https://mcp.betterbugs.io/mcp",
        "--transport",
        "http-first"
      ]
    }
  }
}
```

To apply changes to the `claude_desktop_config.json`, quit the Claude Desktop app (via the System Tray/Menu Bar) and then re-launch it.

To confirm for successful installation. Go to **Settings** > **Developer** > **Local MCP servers**. You should see “**betterbugs**” running in the Local MCP servers window.

To double check its available to use, take following steps:

<figure><img src="https://3235868439-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBzBhuIUDDav7ztnadaoO%2Fuploads%2FR2aSV8ckNxEM8NZoTtP5%2F02-Confirm-BetterBugs-MCP-with-Claude.gif?alt=media&#x26;token=fb3f1f6f-a869-4a2f-bdef-66d25b1dbd0b" alt=""><figcaption><p>Confirm BetterBugs MCP connection with Claude</p></figcaption></figure>

1. Open a new chat on Claude app.
2. Hit the “**+**” icon at the bottom left of the chat area.
3. Click “**Connectors**”. You should see **betterbugs** in the **enabled** state.&#x20;

You’re good to go with the integration.
{% endtab %}

{% tab title="Claude Code" %}

### Claude Code

1. In your terminal, run:

```javascript
claude mcp add BetterBugs https://mcp.betterbugs.io/mcp -t http -s user
```

2. Open Claude

```javascript
claude
```

<figure><img src="https://3235868439-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBzBhuIUDDav7ztnadaoO%2Fuploads%2FlrqYEcRJs1Br5qlTbRNj%2Fimage.png?alt=media&#x26;token=97cfc0d8-9738-43a0-8a33-8bdfbf749450" alt=""><figcaption><p>BetterBugs MCP Installation for Claude Code </p></figcaption></figure>

3. Enter: `/mcp` . Here, you'd find **BetterBugs** in disabled state under  "**Manage MCP servers**".

<figure><img src="https://3235868439-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBzBhuIUDDav7ztnadaoO%2Fuploads%2Ffil5Y0S7mjDwfU3GszBb%2Fimage.png?alt=media&#x26;token=9ab5389e-44eb-4b0c-9205-d983eb130a50" alt=""><figcaption><p>Locate BetterBugs using /mcp command under "Manage MCP Servers"</p></figcaption></figure>

4. Next, select **BetterBugs** and enable it for Claude Code.

<figure><img src="https://3235868439-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBzBhuIUDDav7ztnadaoO%2Fuploads%2FgI6toYRNtCG8QjXvikTK%2Fimage.png?alt=media&#x26;token=b1fb785e-20be-4c45-9a6d-0c18a761b1c8" alt=""><figcaption><p>Enable BetterBugs for Claude Code</p></figcaption></figure>

You're good to go! You should see **BetterBugs** MCP "**connected**" to Claude.

<figure><img src="https://3235868439-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBzBhuIUDDav7ztnadaoO%2Fuploads%2FkWYVAuBvHynwSgDCQTT8%2Fimage.png?alt=media&#x26;token=48119e31-0894-4c2f-a312-f92ba466c77e" alt=""><figcaption><p>Check for Successful Installation of Betterbugs MCP for Claude Code</p></figcaption></figure>
{% endtab %}

{% tab title="Trae IDE" %}

### Trae IDE

1. Open the **Trae** app.&#x20;
2. Open the “**AI Side Bar**” from the top right and click the gear icon for the “**AI Management**” option
3. Click the “**MCP**” tab.
4. Open the “**+ Add**” drop down and select “**Add Manually**”.
5. Paste the following code snippet in the JSON file and hit “**Confirm**”.

```javascript
{
  "mcpServers": {
    "betterbugs": {
      "command": "npx",
      "args": [
        "mcp-remote",
        "https://mcp.betterbugs.io/mcp",
        "--transport",
        "http-first"
      ]
    }
  }
}
```

6. Finally, authorize BetterBugs MCP for Trae.

You’re good to go with the BetterBugs MCP config with Trae IDE.
{% endtab %}

{% tab title="For Other MCP Clients" %}

### For Other MCP Clients

If you’re using any other MCP clients other than those listed, just add the following code snippet into the **mcp JSON** file of that client to start using BetterBugs MCP:

```javascript
{"mcpServers": {"BetterBugs": {"url": "https://mcp.betterbugs.io/mcp"}} }
```

{% endtab %}
{% endtabs %}

### How to use BetterBugs MCP for AI debugging: Windsurf Example

Once you’re good with the config steps, here’s how to use it:

<figure><img src="https://3235868439-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBzBhuIUDDav7ztnadaoO%2Fuploads%2Fsj5l2hyMVpglR5atJ9x7%2F03-Windsurf-bug-fix-using-Windsurf.gif?alt=media&#x26;token=becf7ae8-27e5-4fc7-bdad-4be0957726a6" alt=""><figcaption><p>Example: BetterBugs MCP + Windsurf in Action to Fix Code</p></figcaption></figure>

1. Create a bug report using BetterBugs and copy the report link.
2. Paste the BetterBugs report link in your MCP client chat space along with the prompt and context for it.
3. If required, approve any requests that the AI agent makes to provide more info and context. Continue your debugging session in the chat interface.&#x20;

### BetterBugs MCP: Available tools/properties

<table><thead><tr><th width="211.7777099609375">Tools/Property Names</th><th>Description</th></tr></thead><tbody><tr><td>getUserDetails</td><td>Get authenticated user profile, available workspaces, and account information.</td></tr><tr><td>listWorkspaces</td><td>Retrieve all workspaces the user has access to, including workspace metadata, permissions, and project counts.</td></tr><tr><td>listProjects</td><td>List all projects within a specific workspace, including project status, creation dates, and metadata. Requires a workspace_id parameter.</td></tr><tr><td>getBugDetails</td><td>Fetch comprehensive bug information including title, description, status, priority, reporter, timestamps, and visual evidence (screenshots, screen recordings). Returns structured bug data with metadata.</td></tr><tr><td>listBugs</td><td>Retrieve all bugs for a specific project, including bug summaries, status, priority, and basic metadata.</td></tr><tr><td>getScreenshot</td><td>Get a screenshot from the CDN. Requires screenshot_url. Use this to get a screenshot from the CDN. Must be called after getBugDetails. Essential for enhanced visual analysis.</td></tr><tr><td>getBugLogs</td><td>Get detailed technical logs for a specific bug including console logs, network requests, user interactions, and step-by-step reproduction data.</td></tr></tbody></table>

### Prompt Example: Using BetterBugs MCP with Cursor

<figure><img src="https://3235868439-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBzBhuIUDDav7ztnadaoO%2Fuploads%2FE5jfFzTK4gUYdNMQtAHb%2Funknown.png?alt=media&#x26;token=43884a12-a72f-463f-903c-a4a60d4a9949" alt=""><figcaption><p>Prompt Example: Using BetterBugs MCP with Cursor</p></figcaption></figure>

#### Prompt

Analyze the following report **`<BetterBugs Report Link>`** and provide a RCA for it. Suggest fixes and test cases for the issue. Provide the steps to resolve the issue.

#### BetterBugs Tools and AI Agent&#x20;

* BetterBugs Report link (bundled with Screenshot and other technical details)
* BetterBugs MCP
* Cursor

### Frequently Asked Question (FAQs)

#### 1 - Can I use more than one BetterBugs report link in my prompt?

Yes. You can use more than one bug report link for analysis and troubleshooting the issue. However, we highly recommend using one report link at a time. This allows your AI agent to perform optimally and cohesively for better context analysis.

#### 2 - Can I use the MCP without BetterBugs Chrome Extension?

Yes. All you need is the BetterBugs report link from any of your team members or end-user who uses the extension for creating BetterBugs reports. Same way, to analyze your own BetterBugs report you’d need the extension to create your reports. Else, you can use report links from others.

#### 3 - Do BetterBugs MCP share the MCP data to third-party AI providers for training purposes?&#x20;

No. BetterBugs does not auto-share or analyze your MCP data for training purposes. You can check out our AI privacy policies [here](https://docs.betterbugs.io/debug-a-report/ai-debugger).

#### 4 - How do the BetterBugs admins control what MCP can access?&#x20;

BetterBugs MCP works with the exact permissions set for the BetterBugs report link. The MCP has no access to any data that the user (whom the BetterBugs report belongs to) can’t see already.&#x20;