vibe-live-debugger
v1.0.2
Published
Captures runtime errors from your app (server and browser) and exposes them to Cursor via MCP - so you never have to paste stack traces manually again.
Maintainers
sahilpradhanReadme
vibe-live-debugger
Stop pasting stack traces into Cursor. Your AI agent can just ask.
vibe-live-debugger is an MCP server for Cursor that automatically captures runtime errors from your app — server-side and browser-side — and makes them available to your AI agent as a tool call. When something crashes, you don't screenshot it, copy it, or explain it. You just say "check my errors" (or your agent checks on its own), and it gets the full picture: the error message, stack trace, and the context around it.
Before / After
Before:
- Something breaks in your app
- You open DevTools, find the error, copy the stack trace
- You paste it into your AI agent's chat
- You explain what you were doing when it happened
- The agent fixes it
After:
- Something breaks in your app
- A desktop notification tells you
- You ask your agent to fix it
- The agent already has the error, the stack trace, and the context. It fixes it.
What it catches
| Error type | Where |
|---|---|
| Uncaught exceptions & unhandled rejections | Node / Express server |
| Express middleware errors | Express server |
| API route errors | Next.js App Router |
| Render-time crashes | React components (browser) |
| Event handler errors | Browser (onClick, etc.) |
| Unhandled promise rejections | Browser |
| Broken resources (images, scripts) | Browser |
| console.error() calls | Browser (opt-in) |
Not covered yet: build/compile-time errors (TypeScript errors, bundler failures). These show up in your terminal directly when the dev server fails to start — this tool covers runtime errors in a running app.
Install
There are 3 steps: install the package, add a couple lines to your app, and tell Cursor about it.
Step 1: Install the package
In your project folder, run:
npm install vibe-live-debuggerStep 2: Add error capture to your app
This is the part that watches for crashes and reports them. Pick whichever matches your project:
If you're using Express, open your main server file (usually app.js or server.js) and add these two lines:
import { autoInstrument } from "vibe-live-debugger/client";
autoInstrument(app);Put autoInstrument(app) right after you create your Express app with const app = express().
If you're using Next.js, follow the Next.js setup section below — it takes a couple more steps than Express.
Step 3: Tell Cursor this tool exists
Cursor needs to know it can use this tool. This is a one-time setup per computer (or per project, your choice).
1. In Cursor, open Settings → MCP (or press Ctrl+Shift+P and search for "MCP").
2. Find the option to open your MCP config file — it's usually at ~/.cursor/mcp.json for all projects, or .cursor/mcp.json inside your project folder for just that project.
3. Open that file and add this inside it:
{
"mcpServers": {
"vibe-live-debugger": {
"command": "npx",
"args": ["vibe-live-debugger"]
}
}
}If the file already has other servers listed, just add "vibe-live-debugger": { ... } as a new entry alongside them, don't replace the whole file.
4. Save the file and fully restart Cursor (close it completely, then reopen)
That's it — setup is done. From now on, you never touch this config again for this project.
Next.js setup
Wrap your root layout with a small client provider:
// components/VibeDebugProvider.jsx
"use client";
import { initBrowserCapture } from "vibe-live-debugger/client/browserCapture";
import { VibeDebugErrorBoundary } from "vibe-live-debugger/client/ErrorBoundary";
if (typeof window !== "undefined") {
initBrowserCapture();
}
export default function VibeDebugProvider({ children }) {
return <VibeDebugErrorBoundary>{children}</VibeDebugErrorBoundary>;
}// app/layout.jsx
import VibeDebugProvider from "@/components/VibeDebugProvider";
export default function RootLayout({ children }) {
return (
<html>
<body>
<VibeDebugProvider>{children}</VibeDebugProvider>
</body>
</html>
);
}Wrap individual API routes for extra context (request body/query/params):
import { withDebugCapture } from "vibe-live-debugger/client/nextjs";
export const GET = withDebugCapture(async (req) => {
// your route logic
});Using it
Run your app like normal (npm run dev). When something crashes, a desktop notification appears. Go back to Cursor and ask it to check your errors (or just describe the bug — it'll often check on its own). It calls get_recent_runtime_errors and gets everything it needs to fix the problem, no copy-pasting required.
Ask it to clear the log with clear_errors once you're done with a debugging session.
Updating
When you run npm install vibe-live-debugger@latest to get a newer version, restart Cursor afterward. Cursor keeps the MCP server running in the background once it starts, so it won't pick up the update until it's restarted — even though the new code is already installed on disk.
Privacy
Everything runs locally. Errors are stored in ~/.vibe-debug/errors.json on your own machine — nothing is sent to any external server. Sensitive fields (cookies, tokens, passwords, auth headers) are automatically stripped from captured request context before they're stored.
License
ISC