# MCP Inspector

A live view of one MCP server connection: the handshake fills in its tools, resources and prompts, JSON-RPC calls travel to the server and back and land as latency bars, and request count, p50, p95 and errors roll as responses arrive. Open a tool to call it, or a row to read its JSON.

- Page and source: https://uibrik.com/components/mcp-inspector
- Install (Pro, needs a license key, see https://uibrik.com/docs/pro): `npx shadcn@latest add @uibrik-pro/mcp-inspector`
- Packages: none beyond React
- Import: `import { McpInspector } from "@/components/uibrik/mcp-inspector/mcp-inspector"`

Where to use the MCP Inspector React component:

- **MCP server docs**: Shows what a server exposes and how fast it answers, in a few seconds and without a video. Pairs with [MCP Connectors](https://uibrik.com/components/mcp-connectors) and [Terminal Demo](https://uibrik.com/components/terminal-demo).
- **Developer tools**: Drive it from a real client with `active` and `messages` to debug a connection: which call failed, which one was slow. Pairs with [Agent Trace](https://uibrik.com/components/agent-trace) and [Tool Call](https://uibrik.com/components/tool-call).
- **AI landing pages**: A session that plays itself explains the protocol better than a diagram. Pairs with [Agent Trace](https://uibrik.com/components/agent-trace).

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| defaultTab | `"traffic" \| "tools" \| "resources" \| "prompts"` | `"traffic"` | Tab shown first. |
| transport | `"stdio" \| "http" \| "sse"` | `"stdio"` | Transport shown under the server name (demo only, part of `server`). |
| color | `string` | `"#5b7bd6"` | Colour of the travelling dots, latency bars and the tool being called. |
| server | `{ name; version?; logo?: ReactNode; transport?: "stdio" \| "http" \| "sse"; protocol? }` |  | The server in the header. |
| messages | `McpMessage[]` |  | The session's traffic, in order, starting with the handshake. |
| McpMessage | `{ method; params?; result?; error?; ms; notification? }` |  | One request and its response. error marks it failed; notification has no response. |
| tools | `{ name; description?; params?: { name; type; required?; description? }[]; calls?; example? }[]` |  | Shown once tools/list lands. calls adds to the live count; example fills the Call form. |
| resources | `{ uri; name?; mimeType?; size? }[]` |  | Shown once resources/list lands. |
| prompts | `{ name; description?; args? }[]` |  | Shown once prompts/list lands. |
| active | `number` |  | How many messages have finished, to drive it from a real connection. The next one shows in flight. |
| onCall | `(tool, args) => unknown \| Promise<unknown>` |  | Runs a tool from its Call button. Return the result or throw an error; the call is added to the traffic with its real time. |
| tab / onTabChange | `"traffic" \| "tools" \| "resources" \| "prompts"` |  | Controlled tab. |
| client | `{ name; logo?: ReactNode }` | `{ name: "Client" }` | The app on the other end of the wire. |
| className | `string` |  | Classes for the card. |