feedbug-mcp

feedbug-mcp

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.

Category
Visit Server

README

@feedbug/mcp

npm version license feedbug-mcp MCP server

Visual bug reports your AI agent can actually fix.

Feedbug lets your testers report bugs by clicking on them. Each report captures a screenshot, the console logs, the failed network requests, a session replay, and the HTML/DOM context of the element they clicked, then opens an issue in your Linear project or your GitHub repository automatically. When a code source is connected, the issue also carries a link to the source file the bug most likely came from.

This MCP server plugs that data straight into your AI coding agent (Claude Code, Cursor, Windsurf, VS Code). The agent reads the bug, gets the exact CSS selector and component path, traces it to the source file, proposes the patch, and marks the bug resolved.

Full write-up of the product side: feedbug.app/mcp-bug-tracking.

Point at the bug. Ship the fix.

Quick start

npx @feedbug/mcp init

The installer asks for your client and your project key, then writes the config for you. Non-interactive:

npx @feedbug/mcp init --client claude pk_your_project_key

Supported clients: claude (Claude Code), cursor, windsurf. Grab your project key (pk_...) from your project page on feedbug.app.

Restart your client and the tools are live.

Manual configuration

Add this to your client's MCP config (.mcp.json, .cursor/mcp.json, .windsurf/mcp.json, etc.):

{
  "mcpServers": {
    "feedbug": {
      "command": "npx",
      "args": ["-y", "@feedbug/mcp"],
      "env": {
        "FEEDBUG_API_URL": "https://api.feedbug.app",
        "FEEDBUG_PROJECT_KEY": "pk_your_project_key"
      }
    }
  }
}

Run with Docker

docker build -t feedbug-mcp .
{
  "mcpServers": {
    "feedbug": {
      "command": "docker",
      "args": ["run", "-i", "--rm", "-e", "FEEDBUG_PROJECT_KEY", "feedbug-mcp"],
      "env": {
        "FEEDBUG_PROJECT_KEY": "pk_your_project_key"
      }
    }
  }
}

Environment variables

Variable Required Default Description
FEEDBUG_PROJECT_KEY Yes none Your project key (pk_...), from the Feedbug dashboard.
FEEDBUG_API_URL No https://api.feedbug.app Override the API base URL (self-hosting / staging).

Tools

Every tool accepts either the feedback UUID or the tracker identifier (e.g. PRE-13 on Linear, owner/repo#42 on GitHub).

Tool What it does
feedbug_list_bugs List reported bugs (filter by status or page URL).
feedbug_get_bug Full details: screenshot, viewport, user agent, HTML context.
feedbug_get_html_context DOM context of the clicked element: CSS selector path, framework component path (Vue/React/Angular/Svelte), attributes, ancestors, siblings. This is what lets the agent find the source.
feedbug_get_diagnostics Browser diagnostics: page URL, viewport, user agent, reporter.
feedbug_get_replay Session replay URL (last 30 seconds before the report).
feedbug_add_comment Add a comment to the bug's Linear issue.
feedbug_resolve_bug Mark a bug resolved once it's fixed.

How it works

When a tester clicks a bug, the Feedbug widget snapshots the DOM around the clicked element: the CSS selector path, the framework component name when detectable, the element's attributes and text, plus its ancestors and siblings. That snapshot travels with the Linear ticket.

Through this MCP server, your agent reads that context and maps the bug to the exact file and line, instead of guessing from a vague "it's broken on the dashboard" description.

Links

License

MIT

Recommended Servers

playwright-mcp

playwright-mcp

A Model Context Protocol server that enables LLMs to interact with web pages through structured accessibility snapshots without requiring vision models or screenshots.

Official
Featured
TypeScript
Audiense Insights MCP Server

Audiense Insights MCP Server

Enables interaction with Audiense Insights accounts via the Model Context Protocol, facilitating the extraction and analysis of marketing insights and audience data including demographics, behavior, and influencer engagement.

Official
Featured
Local
TypeScript
Magic Component Platform (MCP)

Magic Component Platform (MCP)

An AI-powered tool that generates modern UI components from natural language descriptions, integrating with popular IDEs to streamline UI development workflow.

Official
Featured
Local
TypeScript
VeyraX MCP

VeyraX MCP

Single MCP tool to connect all your favorite tools: Gmail, Calendar and 40 more.

Official
Featured
Local
graphlit-mcp-server

graphlit-mcp-server

The Model Context Protocol (MCP) Server enables integration between MCP clients and the Graphlit service. Ingest anything from Slack to Gmail to podcast feeds, in addition to web crawling, into a Graphlit project - and then retrieve relevant contents from the MCP client.

Official
Featured
TypeScript
Kagi MCP Server

Kagi MCP Server

An MCP server that integrates Kagi search capabilities with Claude AI, enabling Claude to perform real-time web searches when answering questions that require up-to-date information.

Official
Featured
Python
Neon Database

Neon Database

MCP server for interacting with Neon Management API and databases

Official
Featured
Exa Search

Exa Search

A Model Context Protocol (MCP) server lets AI assistants like Claude use the Exa AI Search API for web searches. This setup allows AI models to get real-time web information in a safe and controlled way.

Official
Featured
Qdrant Server

Qdrant Server

This repository is an example of how to create a MCP server for Qdrant, a vector search engine.

Official
Featured
E2B

E2B

Using MCP to run code via e2b.

Official
Featured