bugsnap-mcp
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., "@bugsnap-mcpcheck my latest bug report and tell me how to fix it"
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.
bugsnap-mcp
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
Open the BugSnap Dashboard.
Go to Settings → BugSnap API Keys.
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 buildOnce 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 configdi dalam folderbugsnap-mcpuntuk 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-mcpOpsi 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.jsonWindows:
%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-xxxxdan buatkan unit test untuk mencegah bug ini terjadi lagi."
"Buka@bugsnap://captures/recentuntuk 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 |
|
| Mencari dan menampilkan daftar laporan bug di workspace. |
|
| Mengambil data diagnostik lengkap: gambar screenshot, anotasi, console error, network failure, user steps, dan fix blueprint. |
Resources
Resource URI | Tipe | Deskripsi |
| Dynamic Resource | Menampilkan 15 laporan bug terbaru di workspace. |
| Resource Template | Meng-attach laporan bug dan telemetri langsung ke dalam chat context. |
Prompts
Prompt | Argumen | Deskripsi |
|
| Alur kerja terpandu 5 langkah untuk mendiagnosa, memperbaiki, dan memverifikasi bug. |
|
| Alur kerja terpandu untuk mengkategorikan dan memprioritaskan bug terbuka. |
🔧 Variabel Lingkungan (Environment Variables)
Variabel | Wajib | Default | Deskripsi |
| Ya | — | API key workspace dari BugSnap Settings ( |
| Tidak |
| 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 toolsbugsnap_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.
| Name | Required | Description | Default |
|---|---|---|---|
| id | Yes | Capture ID (UUID) or full BugSnap share URL, e.g. https://bugsnap.akusaraproject.my.id/v/<id> |
TDQS
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.
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.
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.
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.
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.
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.
| Name | Required | Description | Default |
|---|---|---|---|
| limit | No | Max captures to return (default 10, max 25). | |
| query | No | Optional search keyword to match against capture title, description, or site URL. | |
| status | No | Filter by triage status (open, in-progress, fixed, closed). |
TDQS
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.
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.
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.
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.
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.
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.
2 tool updates
v0.3.0- First observed
bugsnap_get_capture - First observed
bugsnap_list_captures
TDQS
Scored across 2 tools
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.
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.
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.
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
Related MCP Connectors
Bug tracking for AI agents: session replay, console/network logs, repro packs, test plans, evidence.
- BugTapeOAuthai.bugtape
Production bugs with replay, network, console and stack, ranked for your coding agent to fix.
Gives your coding agent the captured console, network, replay and screenshot evidence for a bug.
Browser-backed QA with evidence and fix-ready reports for coding agents.
Related MCP Servers
- AlicenseNot gradedqualityCmaintenanceEnables 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 npmAGPL 3.0
- AlicenseAqualityAmaintenanceRead 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.77 npmMIT
- FlicenseNot gradedqualityBmaintenanceEnables 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-
- FlicenseNot gradedqualityAmaintenanceEnables 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.-