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:

1. When you submit a form, all non-empty values are stored (e.g. { repo: "acme/api" })
2. When a tool returns JSON in its text content, top-level scalar values are extracted and merged into the store
3. When you switch to another tool, any form fields with matching names are pre-populated (shown with a blue border and "auto" badge)
4. 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