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
  • 执行效果

  • 默认行为

  • 自定义端口

    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 界面

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

    连接失败的页面:

  2. 连接服务器:点击左侧"Connect"按钮,选择或输入服务器地址。

  3. 核心功能

    • 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!`
               }
             }
           ]
         })
       )
  4. 导出配置:通过"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 之旅吧!

相关推荐
小兵张健4 分钟前
武汉拿下 23k offer 经历
java·面试·ai编程
堆栈future33 分钟前
上下文工程(Context-Engineering): AI应用核心技术剖析
llm·ai编程·mcp
吴佳浩3 小时前
Python入门指南-番外-LLM-Fingerprint(大语言模型指纹):从技术视角看AI开源生态的边界与挑战
python·llm·mcp
掉鱼的猫5 小时前
Java MCP 实战:构建跨进程与远程的工具服务
java·openai·mcp
保持学习ing6 小时前
AI--提升效率、驱动创新的核心引擎
低代码·自动化·ai编程
FairyDiana9 小时前
从 "等一下" 到 "马上说":React 牵手 DeepSeek 玩转文本大模型
react.js·ai编程
qiyue7711 小时前
AI编程专栏(二)- Cursor 深度使用指南
ai编程·cursor
qiyue7711 小时前
AI编程专栏(三)- 实战无手写代码,Monorepo结构框架开发
前端·ai编程
程序员陆通11 小时前
独立开发A/B测试实用教程
人工智能·ai编程