MCP Inspector

The MCP Inspector architecture consists of two primary components:

1. MCP Inspector Client (MCPI): A React-based web UI that serves as the interactive interface for developers to test and debug servers.
2. MCP Proxy (MCPP): A Node.js server that acts as a protocol bridge. It functions as both an MCP client (connecting to your MCP server) and an HTTP server (serving the web UI). This allows the browser-based UI to interact with MCP servers using various transport methods such as stdio, SSE, or streamable-http.

To inspect a local MCP server implementation, pass the command used to start your server as arguments to npx @modelcontextprotocol/inspector.

Passing Arguments and Environment Variables

• Arguments only: Append arguments directly after the server command.
• Environment variables only: Use the -e flag for each variable.
• Both: Use -e for environment variables and append arguments at the end.
• Separation: Use -- to separate inspector flags from your server's own arguments.

Customizing Ports

You can customize the client and server ports using environment variables: CLIENT_PORT=8080 SERVER_PORT=9000 npx @modelcontextprotocol/inspector <server-command>

To launch the MCP Inspector UI immediately, use npx. The UI will be accessible at http://localhost:6274 by default.

Requirements:

• Node.js: ^22.7.5

npx @modelcontextprotocol/inspector

Follow these steps to perform a full version bump and release cycle within the monorepo:

1. Update the version: Run npm run update-version <version>.
2. Verify consistency: Run npm run check-version to ensure no mismatches occurred.
3. Commit changes: Stage all files and commit with a version bump message.
4. Tag the release: Create a git tag for the new version.
5. Push: Push both the branch and the tags to the remote repository.

# Update to new version
npm run update-version 0.15.0

# Verify everything is correct
npm run check-version

# Commit the changes
git add -A
git commit -m "chore: bump version to 0.15.0"

# Create a tag
git tag 0.15.0

# Push changes and tag
git push && git push --tags

Use the update-version.js script to synchronize the version number across all package.json files (root, client, server, and cli) and update the package-lock.json. This script also updates workspace dependencies in the root package.json and runs npm install to ensure the lockfile is current.

npm run update-version <new-version>
# Example:
npm run update-version 0.14.3

Use the check-version-consistency.js script to ensure that all packages in the monorepo share the same version, workspace dependencies in the root package.json are correct, and that package-lock.json is perfectly in sync with the package.json files.

npm run check-version

You can run the inspector using a Docker container. This command maps the necessary ports for the client UI (6274) and the MCP Proxy (6277).

docker run --rm \
  -p 127.0.0.1:6274:6274 \
  -p 127.0.0.1:6277:6277 \
  -e HOST=0.0.0.0 \
  -e MCP_AUTO_OPEN_ENABLED=false \
  ghcr.io/modelcontextprotocol/inspector:latest

To use recommended React linting rules, install eslint-plugin-react and update your eslint.config.js to include the plugin, set the React version in settings, and spread the recommended rules into the rules object.

// eslint.config.js
import react from "eslint-plugin-react";

export default tseslint.config({
  // Set the react version
  settings: { react: { version: "18.3" } },
  plugins: {
    // Add the react plugin
    react,
  },
  rules: {
    // other rules...
    // Enable its recommended rules
    ...react.configs.recommended.rules,
    ...react.configs["jsx-runtime"].rules,
  },
});

For production application development, it is recommended to enable type-aware lint rules by updating the ESLint configuration. This involves configuring parserOptions to point to your TypeScript configuration files and switching to type-checked rule sets.

export default tseslint.config({
  languageOptions: {
    // other options...
    parserOptions: {
      project: ["./tsconfig.node.json", "./tsconfig.app.json"],
      tsconfigRootDir: import.meta.dirname,
    },
  },
});