Local MCP Server Development with Hot Module Reload (HMR)

Set up a local development loop for MCP servers with live reloading and browser-based inspector

Updated: 5/14/2026
Difficulty
medium
Time
15m
Use Case
Rapidly iterate on MCP server tool definitions and UI without restarting the server or refreshing client connections
Popularity
0 views

About this automation

Use mcp-use SDK with npm run dev to spawn a local inspector on localhost. The inspector provides a BYOK chat interface, one-by-one tool testing, and server metadata validation. HMR is implemented via MCP protocol primitives (tools/list_changed notifications) so tool changes reload without hard-refreshing the session. UI changes propagate via Vite HMR to the embedded chat.

How to implement

1

Initialize an mcp-use project and define your MCP server tools

2

Run npm run dev to start the server and inspector

3

Open the inspector URL in your browser (localhost)

4

Edit tool definitions or UI in your code

5

Watch the inspector chat update live via HMR without session interruption

6

Test tool invocation order and agent understanding in the embedded chat

7

Optionally launch Claude Code with --chrome enabled pointing to the inspector URL for closed-loop agent testing