MCP极简入门：@modelcontextprotocol/inspector 如何使用

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在执行命令的当前目录下面，文件的路径是以当前代码的执行目录开始的）：

bash 复制代码

 npx @modelcontextprotocol/inspector npx tsx McpServer.ts

执行效果：
默认行为：
- 启动 Web 界面：http://localhost:6274
- 启动代理服务器：端口 6277

自定义端口：

ini 复制代码

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

连接远程服务器

若要调试远程 MCP 服务器（如部署在 my-mcp-server.example.com）：

bash 复制代码

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

使用 Web 界面

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

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

核心功能：

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

Rsources的使用：

代码：

javascript 复制代码

 server.registerResource(
   'greeting',
   new ResourceTemplate('greeting://{name}', { list: undefined }),
   {
     title: 'Greeting Resource', // Display name for UI
     description: 'Dynamic greeting generator'
   },
   async (uri, { name }) => ({
     contents: [
       {
         uri: uri.href,
         text: `Hello, ${name}!`
       }
     ]
   })
 )

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

Tools的调用：

代码：

css 复制代码

 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调用：

代码：

javascript 复制代码

 server.registerPrompt(
   'team-greeting',
   {
     title: 'Team Greeting',
     description: 'Generate a greeting for team members',
     argsSchema: {
       department: completable(z.string(), (value) => {
         // Department suggestions
         return ['engineering', 'sales', 'marketing', 'support'].filter((d) => d.startsWith(value))
       }),
       name: completable(z.string(), (value, context) => {
         // Name suggestions based on selected department
         const department = context?.arguments?.['department']
         if (department === 'engineering') {
           return ['Alice', 'Bob', 'Charlie'].filter((n) => n.startsWith(value))
         } else if (department === 'sales') {
           return ['David', 'Eve', 'Frank'].filter((n) => n.startsWith(value))
         } else 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配置中。

json 复制代码

 {
     "mcpServers": {
         "default-server": {
             "command": "npx",
             "args": [
                 "tsx",
                 "McpServer.ts"
             ],
             "env": {
                 "APPDATA": "C:\Users\XXX\AppData\Roaming",
                 "HOMEDRIVE": "C:",
                 "HOMEPATH": "\Users\XXX",
                 "LOCALAPPDATA": "C:\Users\hf\AppData\Local",
                 "PATH": "",
                 "PROCESSOR_ARCHITECTURE": "AMD64",
                 "SYSTEMDRIVE": "C:",
                 "SYSTEMROOT": "C:\Windows",
                 "TEMP": "C:\Users\XXX\AppData\Local\Temp",
                 "USERNAME": "XXX",
                 "USERPROFILE": "C:\Users\XXX",
                 "PROGRAMFILES": "C:\Program Files"
             }
         }
     }
 }

使用 CLI 模式

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

示例

列出资源：

bash 复制代码

 npx @modelcontextprotocol/inspector --cli npx tsx McpServer.ts --method resources/list

调用工具：

bash 复制代码

 npx @modelcontextprotocol/inspector --cli npx tsx McpServer.ts --method tools/call --tool-name add --tool-arg a=8 b=7

远程服务器调用：

bash 复制代码

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

配置多个服务器

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

json 复制代码

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

启动并指定服务器：

arduino 复制代码

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

实用技巧

传输方式：本地用 stdio，远程用 SSE 或 streamable-http。可通过 URL 参数设置：
bash 复制代码
```
 http://localhost:6274/?transport=sse&serverUrl=http://localhost:8787/sse
```

环境变量：传递环境变量给服务器：

bash 复制代码

 npx @modelcontextprotocol/inspector -e key=value node build/index.js

调试日志：确保服务器日志输出到 stderr，避免干扰 stdout 的 MCP 协议通信。
依赖支持：如需额外包（如 pandas），用：
vbscript 复制代码
```
 uv run mcp dev server.py --with pandas
```

注意事项

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

总结

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