121 Pro components and page blocks

Get Pro
uibrik

Updated

MCP Inspector

Pro

Preview

Customize

Traffic
stdio
Color

Installation

Pro

MCP Inspector is a Pro component

Sign in to see the source, or install it with a license key. The live preview and props above are free to explore.

Sign inGet Pro

Install with a key

  1. Add the Pro registry to components.json:
    components.json
    {
  "registries": {
    "@uibrik-pro": {
      "url": "https://uibrik.com/r/pro/{name}.json",
      "headers": { "Authorization": "Bearer ${UIBRIK_LICENSE}" }
    }
  }
}
  2. Put your key in .env.local and add that file to .gitignore:
    .env.local
    UIBRIK_LICENSE=your-license-key
  3. Install it:
    Terminal
    npx shadcn@latest add @uibrik-pro/mcp-inspector

Usage

import { McpInspector } from "@/components/uibrik/mcp-inspector/mcp-inspector";​const tools = [  {    name: "search_repositories",    description: "Search GitHub repositories",    params: [      { name: "query", type: "string", required: true, description: "Search query" },      { name: "perPage", type: "number", description: "Results per page" },    ],    calls: 14,    example: { query: "mcp server language:typescript", perPage: 10 },  },  {    name: "get_file_contents",    description: "Read a file or directory from a repository",    params: [      { name: "owner", type: "string", required: true },      { name: "repo", type: "string", required: true },      { name: "path", type: "string", required: true },    ],    calls: 22,    example: { owner: "acme", repo: "web", path: "src/app/layout.tsx" },  },  // …6 more];​const resources = [  { uri: "repo://acme/web/contents/README.md", name: "README", mimeType: "text/markdown", size: 6210 },  { uri: "repo://acme/web/contents/package.json", name: "Package manifest", mimeType: "application/json", size: 2380 },  // …3 more];​const prompts = [  { name: "triage_issue", description: "Label and prioritise a new issue", args: ["owner", "repo", "issue_number"] },  { name: "review_pull_request", description: "Review a PR for bugs and style", args: ["owner", "repo", "pull_number"] },  // …1 more];​<McpInspector  server={{ name: … }}  messages={[…]}  defaultTab="traffic"  transport="stdio"  color="#5b7bd6"  tools={tools}  resources={resources}  prompts={prompts}  client={{ name: "Client" }}  onCall={(tool, args) => {}}  // McpMessage={{ method: …, ms: … }}  // active={0}  // tab="traffic"  // onTabChange="traffic"/>

Where to use MCP Inspector

  • 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 and 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 and Tool Call

  • AI landing pages

    A session that plays itself explains the protocol better than a diagram.

    Pairs with Agent Trace

Props

McpInspector
defaultTab
Type "traffic" | "tools" | "resources" | "prompts"
"traffic"
Tab shown first.
transport
Type "stdio" | "http" | "sse"
"stdio"
Transport shown under the server name (demo only, part of `server`).
color
Type string
"#5b7bd6"
Colour of the travelling dots, latency bars and the tool being called.
serverrequired
Type { name; version?; logo?: ReactNode; transport?: "stdio" | "http" | "sse"; protocol? }
–
The server in the header.
messagesrequired
Type McpMessage[]
–
The session's traffic, in order, starting with the handshake.
McpMessage
Type { method; params?; result?; error?; ms; notification? }
–
One request and its response. error marks it failed; notification has no response.
tools
Type { 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
Type { uri; name?; mimeType?; size? }[]
–
Shown once resources/list lands.
prompts
Type { name; description?; args? }[]
–
Shown once prompts/list lands.
active
Type number
–
How many messages have finished, to drive it from a real connection. The next one shows in flight.
onCall
Type (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
Type "traffic" | "tools" | "resources" | "prompts"
–
Controlled tab.
client
Type { name; logo?: ReactNode }
{ name: "Client" }
The app on the other end of the wire.
className
Type string
–
Classes for the card.