Skip to content

03-ui-debugging-workflows-tools-resources-prompts.md

Latest commit

 

History

History
184 lines (140 loc) · 5.81 KB

03-ui-debugging-workflows-tools-resources-prompts.md

File metadata and controls

184 lines (140 loc) · 5.81 KB
layout default
title Chapter 3: UI Debugging Workflows: Tools, Resources, Prompts
nav_order 3
parent MCP Inspector Tutorial

Chapter 3: UI Debugging Workflows: Tools, Resources, Prompts

Welcome to Chapter 3: UI Debugging Workflows: Tools, Resources, Prompts. In this part of MCP Inspector Tutorial: Debugging and Validating MCP Servers, you will build an intuitive mental model first, then move into concrete implementation details and practical production tradeoffs.

The UI is optimized for rapid exploratory debugging across tools, resources, prompts, sampling, and request history.

Learning Goals

  • validate capability discovery quickly after connecting
  • run tool calls with structured argument payloads
  • inspect response payloads and error output in a repeatable way
  • export server entries for reuse in client config files

Recommended Debug Loop

  1. run tools/list, inspect parameter schemas
  2. execute one low-risk tool call with explicit arguments
  3. run resources/list and fetch a small resource payload
  4. run prompts/list and test one prompt path
  5. export a Server Entry or full mcp.json for downstream clients

UI-to-Config Handoff

Use Inspector's "Server Entry" and "Servers File" export buttons to avoid manual config drift when moving from local debug to tools like Claude Code or Cursor.

Source References

Summary

You now have a practical, repeatable UI workflow for MCP server debugging.

Next: Chapter 4: CLI Mode, Automation, and CI Loops

Depth Expansion Playbook

Source Code Walkthrough

client/bin/start.js

The delay function in client/bin/start.js handles a key part of this chapter's functionality:

const DEFAULT_MCP_PROXY_LISTEN_PORT = "6277";

function delay(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms, true));
}

function getClientUrl(port, authDisabled, sessionToken, serverPort) {
  const host = process.env.HOST || "localhost";
  const baseUrl = `http://${host}:${port}`;

  const params = new URLSearchParams();
  if (serverPort && serverPort !== DEFAULT_MCP_PROXY_LISTEN_PORT) {
    params.set("MCP_PROXY_PORT", serverPort);
  }
  if (!authDisabled) {
    params.set("MCP_PROXY_AUTH_TOKEN", sessionToken);
  }
  return params.size > 0 ? `${baseUrl}/?${params.toString()}` : baseUrl;
}

async function startDevServer(serverOptions) {
  const {
    SERVER_PORT,
    CLIENT_PORT,
    sessionToken,
    envVars,
    abort,
    transport,
    serverUrl,
  } = serverOptions;
  const serverCommand = "npx";
  const serverArgs = ["tsx", "watch", "--clear-screen=false", "src/index.ts"];

This function is important because it defines how MCP Inspector Tutorial: Debugging and Validating MCP Servers implements the patterns covered in this chapter.

client/bin/start.js

The getClientUrl function in client/bin/start.js handles a key part of this chapter's functionality:

}

function getClientUrl(port, authDisabled, sessionToken, serverPort) {
  const host = process.env.HOST || "localhost";
  const baseUrl = `http://${host}:${port}`;

  const params = new URLSearchParams();
  if (serverPort && serverPort !== DEFAULT_MCP_PROXY_LISTEN_PORT) {
    params.set("MCP_PROXY_PORT", serverPort);
  }
  if (!authDisabled) {
    params.set("MCP_PROXY_AUTH_TOKEN", sessionToken);
  }
  return params.size > 0 ? `${baseUrl}/?${params.toString()}` : baseUrl;
}

async function startDevServer(serverOptions) {
  const {
    SERVER_PORT,
    CLIENT_PORT,
    sessionToken,
    envVars,
    abort,
    transport,
    serverUrl,
  } = serverOptions;
  const serverCommand = "npx";
  const serverArgs = ["tsx", "watch", "--clear-screen=false", "src/index.ts"];
  const isWindows = process.platform === "win32";

  const spawnOptions = {
    cwd: resolve(__dirname, "../..", "server"),

This function is important because it defines how MCP Inspector Tutorial: Debugging and Validating MCP Servers implements the patterns covered in this chapter.

client/bin/start.js

The startDevServer function in client/bin/start.js handles a key part of this chapter's functionality:

}

async function startDevServer(serverOptions) {
  const {
    SERVER_PORT,
    CLIENT_PORT,
    sessionToken,
    envVars,
    abort,
    transport,
    serverUrl,
  } = serverOptions;
  const serverCommand = "npx";
  const serverArgs = ["tsx", "watch", "--clear-screen=false", "src/index.ts"];
  const isWindows = process.platform === "win32";

  const spawnOptions = {
    cwd: resolve(__dirname, "../..", "server"),
    env: {
      ...process.env,
      SERVER_PORT,
      CLIENT_PORT,
      MCP_PROXY_AUTH_TOKEN: sessionToken,
      MCP_ENV_VARS: JSON.stringify(envVars),
      ...(transport ? { MCP_TRANSPORT: transport } : {}),
      ...(serverUrl ? { MCP_SERVER_URL: serverUrl } : {}),
    },
    signal: abort.signal,
    echoOutput: true,
  };

  // For Windows, we need to ignore stdin to simulate < NUL

This function is important because it defines how MCP Inspector Tutorial: Debugging and Validating MCP Servers implements the patterns covered in this chapter.

How These Components Connect

flowchart TD
    A[delay]
    B[getClientUrl]
    C[startDevServer]
    A --> B
    B --> C
Loading