How to Use MCP Inspector’s UI Tabs for Effective Local Testing

MCP Inspector provides a clear UI to view and interact with the server's available tools, prompts, and resources. Unlike generic API testing platforms, it is tailored to the Model Context Protocol (MCP), offering native support for inspecting each part of the protocol. This article outlines the key interface features and explains how they work internally.

What’s Happening Behind the Scenes

The Inspector communicates with our MCP server over a WebSocket proxy, which wraps the low-level transport (like stdio or streamable-http) into a live browser-based session. As we interact with the UI, it sends JSON-RPC messages to the server based on our actions and displays the responses in real time.

Tools tab uses schema from the server manifest to generate parameter input fields. When a tool is run, Inspector constructs a tool-use JSON-RPC request and sends it via the proxy to the MCP server. The server responds with tool-response, which is displayed in the UI¹. Example: Selecting a tool called generateSummary with text: "hello world" will create a payload:

{ "method": "tool-use", "params": { "tool": "generateSummary", "input": { "text": "hello world" } } }

The corresponding response may look like:

{ "result": { "output": "Summary: hello world" } }
Prompts tab fetches prompt templates, shows required variables, and renders sample output once variables are filled. Internally, this triggers a prompt-preview call to simulate how prompts would be rendered in context². Example: Choosing a prompt like emailReplyPrompt and filling in sender: "Alice", message: "Thanks for your note!" results in:

{ "method": "prompt-preview", "params": { "prompt": "emailReplyPrompt", "variables": { "sender": "Alice", "message": "Thanks for your note!" } } }
Resources tab inspects entries like URLs, file descriptors, or in-memory data objects. Inspector may call resource-read or subscribe to resource updates if applicable³. Example: Inspecting a URL-based resource might issue:

{ "method": "resource-read", "params": { "resource": "data.csv" } }
Notifications/logs stream stderr and server-side debug output, especially for prompt rendering errors or tool exceptions⁴. This is useful for tracing failures during test runs. Example: A failed prompt due to a missing variable might stream:

[stderr] Error: Missing variable 'username' in prompt 'welcomeEmail'

To show proper use of MCP Inspector in your TypeScript example, you should include how the Inspector is initialized in your tool development workflow. Since the current example shows only the tool handler (generateSummary), we now need to add a corresponding example of:

How to start and configure the MCP Inspector
How the tool is registered and becomes visible in the Inspector UI

Writing a Tool in TypeScript

Try a complete example of an MCP tool implementation using TypeScript, including how to initialize the server so MCP Inspector can detect and interact with your tool:

// server.ts
import { createServer } from "@mcp/server";
import { ToolHandler, ToolResponse } from "@mcp/types";

// Define tool input schema
interface SummaryInput {
  text: string;
  maxLength?: number;
}

// Tool implementation
const generateSummary: ToolHandler<SummaryInput> = async (input) => {
  const { text, maxLength = 100 } = input;

  if (typeof text !== "string" || text.trim() === "") {
    return ToolResponse.error("Input 'text' must be a non-empty string.");
  }

  const cleaned = text.trim().replace(/\s+/g, " ");
  const summary =
    cleaned.length <= maxLength
      ? cleaned
      : cleaned.slice(0, maxLength).trim() + "...";

  return ToolResponse.success({ summary });
};

// Create an MCP server and register the tool
const server = createServer({
  tools: {
    generateSummary,
  },
});

// Start the server for use with MCP Inspector
server.listen();
console.log("MCP server is running. Connect via Inspector to test.");

Once this server is running, open the MCP Inspector and connect to the WebSocket proxy URL exposed by your server. You should see generateSummary listed under the Tools tab. You can now test it interactively, send different inputs, and inspect live responses—all without writing extra scripts⁵.

My Thoughts

The UI is especially helpful when testing different prompts or tools quickly. Instead of writing client scripts or setting up test harnesses, you can work directly in the browser and see results live. This saves time and gives better visibility into how our MCP server works.

Using MCP Inspector to Test Tools, Prompts, and Resources

What’s Happening Behind the Scenes

Writing a Tool in TypeScript

My Thoughts

References

What’s Happening Behind the Scenes

Writing a Tool in TypeScript

My Thoughts

References

Footnotes