MCP Explorer

A web-based tool for exploring and testing Model Context Protocol (MCP) servers. Connect to any MCP server and interactively browse its tools, resources, and prompts — invoke them, inspect results, and chain calls with automatic parameter passing.

Features

Tool invocation — Browse available tools, fill in parameters via auto-generated forms, and invoke them
Resource reading — List and read resources and resource templates
Prompt testing — List prompts, supply arguments, and preview rendered messages
Parameter store — Automatically accumulates values from form submissions and JSON results, then pre-populates matching fields in subsequent forms
Parameter aliases — Map fields with different names across tools (e.g. person_guid ← personGuid) so values auto-fill even when naming conventions differ
URL history — Browser-style autocomplete dropdown for previously used server URLs, persisted across sessions
Auth caching — Auth method and credentials are cached per-URL and restored automatically when selecting from history
Smart JSON display — Embedded JSON strings are parsed inline (no escaped quotes), multiline strings render with real newlines, and a toggle switches between raw JSON and formatted markdown
Multiple auth methods — None, Bearer Token, Custom Header, and OAuth 2.0

Quick start

# Install dependencies
npm install

# Run in development mode (backend + frontend concurrently)
npm run dev

The backend starts on http://localhost:3001 and the frontend dev server on http://localhost:5173 (proxied to the backend).

Alternatively, use the shell wrapper:

./dev.sh

Production build

npm run build
npm -w backend start

Project structure

mcp-explorer/
├── backend/              Express server wrapping @modelcontextprotocol/sdk
│   └── src/
│       ├── index.ts          Server entry point (port 3001)
│       ├── mcp-manager.ts    MCP client lifecycle and operations
│       ├── auth/             OAuth provider and auth types
│       └── routes/           API route handlers
├── frontend/             React + Vite + Tailwind UI
│   └── src/
│       ├── store/            Zustand state (connection, params, aliases)
│       ├── components/       UI components
│       └── api/              Backend API client
├── dev.sh                Dev launcher script
└── package.json          Workspace root

API endpoints

| Method | Endpoint | Description | |--------|----------|-------------| | POST | /api/connect | Connect to an MCP server | | DELETE | /api/disconnect | Disconnect | | GET | /api/status | Connection status and server info | | GET | /api/tools | List tools | | POST | /api/tools/call | Invoke a tool | | GET | /api/resources | List resources | | GET | /api/resource-templates | List resource templates | | POST | /api/resources/read | Read a resource | | GET | /api/prompts | List prompts | | POST | /api/prompts/get | Get a prompt | | POST | /api/auth/callback | OAuth callback |

Parameter store

The parameter store solves the common workflow of chaining MCP tool calls where output from one tool feeds into another.

How it works:

When you submit a form, all non-empty values are stored (e.g. { repo: "acme/api" })
When a tool returns JSON in its text content, top-level scalar values are extracted and merged into the store
When you switch to another tool, any form fields with matching names are pre-populated (shown with a blue border and "auto" badge)
For fields that don't match by name, click the link icon to map a store parameter — the alias is saved to localStorage and auto-fills in all future sessions

Configuration

| Variable | Default | Description | |----------|---------|-------------| | PORT | 3001 | Backend server port |

Tech stack

Frontend: React 19, Vite 7, Zustand, Tailwind CSS 4, React Markdown
Backend: Express 4, @modelcontextprotocol/sdk
Language: TypeScript throughout

License

MIT

MCP Servers