Skip to content

Commit 4c22605

Browse files
committed
Merge remote-tracking branch 'upstream/main'
2 parents 8e227bf + ec24f7b commit 4c22605

File tree

96 files changed

+17785
-4211
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

96 files changed

+17785
-4211
lines changed

.github/workflows/main.yml

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,9 @@ jobs:
1414
steps:
1515
- uses: actions/checkout@v4
1616

17+
- name: Check formatting
18+
run: npx prettier --check .
19+
1720
- uses: actions/setup-node@v4
1821
with:
1922
node-version: 18
@@ -22,6 +25,15 @@ jobs:
2225
# Working around https://github.com/npm/cli/issues/4828
2326
# - run: npm ci
2427
- run: npm install --no-package-lock
28+
29+
- name: Check linting
30+
working-directory: ./client
31+
run: npm run lint
32+
33+
- name: Run client tests
34+
working-directory: ./client
35+
run: npm test
36+
2537
- run: npm run build
2638

2739
publish:

.gitignore

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
11
.DS_Store
2-
node_modules
2+
.vscode
3+
.idea
4+
node_modules/
5+
*-workspace/
36
server/build
47
client/dist
58
client/tsconfig.app.tsbuildinfo
69
client/tsconfig.node.tsbuildinfo
10+
cli/build
11+
test-output

.prettierignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,4 @@
11
packages
22
server/build
3+
CODE_OF_CONDUCT.md
4+
SECURITY.md

CLAUDE.md

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
# MCP Inspector Development Guide
2+
3+
## Build Commands
4+
5+
- Build all: `npm run build`
6+
- Build client: `npm run build-client`
7+
- Build server: `npm run build-server`
8+
- Development mode: `npm run dev` (use `npm run dev:windows` on Windows)
9+
- Format code: `npm run prettier-fix`
10+
- Client lint: `cd client && npm run lint`
11+
12+
## Code Style Guidelines
13+
14+
- Use TypeScript with proper type annotations
15+
- Follow React functional component patterns with hooks
16+
- Use ES modules (import/export) not CommonJS
17+
- Use Prettier for formatting (auto-formatted on commit)
18+
- Follow existing naming conventions:
19+
- camelCase for variables and functions
20+
- PascalCase for component names and types
21+
- kebab-case for file names
22+
- Use async/await for asynchronous operations
23+
- Implement proper error handling with try/catch blocks
24+
- Use Tailwind CSS for styling in the client
25+
- Keep components small and focused on a single responsibility
26+
27+
## Project Organization
28+
29+
The project is organized as a monorepo with workspaces:
30+
31+
- `client/`: React frontend with Vite, TypeScript and Tailwind
32+
- `server/`: Express backend with TypeScript
33+
- `bin/`: CLI scripts

CONTRIBUTING.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,13 @@ Thanks for your interest in contributing! This guide explains how to get involve
77
1. Fork the repository and clone it locally
88
2. Install dependencies with `npm install`
99
3. Run `npm run dev` to start both client and server in development mode
10-
4. Use the web UI at http://localhost:5173 to interact with the inspector
10+
4. Use the web UI at http://127.0.0.1:6274 to interact with the inspector
1111

1212
## Development Process & Pull Requests
1313

1414
1. Create a new branch for your changes
15-
2. Make your changes following existing code style and conventions
16-
3. Test changes locally
15+
2. Make your changes following existing code style and conventions. You can run `npm run prettier-check` and `npm run prettier-fix` as applicable.
16+
3. Test changes locally by running `npm test`
1717
4. Update documentation as needed
1818
5. Use clear commit messages explaining your changes
1919
6. Verify all changes work as expected

README.md

Lines changed: 217 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,31 +2,183 @@
22

33
The MCP inspector is a developer tool for testing and debugging MCP servers.
44

5-
![MCP Inspector Screenshot](mcp-inspector.png)
5+
![MCP Inspector Screenshot](https://raw.githubusercontent.com/modelcontextprotocol/inspector/main/mcp-inspector.png)
66

77
## Running the Inspector
88

9+
### Requirements
10+
11+
- Node.js: ^22.7.5
12+
913
### From an MCP server repository
1014

1115
To inspect an MCP server implementation, there's no need to clone this repo. Instead, use `npx`. For example, if your server is built at `build/index.js`:
1216

1317
```bash
14-
npx @modelcontextprotocol/inspector build/index.js
18+
npx @modelcontextprotocol/inspector node build/index.js
1519
```
1620

17-
You can also pass arguments along which will get passed as arguments to your MCP server:
21+
You can pass both arguments and environment variables to your MCP server. Arguments are passed directly to your server, while environment variables can be set using the `-e` flag:
22+
23+
```bash
24+
# Pass arguments only
25+
npx @modelcontextprotocol/inspector node build/index.js arg1 arg2
26+
27+
# Pass environment variables only
28+
npx @modelcontextprotocol/inspector -e key=value -e key2=$VALUE2 node build/index.js
1829

30+
# Pass both environment variables and arguments
31+
npx @modelcontextprotocol/inspector -e key=value -e key2=$VALUE2 node build/index.js arg1 arg2
32+
33+
# Use -- to separate inspector flags from server arguments
34+
npx @modelcontextprotocol/inspector -e key=$VALUE -- node build/index.js -e server-flag
1935
```
20-
npx @modelcontextprotocol/inspector build/index.js arg1 arg2 ...
36+
37+
The inspector runs both an MCP Inspector (MCPI) client UI (default port 6274) and an MCP Proxy (MCPP) server (default port 6277). Open the MCPI client UI in your browser to use the inspector. (These ports are derived from the T9 dialpad mapping of MCPI and MCPP respectively, as a mnemonic). You can customize the ports if needed:
38+
39+
```bash
40+
CLIENT_PORT=8080 SERVER_PORT=9000 npx @modelcontextprotocol/inspector node build/index.js
2141
```
2242

23-
The inspector runs both a client UI (default port 5173) and an MCP proxy server (default port 3000). Open the client UI in your browser to use the inspector. You can customize the ports if needed:
43+
For more details on ways to use the inspector, see the [Inspector section of the MCP docs site](https://modelcontextprotocol.io/docs/tools/inspector). For help with debugging, see the [Debugging guide](https://modelcontextprotocol.io/docs/tools/debugging).
44+
45+
### Servers File Export
46+
47+
The MCP Inspector provides convenient buttons to export server launch configurations for use in clients such as Cursor, Claude Code, or the Inspector's CLI. The file is usually called `mcp.json`.
48+
49+
- **Server Entry** - Copies a single server configuration entry to your clipboard. This can be added to your `mcp.json` file inside the `mcpServers` object with your preferred server name.
50+
51+
**STDIO transport example:**
52+
53+
```json
54+
{
55+
"command": "node",
56+
"args": ["build/index.js", "--debug"],
57+
"env": {
58+
"API_KEY": "your-api-key",
59+
"DEBUG": "true"
60+
}
61+
}
62+
```
63+
64+
**SSE transport example:**
65+
66+
```json
67+
{
68+
"type": "sse",
69+
"url": "http://localhost:3000/events",
70+
"note": "For SSE connections, add this URL directly in Client"
71+
}
72+
```
73+
74+
- **Servers File** - Copies a complete MCP configuration file structure to your clipboard, with your current server configuration added as `default-server`. This can be saved directly as `mcp.json`.
75+
76+
**STDIO transport example:**
77+
78+
```json
79+
{
80+
"mcpServers": {
81+
"default-server": {
82+
"command": "node",
83+
"args": ["build/index.js", "--debug"],
84+
"env": {
85+
"API_KEY": "your-api-key",
86+
"DEBUG": "true"
87+
}
88+
}
89+
}
90+
}
91+
```
92+
93+
**SSE transport example:**
94+
95+
```json
96+
{
97+
"mcpServers": {
98+
"default-server": {
99+
"type": "sse",
100+
"url": "http://localhost:3000/events",
101+
"note": "For SSE connections, add this URL directly in Client"
102+
}
103+
}
104+
}
105+
```
106+
107+
These buttons appear in the Inspector UI after you've configured your server settings, making it easy to save and reuse your configurations.
108+
109+
For SSE transport connections, the Inspector provides similar functionality for both buttons. The "Server Entry" button copies the SSE URL configuration that can be added to your existing configuration file, while the "Servers File" button creates a complete configuration file containing the SSE URL for direct use in clients.
110+
111+
You can paste the Server Entry into your existing `mcp.json` file under your chosen server name, or use the complete Servers File payload to create a new configuration file.
112+
113+
### Authentication
114+
115+
The inspector supports bearer token authentication for SSE connections. Enter your token in the UI when connecting to an MCP server, and it will be sent in the Authorization header. You can override the header name using the input field in the sidebar.
116+
117+
### Security Considerations
118+
119+
The MCP Inspector includes a proxy server that can run and communicate with local MCP processes. The proxy server should not be exposed to untrusted networks as it has permissions to spawn local processes and can connect to any specified MCP server.
120+
121+
### Configuration
122+
123+
The MCP Inspector supports the following configuration settings. To change them, click on the `Configuration` button in the MCP Inspector UI:
124+
125+
| Setting | Description | Default |
126+
| --------------------------------------- | ------------------------------------------------------------------------------------------------------------- | ------- |
127+
| `MCP_SERVER_REQUEST_TIMEOUT` | Timeout for requests to the MCP server (ms) | 10000 |
128+
| `MCP_REQUEST_TIMEOUT_RESET_ON_PROGRESS` | Reset timeout on progress notifications | true |
129+
| `MCP_REQUEST_MAX_TOTAL_TIMEOUT` | Maximum total timeout for requests sent to the MCP server (ms) (Use with progress notifications) | 60000 |
130+
| `MCP_PROXY_FULL_ADDRESS` | Set this if you are running the MCP Inspector Proxy on a non-default address. Example: http://10.1.1.22:5577 | "" |
131+
| `MCP_AUTO_OPEN_ENABLED` | Enable automatic browser opening when inspector starts. Only as environment var, not configurable in browser. | true |
132+
133+
These settings can be adjusted in real-time through the UI and will persist across sessions.
134+
135+
The inspector also supports configuration files to store settings for different MCP servers. This is useful when working with multiple servers or complex configurations:
24136

25137
```bash
26-
CLIENT_PORT=8080 SERVER_PORT=9000 npx @modelcontextprotocol/inspector build/index.js
138+
npx @modelcontextprotocol/inspector --config path/to/config.json --server everything
27139
```
28140

29-
For more details on ways to use the inspector, see the [Inspector section of the MCP docs site](https://modelcontextprotocol.io/docs/tools/inspector).
141+
Example server configuration file:
142+
143+
```json
144+
{
145+
"mcpServers": {
146+
"everything": {
147+
"command": "npx",
148+
"args": ["@modelcontextprotocol/server-everything"],
149+
"env": {
150+
"hello": "Hello MCP!"
151+
}
152+
},
153+
"my-server": {
154+
"command": "node",
155+
"args": ["build/index.js", "arg1", "arg2"],
156+
"env": {
157+
"key": "value",
158+
"key2": "value2"
159+
}
160+
}
161+
}
162+
}
163+
```
164+
165+
> **Tip:** You can easily generate this configuration format using the **Server Entry** and **Servers File** buttons in the Inspector UI, as described in the Servers File Export section above.
166+
167+
You can also set the initial `transport` type, `serverUrl`, `serverCommand`, and `serverArgs` via query params, for example:
168+
169+
```
170+
http://localhost:6274/?transport=sse&serverUrl=http://localhost:8787/sse
171+
http://localhost:6274/?transport=streamable-http&serverUrl=http://localhost:8787/mcp
172+
http://localhost:6274/?transport=stdio&serverCommand=npx&serverArgs=arg1%20arg2
173+
```
174+
175+
You can also set initial config settings via query params, for example:
176+
177+
```
178+
http://localhost:6274/?MCP_SERVER_REQUEST_TIMEOUT=10000&MCP_REQUEST_TIMEOUT_RESET_ON_PROGRESS=false&MCP_PROXY_FULL_ADDRESS=http://10.1.1.22:5577
179+
```
180+
181+
Note that if both the query param and the corresponding localStorage item are set, the query param will take precedence.
30182

31183
### From this repository
32184

@@ -38,13 +190,71 @@ Development mode:
38190
npm run dev
39191
```
40192

193+
> **Note for Windows users:**
194+
> On Windows, use the following command instead:
195+
>
196+
> ```bash
197+
> npm run dev:windows
198+
> ```
199+
41200
Production mode:
42201
43202
```bash
44203
npm run build
45204
npm start
46205
```
47206
207+
### CLI Mode
208+
209+
CLI mode enables programmatic interaction with MCP servers from the command line, ideal for scripting, automation, and integration with coding assistants. This creates an efficient feedback loop for MCP server development.
210+
211+
```bash
212+
npx @modelcontextprotocol/inspector --cli node build/index.js
213+
```
214+
215+
The CLI mode supports most operations across tools, resources, and prompts. A few examples:
216+
217+
```bash
218+
# Basic usage
219+
npx @modelcontextprotocol/inspector --cli node build/index.js
220+
221+
# With config file
222+
npx @modelcontextprotocol/inspector --cli --config path/to/config.json --server myserver
223+
224+
# List available tools
225+
npx @modelcontextprotocol/inspector --cli node build/index.js --method tools/list
226+
227+
# Call a specific tool
228+
npx @modelcontextprotocol/inspector --cli node build/index.js --method tools/call --tool-name mytool --tool-arg key=value --tool-arg another=value2
229+
230+
# List available resources
231+
npx @modelcontextprotocol/inspector --cli node build/index.js --method resources/list
232+
233+
# List available prompts
234+
npx @modelcontextprotocol/inspector --cli node build/index.js --method prompts/list
235+
236+
# Connect to a remote MCP server
237+
npx @modelcontextprotocol/inspector --cli https://my-mcp-server.example.com
238+
239+
# Call a tool on a remote server
240+
npx @modelcontextprotocol/inspector --cli https://my-mcp-server.example.com --method tools/call --tool-name remotetool --tool-arg param=value
241+
242+
# List resources from a remote server
243+
npx @modelcontextprotocol/inspector --cli https://my-mcp-server.example.com --method resources/list
244+
```
245+
246+
### UI Mode vs CLI Mode: When to Use Each
247+
248+
| Use Case | UI Mode | CLI Mode |
249+
| ------------------------ | ------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
250+
| **Server Development** | Visual interface for interactive testing and debugging during development | Scriptable commands for quick testing and continuous integration; creates feedback loops with AI coding assistants like Cursor for rapid development |
251+
| **Resource Exploration** | Interactive browser with hierarchical navigation and JSON visualization | Programmatic listing and reading for automation and scripting |
252+
| **Tool Testing** | Form-based parameter input with real-time response visualization | Command-line tool execution with JSON output for scripting |
253+
| **Prompt Engineering** | Interactive sampling with streaming responses and visual comparison | Batch processing of prompts with machine-readable output |
254+
| **Debugging** | Request history, visualized errors, and real-time notifications | Direct JSON output for log analysis and integration with other tools |
255+
| **Automation** | N/A | Ideal for CI/CD pipelines, batch processing, and integration with coding assistants |
256+
| **Learning MCP** | Rich visual interface helps new users understand server capabilities | Simplified commands for focused learning of specific endpoints |
257+
48258
## License
49259

50260
This project is licensed under the MIT License—see the [LICENSE](LICENSE) file for details.

0 commit comments

Comments
 (0)