Using VibeCheck with AI Coding Assistants
Orynbasar Kosbay·The Copy-Paste Problem
You've captured a perfect bug report with VibeCheck — screen recording, console logs, network requests, user actions. Now you want your AI coding assistant to help fix the bug. What do you do?
Typically, you'd open the bug report, manually copy the relevant console errors, paste them into your AI tool, describe the context, copy some network response data, paste that too... It works, but it's tedious and you inevitably lose context along the way.
Enter the MCP Server
The Model Context Protocol (MCP) is a standard that lets AI tools connect to external data sources. The VibeCheck MCP server gives AI assistants direct, structured access to your bug reports.
Instead of copy-pasting, you just share a track URL and your AI assistant can:
- Read all console logs (errors, warnings, info)
- Inspect failed network requests with full response bodies
- See the user action timeline
- Check web vitals and performance metrics
Setting It Up
Install the MCP server globally:
npm install -g @anthropic/vibecheck-mcp
Then add it to your AI tool's MCP configuration. For Claude Code, add this to your settings:
{
"mcpServers": {
"vibecheck": {
"command": "vibecheck-mcp",
"args": []
}
}
}
That's it. Your AI assistant now has access to VibeCheck's tools.
How It Works in Practice
Here's a typical workflow:
- A bug is reported via VibeCheck — you get a track URL
- You share the URL with your AI assistant: "Look at this bug report and help me fix it: https://app.vibecheck-qa.com/tracks/abc123"
- The AI fetches the track data, reads the console errors, checks the network requests, and understands the user's steps
- It suggests a fix based on the actual error data — not your paraphrased description of it
The AI sees the same structured data you see in the VibeCheck dashboard. No context is lost in translation.
Available Tools
The MCP server exposes several tools:
| Tool | What It Does |
|---|---|
get_track | Full bug report with all sections |
analyze_track_errors | Focused view of errors and failed requests |
get_track_network | Network request analysis with timing data |
get_track_performance | Web vitals and performance metrics |
get_track_actions | User action timeline and repro steps |
Each tool returns structured, formatted data that AI assistants can reason about effectively.
Why This Matters
AI coding assistants are powerful, but they're only as good as the context you give them. By connecting VibeCheck directly to your AI tools, you eliminate the manual context-transfer step and let the AI work with the full, structured bug report data.
The result: faster debugging, better fix suggestions, and less time spent describing problems that have already been captured.
Get Started
Check out the MCP Server documentation for detailed setup instructions, or install the package directly from npm. The MCP server is free and open source.