Skip to main content
Glama

bugsnap-mcp

License: MIT MCP Standard GitHub Repository

Official Model Context Protocol (MCP) server for BugSnap.

Gives AI coding agents (Claude Code, Claude Desktop, Cursor, Windsurf, or any MCP-compatible client) direct multimodal access to your BugSnap bug reports:

  • 📸 High-resolution annotated screenshots (transferred directly as base64 image blocks for vision LLMs).

  • 🔢 Sequential step pins (①, ②, ③) (automatically guides agents through user interaction sequences).

  • 📍 User annotations & team comments with exact spatial pixel coordinates (pin_x, pin_y).

  • 👣 Chronological user action steps (clicks, inputs, and navigation breadcrumbs leading up to the bug).

  • 🔴 Console exceptions & stack traces captured automatically from the browser DevTools.

  • 🌐 Failed network requests (HTTP 4xx/5xx status codes, request methods, and endpoints).

  • 🖥️ Runtime environment (URL, OS, browser, viewport dimensions).

  • 🎯 Actionable AI Fix Blueprint (a structured diagnostic plan preventing coding agents from guessing or modifying the wrong component).

  • ⚠️ Smart Ambiguity Guardrail (if a bug report has no written description and no visual markings, the agent pauses and asks the user directly instead of guessing).

Runs 100% locally over stdio. No server hosting required.


🚀 Quick Start (Installation & Setup)

1. Get Your BugSnap API Key

  1. Open the BugSnap Dashboard.

  2. Go to Settings → BugSnap API Keys.

  3. Click Generate API Key and copy your key (starts with bugsnap_...).


2. Install & Build the MCP Server

You can install bugsnap-mcp locally on your machine in 2 minutes:

# 1. Clone the repository
git clone https://github.com/akusaradigital/bugsnap-mcp.git

# 2. Enter the directory
cd bugsnap-mcp

# 3. Install dependencies and build
npm install
npm run build

Once built, the server binary is located at dist/index.js (e.g. D:/Akusara/EXTENTION CHROME/bugsnap-mcp/dist/index.js or /path/to/bugsnap-mcp/dist/index.js).

(Optional: Run npm link inside bugsnap-mcp to make the bugsnap-mcp command available globally in your terminal).


Related MCP server: feedbug-mcp

⚙️ Client Configurations

💡 Bebas Error Path Windows:

  • Gunakan Opsi A (Universal GitHub) di bawah ini — 100% tanpa path file sehingga mustahil terkena error backslash Windows (\).

  • Jika menggunakan instalasi lokal (Opsi B), jalankan perintah npm run config di dalam folder bugsnap-mcp untuk mencetak JSON konfigurasi yang sudah dinormalisasi otomatis menggunakan forward slash (/).

Pilih AI client yang kamu gunakan di bawah ini:

⚡ 1. Claude Code (CLI)

Opsi A: 1-Baris Langsung dari GitHub (Tanpa Perlu Clone)

claude mcp add --scope user -e BUGSNAP_API_KEY=bugsnap_xxx --transport stdio bugsnap -- npx -y github:akusaradigital/bugsnap-mcp

Opsi B: Menggunakan Path Lokal (Offline / Clone Sendiri)

claude mcp add --scope user -e BUGSNAP_API_KEY=bugsnap_xxx --transport stdio bugsnap -- node "D:/Akusara/EXTENTION CHROME/bugsnap-mcp/dist/index.js"

(Untuk macOS/Linux, gunakan path Unix seperti /Users/username/bugsnap-mcp/dist/index.js).


🖥️ 2. Claude Desktop

Buka file konfigurasi claude_desktop_config.json:

  • macOS: ~/Library/Application Support/Claude/claude_desktop_config.json

  • Windows: %APPDATA%\Claude\claude_desktop_config.json

Opsi A: Langsung via GitHub

{
  "mcpServers": {
    "bugsnap": {
      "command": "npx",
      "args": ["-y", "github:akusaradigital/bugsnap-mcp"],
      "env": {
        "BUGSNAP_API_KEY": "bugsnap_xxx"
      }
    }
  }
}

Opsi B: Menggunakan Path Lokal

{
  "mcpServers": {
    "bugsnap": {
      "command": "node",
      "args": ["D:/Akusara/EXTENTION CHROME/bugsnap-mcp/dist/index.js"],
      "env": {
        "BUGSNAP_API_KEY": "bugsnap_xxx"
      }
    }
  }
}

Restart Claude Desktop setelah menyimpan file konfigurasi.


🖱️ 3. Cursor IDE

Tambahkan ke .cursor/mcp.json di root workspace proyek kamu (atau di Cursor Settings → Features → MCP):

{
  "mcpServers": {
    "bugsnap": {
      "command": "npx",
      "args": ["-y", "github:akusaradigital/bugsnap-mcp"],
      "env": {
        "BUGSNAP_API_KEY": "bugsnap_xxx"
      }
    }
  }
}

(Atau gunakan "command": "node" dan "args": ["D:/Akusara/EXTENTION CHROME/bugsnap-mcp/dist/index.js"] jika menggunakan instalasi lokal). } }


---

### 🌊 4. Windsurf IDE

Tambahkan ke konfigurasi MCP Windsurf di `~/.codeium/windsurf/mcp_config.json`:

```json
{
  "mcpServers": {
    "bugsnap": {
      "command": "node",
      "args": ["D:/Akusara/EXTENTION CHROME/bugsnap-mcp/dist/index.js"],
      "env": {
        "BUGSNAP_API_KEY": "bugsnap_xxx"
      }
    }
  }
}

🔌 5. VS Code (Cline / Roo Code)

Tambahkan ke pengaturan MCP settings (cline_mcp_settings.json):

{
  "mcpServers": {
    "bugsnap": {
      "command": "node",
      "args": ["D:/Akusara/EXTENTION CHROME/bugsnap-mcp/dist/index.js"],
      "env": {
        "BUGSNAP_API_KEY": "bugsnap_xxx"
      },
      "disabled": false,
      "autoApprove": ["bugsnap_list_captures", "bugsnap_get_capture"]
    }
  }
}

💬 Cara Menggunakan Bersama AI Coding Agent

Setelah terhubung, agent kamu akan secara otomatis mengenali tools, resources, dan prompt BugSnap. Kamu cukup mengetik instruksi dalam bahasa sehari-hari:

1. Memperbaiki Bug Spesifik

"Tolong perbaiki bug dari link ini: https://bugsnap.akusaraproject.my.id/v/8cd0c35b-8683-43e7-940b-2fec6c4fd8ef"
"Inspect BugSnap capture 8cd0c35b-xxxx dan cari di repo kita kenapa terjadi error 500."

2. Mencari & Triage Bug Terbuka

"Cari laporan bug di BugSnap yang berkaitan dengan 'checkout' atau 'payment'."
"List bug terbuka di workspace BugSnap kita dan urutkan berdasarkan prioritas."

3. Menggunakan Resource Natively (Cursor & Claude Desktop)

Di Cursor atau klien yang mendukung Resource URI, kamu bisa langsung mengetik:

"Lihat resource @bugsnap://captures/8cd0c35b-xxxx dan buatkan unit test untuk mencegah bug ini terjadi lagi."
"Buka @bugsnap://captures/recent untuk melihat daftar bug terbaru."

4. Menjalankan Guided Prompts

Kamu bisa menjalankan alur kerja bawaan:

  • /bugsnap_fix_bug (dengan argumen ID capture)

  • /bugsnap_triage_open_bugs


🛡️ Guardrails & Pencegahan Kesalahan Diagnosis AI

bugsnap-mcp dirancang khusus agar AI Agent tidak salah membaca atau berasumsi keliru:

1. 📸 Visual Screenshot & Anotasi

  • Screenshot asli diunduh beresolusi penuh (hingga 15MB).

  • AI dilatih untuk memeriksa kotak berwarna, anak panah, dan nomor langkah (①, ②, ③) secara berurutan sesuai aksi pengguna.

  • Untuk screenshot Full-Page yang panjang ke bawah, AI diarahkan untuk memindai kontras visual dan mencocokkan data telemetri, alih-alih menebak dari teks yang terkompresi.

2. ⚠️ Ambiguity Guardrail (Deskripsi & Tanda Kosong)

Jika pengguna membuat laporan yang:

  • Deskripsi tertulisnya kosong / tidak jelas, DAN

  • Tidak ada console error maupun network 500, DAN

  • Tidak ada coretan/tanda pada gambar, Maka AI Agent DILARANG mengubah kode sembarangan. Agent diinstruksikan untuk berhenti dan bertanya langsung kepada pengguna:

"Karena gambar yang kamu kirim tidak ada penjelasan detail maupun tanda pada gambar, bisa tolong jelaskan bagian mana yang bermasalah atau behavior apa yang diharapkan?"

3. 🎥 Video Captures (AI Video Guardrail)

Model LLM saat ini tidak dapat memutar/menonton video mentah. Jika capture berupa rekaman video, MCP menyuntikkan larangan berhalusinasi visual, dan langsung mengarahkan AI ke telemetri deterministik:

  • Catatan tim bertimestamp (misal: "di detik 14 tombol freeze").

  • Breadcrumbs aksi klik & ketikan user.

  • Unhandled JavaScript console errors dengan call stack.

  • Endpoint network 4xx/5xx yang gagal.


🛠️ MCP Specification Reference

Tools

Tool

Parameter

Deskripsi

bugsnap_list_captures

query (string), limit (int 1-25), status (open/in-progress/fixed/closed)

Mencari dan menampilkan daftar laporan bug di workspace.

bugsnap_get_capture

id (string: UUID atau share URL)

Mengambil data diagnostik lengkap: gambar screenshot, anotasi, console error, network failure, user steps, dan fix blueprint.

Resources

Resource URI

Tipe

Deskripsi

bugsnap://captures/recent

Dynamic Resource

Menampilkan 15 laporan bug terbaru di workspace.

bugsnap://captures/{id}

Resource Template

Meng-attach laporan bug dan telemetri langsung ke dalam chat context.

Prompts

Prompt

Argumen

Deskripsi

bugsnap_fix_bug

id (string), repo_hint (string opsional)

Alur kerja terpandu 5 langkah untuk mendiagnosa, memperbaiki, dan memverifikasi bug.

bugsnap_triage_open_bugs

query (string opsional)

Alur kerja terpandu untuk mengkategorikan dan memprioritaskan bug terbuka.


🔧 Variabel Lingkungan (Environment Variables)

Variabel

Wajib

Default

Deskripsi

BUGSNAP_API_KEY

Ya

—

API key workspace dari BugSnap Settings (bugsnap_...).

BUGSNAP_API_BASE

Tidak

https://bugsnap.akusaraproject.my.id

Base URL instance BugSnap.


🧪 Menguji dengan MCP Inspector

Kamu bisa menguji server secara interaktif di browser menggunakan MCP Inspector:

BUGSNAP_API_KEY=bugsnap_xxx npx @modelcontextprotocol/inspector node dist/index.js

📄 Lisensi

MIT © BugSnap

Available Tools

2 tools
bugsnap_get_captureGet BugSnap bug report, annotated screenshot & fix guidanceA

Get complete, multimodal debugging context for a BugSnap bug report so you can diagnose and fix it with precision without guessing: (1) multi-modal annotated screenshot image (with user-drawn arrows, boxes, text callouts), (2) user's problem description & expected behavior, (3) team discussion comments with pinned coordinate locations, (4) console exceptions with full stack traces, (5) failed network API requests (4xx/5xx), (6) chronological user action steps prior to the defect, (7) runtime environment (URL, browser, OS, viewport dimensions), and (8) an actionable step-by-step fix blueprint tailored for AI coding agents. Accepts either a bare capture UUID or a full BugSnap share URL.

NameRequiredDescriptionDefault
idYesCapture ID (UUID) or full BugSnap share URL, e.g. https://bugsnap.akusaraproject.my.id/v/<id>

TDQS

A3.6/5.0
Behavior3/5

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

No annotations exist, so the description carries the full burden. It discloses the shape of the return payload in detail (eight content categories), which is genuinely useful, but says nothing about access requirements, whether the capture must exist, error behavior on a bad UUID, or payload size — gaps that matter for an unannotated tool.

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

Conciseness4/5

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

One long sentence, but front-loaded with the purpose and organized as a numbered inventory, so it scans cleanly. The enumeration is lengthy yet justified because there is no output schema to describe the response.

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?

For a single-item read tool with no output schema and no annotations, the description covers the return payload thoroughly and states the input format. It stops short of error/empty-state behavior or any note about the volume of data returned, which would complete the picture.

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?

Schema description coverage is 100% and the single parameter already documents both accepted forms. The description's closing line about accepting 'a bare capture UUID or a full BugSnap share URL' restates the schema rather than adding format, validation, or failure semantics, so baseline 3 applies.

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

Purpose4/5

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

States a specific verb and resource ('Get complete, multimodal debugging context for a BugSnap bug report') and enumerates exactly what that context contains. It does not explicitly name the sibling bugsnap_list_captures, but the singular capture-plus-ID framing makes the distinction from a list tool obvious.

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 clause 'so you can diagnose and fix it with precision without guessing' gives a clear use context: pull this when you need to root-cause and fix a reported defect. No when-not conditions or explicit alternatives are given, so it falls short of a 5.

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

bugsnap_list_capturesList and search BugSnap bug reportsA

List and search recent BugSnap bug reports (screenshots, recordings, and diagnostic telemetry) captured for your workspace. Filter by status or search by keyword (title, description, or URL). Use this to find a capture ID before inspecting it with bugsnap_get_capture.

NameRequiredDescriptionDefault
limitNoMax captures to return (default 10, max 25).
queryNoOptional search keyword to match against capture title, description, or site URL.
statusNoFilter by triage status (open, in-progress, fixed, closed).

TDQS

A4/5.0
Behavior3/5

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

With no annotations, the description carries the behavioral burden and does disclose workspace scope, recency, and capture content types. However, it omits permission requirements, ordering, pagination behavior beyond the limit parameter, and return characteristics.

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 three tight sentences, front-loaded with the core action and followed by filtering options and the next-step relationship to the sibling tool. Nothing is wasted.

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?

For a simple list/search tool with fully documented parameters and no output schema, the description is sufficiently complete to select and invoke it. It could add ordering or return-shape context, but the essential workflow is covered.

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?

Schema description coverage is 100%, so the schema already fully documents limit, query, and status. The description restates keyword and status filtering but adds no syntax or format details beyond what the schema provides.

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 states a specific verb and resource: list/search recent BugSnap bug reports, including what a capture contains. It also clearly distinguishes this tool from the sibling by saying it is used to find a capture ID before calling bugsnap_get_capture.

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 explicitly names the alternative tool and the condition that selects it: use this to find a capture ID before inspecting with bugsnap_get_capture. It also explains filtering by status or keyword, though it does not state when not to use the tool.

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.

  1. 2 tool updatesv0.3.0
    • First observedbugsnap_get_capture
    • First observedbugsnap_list_captures

TDQS

A3.8/5.0

Scored across 2 tools

Disambiguation5/5

The two tools have crisply distinct roles: one lists/searches captures and returns IDs, the other fetches full detail for a single capture. The list tool even explicitly tells the agent to use it before calling bugsnap_get_capture, making the intended sequence unambiguous.

Naming Consistency5/5

Both follow the same predictable pattern: bugsnap_<verb>_<resource> (bugsnap_list_captures, bugsnap_get_capture), with a consistent server prefix, verb style, and noun form. No mixed conventions.

Tool Count3/5

Two tools is thin for a bug-reporting domain; the surface is essentially a read-only list/detail pair. It is defensible as a focused retrieval server, but it sits at the borderline where a couple more operations would be expected.

Completeness3/5

Listing and full-context retrieval are well covered, but the lifecycle is one-directional: despite filtering by status, there is no way to change status, add/resolve comments, or otherwise act on a capture. Agents can diagnose but not close the loop.

Maintenance

ActivityMaintained
ResponsivenessNo issues

Related MCP Connectors

Related MCP Servers

  • A
    license
    Not graded
    quality
    C
    maintenance
    Enables AI agents to capture, replay, inspect, diff, share, and manage executable bug artifacts (.bug files) via the BugProof CLI, supporting 10 tools and structured prompts for debugging workflows.
    76 npm
    AGPL 3.0
  • A
    license
    A
    quality
    A
    maintenance
    Read visual bug reports from Feedbug in your AI coding agent: screenshot, console logs, failed network requests, session replay and the DOM context of the element the tester clicked. Trace the bug to its source file, comment and resolve without leaving the editor.
    7
    7 npm
    MIT
  • F
    license
    Not graded
    quality
    B
    maintenance
    Enables coding agents to access local browser diagnostics—runtime errors, console logs, network failures, breadcrumbs, DOM snapshots, and screenshots—and run closed-loop verification to debug and confirm fixes.
    165 npm
    -
  • F
    license
    Not graded
    quality
    A
    maintenance
    Enables coding agents to access recorded browser flows—including user actions, network activity, console logs, storage, DOM events, and screen recordings—for debugging and regression testing. It lets agents inspect and analyze these flows to report bugs and generate tests without manually reproducing issues.
    -