Add to your app

Let your coding agent read requests, errors, and selected state from your running app. No separate MCP server.

This runs in your own app, only during development by default. It sends no telemetry and has no connection to this demo.

1. Install

Terminal

npm install https://tab-debug-dhairya.vercel.app/downloads/dhairya-t-tab-debug-0.3.0.tgz

v0.3.0 · MIT · Installs the release archive directly. It isn’t on the npm registry yet.

2. Wrap your layout

app/layout.tsx

import { TabDebug } from '@dhairya-t/tab-debug/next';

export default function RootLayout({ children }: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body><TabDebug>{children}</TabDebug></body>
    </html>
  );
}

Keep your existing styles and providers. TabDebug adds no visible UI and only activates in development.

It records subsequent browser fetches, uncaught errors, and unhandled rejections. Moving to another pathname clears the previous page’s debugging context.

3. Choose the state to share

Your client component

import { useDebugState } from '@dhairya-t/tab-debug/react';

// Inside your existing client component:
useDebugState('Search', {
  query,
  resultCount: results.length,
  loading,
});

The hook uses your existing variables. Share only fields useful for debugging. Request bodies, headers, and query strings aren’t recorded.

4. Connect an agent

Start your development server, then open the app in a WebMCP-capable browser agent. Replace the URL below with your local address.

Agent terminal

npx agent-browser open http://localhost:3000
npx agent-browser webmcp list
npx agent-browser webmcp invoke inspect_state --params '{}'

Native WebMCP is experimental. Use an agent-browser browser build with WebMCP enabled. Browser setup ↗

Tool	Reads
`get_page_context`	Current page and error counts
`inspect_requests`	Request paths, statuses, duration
`inspect_errors`	Captured errors
`inspect_state`	The values you chose above
`inspect_timeline`	Events in order

Optional: reproduce a race

The debugging tools work with the setup above. Replaying responses and generating a test also require an adapter around your application’s async handler.

Replay integration example

Browser requests only: this component doesn’t capture server logs, XMLHttpRequest, or errors already handled by a React boundary. Full API and React-only setup ↗