a669272fda
If the server does not support resource subscriptions, do not show any subscription buttons.
* In App.tsx
- useState for resourceSubscriptions, setResourceSubscriptions a Set of type string.
- in subscribeToResource()
- only make the request to subscribe if the uri is not in the resourceSubscriptions set
- in unsubscribeFromResource()
- only make the request to unsubscribe if the uri is in the resourceSubscriptions set
- in ResourceTab element,
- pass a boolean resourceSubscriptionsSupported as serverCapabilities.resources.subscribe
- pass resourceSubscriptions as a prop
* In ResourcesTab.tsx
- deconstruct resourceSubscriptions and resourceSubscriptionsSupported from props and add prop type
- in selected resource panel
- don't show subscribe or unsubscribe buttons unless resourceSubscriptionsSupported is true
- only show subscribe button if selected resource uri is not in resourceSubscriptions set
- only show unsubscribe button if selected resource uri is in resourceSubscriptions set
- wrap buttons in a flex div that is
- justified right
- has a minimal gap between
- 2/5 wide (just big enough to contain two buttons and leave the h3 text 3/5 of the row to render and not overflow.
MCP Inspector
The MCP inspector is a developer tool for testing and debugging MCP servers.
Running the Inspector
From an MCP server repository
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:
npx @modelcontextprotocol/inspector node build/index.js
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:
# Pass arguments only
npx @modelcontextprotocol/inspector build/index.js arg1 arg2
# Pass environment variables only
npx @modelcontextprotocol/inspector -e KEY=value -e KEY2=$VALUE2 node build/index.js
# Pass both environment variables and arguments
npx @modelcontextprotocol/inspector -e KEY=value -e KEY2=$VALUE2 node build/index.js arg1 arg2
# Use -- to separate inspector flags from server arguments
npx @modelcontextprotocol/inspector -e KEY=$VALUE -- node build/index.js -e server-flag
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:
CLIENT_PORT=8080 SERVER_PORT=9000 npx @modelcontextprotocol/inspector node build/index.js
For more details on ways to use the inspector, see the Inspector section of the MCP docs site. For help with debugging, see the Debugging guide.
From this repository
If you're working on the inspector itself:
Development mode:
npm run dev
Note for Windows users:
On Windows, use the following command instead:npm run dev:windows
Production mode:
npm run build
npm start
License
This project is licensed under the MIT License—see the LICENSE file for details.