---
title: "Debug with the MCP Inspector"
description: "Visual debugging tool integrated into Nuxt DevTools."
canonical_url: "https://mcp-toolkit.nuxt.dev/getting-started/inspector"
---
# Debug with the MCP Inspector

> Visual debugging tool integrated into Nuxt DevTools.

The module includes a built-in integration with the [MCP Inspector](https://github.com/modelcontextprotocol/inspector), a visual debugging tool that allows you to interactively test and debug your MCP server directly from Nuxt DevTools.

<u-color-mode-image alt="MCP Inspector preview" className="w-full,rounded-lg,my-6,grayscale" dark="/mcp-devtools-dark.png" light="/mcp-devtools-light.png">



</u-color-mode-image>

## How to use it

1. **Enable DevTools** - Make sure DevTools are enabled in your `nuxt.config.ts`:```typescript [nuxt.config.ts]
export default defineNuxtConfig({
  modules: ['@nuxtjs/mcp-toolkit'],
  devtools: { enabled: true },
})
```
2. **Launch** - Open Nuxt DevTools and navigate to the **MCP Inspector** tab in the **Server** section, then click **Launch Inspector**. The official inspector is a full-page app, so it opens in a **new browser tab** rather than inside the DevTools panel.
3. **Test** - Use the inspector to browse tools, resources, and prompts, test them with custom parameters, and view request/response history.

The inspector automatically connects to your MCP server endpoint with the correct configuration - no setup needed. After launch, the DevTools tab keeps an **Open Inspector** link if you closed the window.

## Why use it?

The inspector provides a visual interface to:

- Browse all available tools, resources, and prompts
- Test tools with custom parameters and see responses
- View request/response history for debugging
- Debug connection issues and errors

It's the easiest way to test and validate your MCP server during development.

## Configuration

By default, the inspector uses ports `6274` (UI) and `6277` (proxy). To customize them:

<code-group>

```bash [pnpm]
CLIENT_PORT=8080 SERVER_PORT=9000 pnpm dev
```

```bash [npm]
CLIENT_PORT=8080 SERVER_PORT=9000 npm run dev
```

```bash [yarn]
CLIENT_PORT=8080 SERVER_PORT=9000 yarn dev
```

```bash [bun]
CLIENT_PORT=8080 SERVER_PORT=9000 bun dev
```

</code-group>

Launch always downloads `@modelcontextprotocol/inspector` from `https://registry.npmjs.org`, so a private npm registry in your user `.npmrc` cannot 401 the install. Override with `MCP_INSPECTOR_REGISTRY` if you need a mirror.

If your MCP endpoint requires authentication headers, configure them in `nuxt.config.ts` before launching the inspector:

```ts [nuxt.config.ts]
const token = process.env.MCP_TOKEN

export default defineNuxtConfig({
  mcp: {
    inspector: {
      headers: {
        Authorization: token ? `Bearer ${token}` : undefined,
      },
    },
  },
})
```

These headers are passed only to the local Inspector process and are excluded from the MCP server's runtime configuration.

For advanced configuration options, see the [MCP Inspector documentation](https://github.com/modelcontextprotocol/inspector).


## Sitemap

See the full [sitemap](https://mcp-toolkit.nuxt.dev/sitemap.md) for all pages.