Model Context Protocol（MCP）是一个用于定义和交互 AI 模型上下文的协议，而 @modelcontextprotocol/inspector 是一个强大的开发工具，提供了直观的 Web 界面（MCP Inspector Client，MCPI）和代理服务器（MCP Proxy，MCPP），用于测试和调试 MCP 服务器。本文将以最简洁的方式介绍如何快速上手使用 MCP Inspector，适合初学者快速入门。

什么是 MCP Inspector？

MCP Inspector 是一个基于 React 的 Web 界面和 Node.js 代理服务器的工具，用于：

  • 测试 MCP 服务器的功能（如资源、工具和提示）。
  • 支持多种传输方式（stdio、SSE、streamable-http）。
  • 无需本地安装，通过 npx 即可运行。
  • 提供 CLI 和 Web 界面两种交互方式，适合开发和调试。

快速开始

安装与运行

无需手动安装，直接使用 npx 运行 Inspector，连接到你的 MCP 服务器（假设服务器代码在 McpServer.ts，McpServer.ts在执行命令的当前目录下面，文件的路径是以当前代码的执行目录开始的）：

 npx @modelcontextprotocol/inspector npx tsx McpServer.ts

  • 执行效果：

  • 默认行为：

  • 自定义端口：

 CLIENT_PORT=8080 SERVER_PORT=9000 npx @modelcontextprotocol/inspector npx tsx McpServer.ts

使用 Web 界面

启动

访问界面 ：运行命令后，打开浏览器访问 http://localhost:6274/?MCP_PROXY_AUTH_TOKEN=ce0e0c97d3e4a6b8946a3581b9dd604d92b92c1c371bf6d5dc9373599e82a33d。需要完整的路径，填入token，否则无法连接。

连接失败的页面：

连接服务器：点击左侧"Connect"按钮，选择或输入服务器地址。

Resources

  • Resources：查看服务器提供的资源，点击"List Resources"与"List Templates"显示列表，点击具体资源查看内容。

Rsources的使用

import {
  McpServer,
  ResourceTemplate,
} from "@modelcontextprotocol/sdk/server/mcp.js";
import type { Variables } from "@modelcontextprotocol/sdk/shared/uriTemplate.js";
import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";

// 1. 创建服务器实例
const server = new McpServer(
  {
    name: "internal-tools",
    version: "1.0.0",
  },
  {
    capabilities: {
      tools: {},
    },
  },
);

server.registerResource(
  "greeting",
  new ResourceTemplate("greeting://{name}", { list: undefined }),
  {
    title: "Greeting Resource", // Display name for UI
    description: "Dynamic greeting generator",
    mimeType: "text/plain",
  },
  async (uri: URL, variables: Variables) => ({
    contents: [
      {
        uri: uri.href,
        text: `Hello, ${Array.isArray(variables.name) ? variables.name[0] : (variables.name ?? "world")}!`,
      },
    ],
  }),
);

// 4. 通过 Stdio 连接
const transport = new StdioServerTransport();
await server.connect(transport);

Tools

Tools：列出可用工具，输入参数后调用测试。

Tools的调用

server.registerTool(
  "add",
  {
    title: "Addition Tool",
    description: "Add two numbers",
    inputSchema: {
      a: z.number(),
      b: z.number(),
    },
  },
  async ({ a, b }) => ({
    content: [{ type: "text", text: String(a + b) }],
  }),
);

调用方式与即结果：

Prompts

Prompts：查看和测试服务器的提示模板。

Prompts调用：

server.registerPrompt(
  "team-greeting",
  {
    title: "Team Greeting",
    description: "Generate a greeting for team members",
    argsSchema: {
      department: completable(z.string(), (value) =>
        ["engineering", "sales", "marketing", "support"].filter((d) =>
          d.startsWith(value),
        ),
      ),
      name: completable(z.string(), (value, context) => {
        const department = context?.arguments?.department;

        if (department === "engineering") {
          return ["Alice", "Bob", "Charlie"].filter((n) =>
            n.startsWith(value),
          );
        }

        if (department === "sales") {
          return ["David", "Eve", "Frank"].filter((n) => n.startsWith(value));
        }

        if (department === "marketing") {
          return ["Grace", "Henry", "Iris"].filter((n) => n.startsWith(value));
        }

        return ["Guest"].filter((n) => n.startsWith(value));
      }),
    },
  },
  ({ department, name }) => ({
    messages: [
      {
        role: "assistant",
        content: {
          type: "text",
          text: `Hello ${name}, welcome to the ${department} team!`,
        },
      },
    ],
  }),
);

导出配置

导出配置：通过“Server Entry”或“Servers File”生成配置文件，方便复用。下面是复制Servers File的样例，可以添加到自己的mcp的json配置中。

{
    "mcpServers": {
        "default-server": {
            "command": "npx",
            "args": [
                "tsx",
                "McpServer.ts"
            ],
            "env": {
                "HOME": "/Users/a0000",
                "LOGNAME": "a0000",
                "PATH": "/Users/a0000/.npm/_npx/5a9d879542beca3a/node_modules/.bin:/Users/a0000/Desktop/learn/my-custom-mcp/src/node_modules/.bin:/Users/a0000/Desktop/learn/my-custom-mcp/node_modules/.bin:/Users/a0000/Desktop/learn/node_modules/.bin:/Users/a0000/Desktop/node_modules/.bin:/Users/a0000/node_modules/.bin:/Users/node_modules/.bin:/node_modules/.bin:/usr/local/lib/node_modules/npm/node_modules/@npmcli/run-script/lib/node-gyp-bin:/Users/a0000/.antigravity/antigravity/bin:/opt/homebrew/bin:/opt/homebrew/sbin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Users/a0000/.antigravity/antigravity/bin:/Users/a0000/Library/pnpm:/opt/homebrew/bin:/opt/homebrew/sbin",
                "SHELL": "/bin/zsh",
                "TERM": "xterm-256color",
                "USER": "a0000"
            }
        }
    }
}

使用 CLI 模式

CLI 模式适合自动化测试或脚本化操作，需指定 --cli 和方法。

列出资源：

npx @modelcontextprotocol/inspector --cli npx tsx McpServer.ts --method resources/list  
{
  "resources": []
}

调用工具：

npx @modelcontextprotocol/inspector --cli npx tsx McpServer.ts --method tools/call --tool-name add --tool-arg a=8 b=7 
{
  "content": [
    {
      "type": "text",
      "text": "15"
    }
  ]
}

远程服务器调用：

npx @modelcontextprotocol/inspector --cli https://my-mcp-server.example.com --method tools/list

配置多个服务器

通过 JSON 配置文件管理多个 MCP 服务器：

 {
   "mcpServers": {
     "myserver": {
       "command": "npx",
       "args": [
             "tsx",
             "McpServer.ts"
       ],
       "env": { "key": "value" }
     }
   }
 }

启动并指定服务器：

npx @modelcontextprotocol/inspector --config config.json --server myserver

注意事项

  • 端口冲突：通过 CLIENT_PORT 和 SERVER_PORT 自定义端口。
  • web地址要带token：没有token会无法正常连接；
  • 远程调试：确保远程服务器支持 SSE 或 streamable-http，并检查 SDK 版本兼容性。
  • 调试日志：确保服务器日志输出到 stderr，避免干扰 stdout 的 MCP 协议通信。
  • 更多帮助：访问 Model Context Protocol 官网 查看详细文档。

总结

MCP Inspector 是一个简单而强大的工具，通过 Web 界面或 CLI 即可快速测试和调试 MCP 服务器。无论是本地开发还是远程部署，只需几行命令即可上手。开始你的 MCP 之旅吧！

import {
  McpServer,
  ResourceTemplate,
} from "@modelcontextprotocol/sdk/server/mcp.js";
import { completable } from "@modelcontextprotocol/sdk/server/completable.js";
import type { Variables } from "@modelcontextprotocol/sdk/shared/uriTemplate.js";
import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
import { z } from "zod";

// 1. 创建服务器实例
const server = new McpServer(
  {
    name: "internal-tools",
    version: "1.0.0",
  },
  {
    capabilities: {
      tools: {},
    },
  },
);

server.registerResource(
  "greeting",
  new ResourceTemplate("greeting://{name}", { list: undefined }),
  {
    title: "Greeting Resource", // Display name for UI
    description: "Dynamic greeting generator",
    mimeType: "text/plain",
  },
  async (uri: URL, variables: Variables) => ({
    contents: [
      {
        uri: uri.href,
        text: `Hello, ${Array.isArray(variables.name) ? variables.name[0] : (variables.name ?? "world")}!`,
      },
    ],
  }),
);

server.registerTool(
  "add",
  {
    title: "Addition Tool",
    description: "Add two numbers",
    inputSchema: {
      a: z.number(),
      b: z.number(),
    },
  },
  async ({ a, b }) => ({
    content: [{ type: "text", text: String(a + b) }],
  }),
);

server.registerPrompt(
  "team-greeting",
  {
    title: "Team Greeting",
    description: "Generate a greeting for team members",
    argsSchema: {
      department: completable(z.string(), (value) =>
        ["engineering", "sales", "marketing", "support"].filter((d) =>
          d.startsWith(value),
        ),
      ),
      name: completable(z.string(), (value, context) => {
        const department = context?.arguments?.department;

        if (department === "engineering") {
          return ["Alice", "Bob", "Charlie"].filter((n) =>
            n.startsWith(value),
          );
        }

        if (department === "sales") {
          return ["David", "Eve", "Frank"].filter((n) => n.startsWith(value));
        }

        if (department === "marketing") {
          return ["Grace", "Henry", "Iris"].filter((n) => n.startsWith(value));
        }

        return ["Guest"].filter((n) => n.startsWith(value));
      }),
    },
  },
  ({ department, name }) => ({
    messages: [
      {
        role: "assistant",
        content: {
          type: "text",
          text: `Hello ${name}, welcome to the ${department} team!`,
        },
      },
    ],
  }),
);

// 4. 通过 Stdio 连接
const transport = new StdioServerTransport();
await server.connect(transport);

# 服务器 # 运维
Logo
openEuler 社区

openEuler 是由开放原子开源基金会孵化的全场景开源操作系统项目，面向数字基础设施四大核心场景（服务器、云计算、边缘计算、嵌入式），全面支持 ARM、x86、RISC-V、loongArch、PowerPC、SW-64 等多样性计算架构

更多推荐

IP&&端口&&本机回环ip&&局域网ip&&网段掩码&&TCP&&UDP&&Socket

简单理解为：IP 地址负责找到“哪台设备/哪块网卡”，端口负责找到这台设备上的“哪个程序/服务”。一台电脑上可能同时运行很多网络服务：浏览器代理服务数据库服务网页服务器机器人控制程序摄像头图像服务ROS 通信节点这些程序都在同一台电脑上，光靠 IP 地址还不够区分，所以需要端口号。因此127.0.0.1:7890就代表：访问本机上监听 7890 端口的那个程序。其中，127.0.0.1 永远代表“

avatar openEuler 社区
cover

罗福莉 3.5 小时深度访谈：AI 已经不是“大模型战争”，而是 Agent 操作系统战争

avatar openEuler 社区
cover

第三章：数据窃听与中间人攻击 —— 深入网络通信

avatar openEuler 社区