Skip to content

Conversation

@olaservo
Copy link
Member

@olaservo olaservo commented Nov 30, 2025

Fixes: #947

Changes:

  • Adds a spec file for UX
  • Adds my takes on which tech to use for http and logging

Methodology:

  • Used Claude Opus 4.5 to analyze MCPJam source and latest MCP spec schema to propose UX and features to add to current spec files
  • Started grabbing a few feature requests ad-hoc from current inspector issues that seem like they should be included (such as support for official registry server.json)

Other notes:

  • I think it would be ideal to get something interactive going early, so I am generating a couple simple prototypes to get a feel for what the code would actually look like and how it might work in practice. Will post those in the discord and latest WG discussion thread.
  • If that method works well, we can let claude [or insert your fav bot here] to pick and choose what we like from those examples and use that to iterate on the spec.

olaservo and others added 3 commits November 29, 2025 21:18
- Express: cleaner routing/middleware for proxy CRUD endpoints, well-maintained ecosystem
- Pino: fastest logger option, JSON-structured logs work well for debugging MCP traffic

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>
Based on MCPJam Inspector analysis:
- Server connection card with status indicators
- Resizable panel layouts for Tools/Resources/Prompts screens
- Form generation from JSON Schema
- Error handling patterns (inline errors, retry count, doc links)

Also updates nav links in all spec files to include v2_ux.md.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>
- Add server.json import support (Issue modelcontextprotocol#922) for MCP Registry format
- Add History Screen with automatic capture and replay functionality
- Add Pino logging rationale with log-as-history architecture
- Remove emojis from markdown files, use text alternatives

New UX sections added:
- Logging Screen (notifications/message, logging/setLevel)
- Tasks Screen (tasks/*, notifications/task/statusChanged)
- Sampling Panel (sampling/createMessage)
- Elicitation Handler (form + URL modes)
- Roots Configuration (roots/list)
- Experimental Features Panel (raw JSON-RPC tester)

Enhanced existing screens:
- Tools: annotations, autocomplete, progress indicators, image/audio
- Resources: annotations, subscriptions
- Prompts: autocomplete
- Navigation: ping latency, listChanged indicators

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>
olaservo added a commit to olaservo/inspector that referenced this pull request Nov 30, 2025
Implements UI-only prototype for component library evaluation:

- Server List home page with server cards
- AppLayout with top navigation (Tools, Resources, Prompts, Logs, Tasks, History)
- All 7 screen stubs with mock data
- ServerCard and StatusIndicator components
- Dark theme with Mantine v7

Based on v2_ux.md specification from PR modelcontextprotocol#945.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>
olaservo added a commit to olaservo/inspector that referenced this pull request Nov 30, 2025
Implements UI-only prototype for component library evaluation:

- Server List home page with server cards
- AppLayout with top navigation (Tools, Resources, Prompts, Logs, Tasks, History)
- All 7 screen stubs with mock data
- ServerCard and StatusIndicator components
- Shadcn UI components (Button, Card, Badge, Switch, Input, Select)
- Tailwind CSS dark theme

Based on v2_ux.md specification from PR modelcontextprotocol#945.
Mirror of Mantine prototype for comparison.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>
Copy link
Member

@cliffhall cliffhall left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for all this great work, @olaservo. I added a few thoughts.

│ [user] │ │
│ │ { │
│ ○ data.csv │ "name": "my-app", │
│ │ "version": "1.0.0" │
Copy link
Member

@cliffhall cliffhall Dec 2, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Perhaps we can split this left pane to have dynamically up to three scrollable regions. If there are only resources, they take up the whole pane. If there are also templates, the pane is split in two. When there are subscriptions, another pane could be added for them.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

might try a "selector" for resources / templates / subscriptions, and show that on the left? or accordion style maybe? Multiple panes with resizing feels fiddly

- Display server's experimental capabilities from initialization
- Toggle client experimental capabilities to advertise
- Add custom client experimental capabilities
- **Raw JSON-RPC Tester:**
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What if the experimental feature requires custom headers?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I support this Raw JSON-RPC tester not just for experimental features, but overall.

For example, the TS SDK servers supported adding extra parameters ourside of the spec, because of zod v3 and passthroughs all over the place (which shouldn't have been the case). Having the ability to test raw will be able to see how a server reacts to invalid parameters on any JSON-RPC calls etc.

Copy link
Member

@cliffhall cliffhall Dec 4, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I support this Raw JSON-RPC tester not just for experimental features, but overall.

@KKonstantinov Same. I just happened to be reviewing old issues this morning and noticed this one which points out that our history panel is not including everything, e.g., _meta/progressToken is not being included in the params for calls like resources/list even though you can see it if you examine the traffic in the browser inspector's network tab. This points to a problem where the SDK creates the fully formed message from the JSON we pass in (adding jsonrpc:2.0, etc), and we might need to add affordances to the SDK to get the message that actually was sent for display.

├─────────────────────────────────────────────────────────┤
│ npx -y @modelcontextprotocol/server-everything [Copy]│
├─────────────────────────────────────────────────────────┤
│ [Server Info] [Edit] [Remove] │
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also, how to choose connection type is maybe a server specific thing. If the server has its CORS open then you can connect direct, otherwise you'll want to connect via proxy. Maybe this is a dropdown option on this card.

cliffhall

This comment was marked as outdated.

### Transport Operation
Let's consider how to operate the server transports.
* -[ ] [Express](https://expressjs.com/)
* -[x] [Express](https://expressjs.com/)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we could do Hono or something that uses web standards as well. we're planning add support for that for typescript-sdk v2

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good point, @pcarleton. Can you share links to any pros and cons discussions that have been had about moving to hono on the sdk?

Copy link
Contributor

@KKonstantinov KKonstantinov Dec 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi Cliff,

Don't think we've got anything written up yet, but the general idea is (on the TS SDK) to go modern Web Standards handlers which will enable easy deployment on all kinds of environments (Deno, Bun, serverless, edge environments, etc)

This is where Hono comes in because it works with web standards ootb (while express and others can be shimmed to work with web standards so anyone using express cam still use it).

Not sure the above argument is relevant for inspector.

But what I believe would be relevant:

  • 12kb as opposed to near 1mb
  • includes a lot natively which would be another plug-in for express (think body parsing, auth middlewares and such) - saves more bundle size
  • fully tree shakable
  • typescript native, no @types package
  • has http2 (which express doesn't since SPDY support was dropped). While most setups terminate http2 at the ingress / gateway / reverse proxy and then serve http1 locally, this is also about future proofing. (Example: if gRPC was ever added as a transport, http2 is a blocking requirement; there are likely more use cases here to future proof it)

Developer experience and friction is quite low due to its simplicity - no monkey patching of the request object (think ExpressRequest), full type safety on the request context added by your app.

I am likely missing more, but there should be enough on their website.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the run-down, @KKonstantinov. Sounds like we should definitely give it a chance. Express is definitely creaky and so large comparatively.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

+1 for hono. @KKonstantinov said it perfectly.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks! I changed this to Hono.

│ │ }] │ │
│ │ } │ │
│ └─────────────────────────────────────────────────────────────────────────┘ │
│ [Browse...] [Clear]│
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

would Browse be for finding a file? or for browsing a registry? I think browsing a registry would be useful too

Copy link
Member

@cliffhall cliffhall Dec 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Presumably for letting you browse for a file to validate so you can be certain it's formatted correctly before attempting to register. A registry browser would presumably be a nice thing as well, but by the time you get it registered, it's probably holding water. The main use case has been to test servers in development, but with the advent of the registry, perhaps there's a strong enough use case for a registry browser as well. Question is whether it's built-in code or a plugin?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, this was for selecting a server.json file to validate.

olaservo and others added 3 commits December 7, 2025 21:06
Address reviewer feedback from cliffhall, pcarleton, KKonstantinov, mattzcarey:

v2_ux.md changes:
- Add Server Settings Modal for per-server config (headers, metadata, timeouts, OAuth)
- Add Clone button to Server Card Actions
- Add OAuth Debugger section for debugging auth flows
- Change Resources Screen from resizable panes to accordion pattern
- Update Logging Screen to all 8 RFC 5424 levels with distinct colors
- Clarify Browse button as local file picker
- Expand JSON-RPC Tester to support all methods with custom headers
- Add multi-select support for anyOf/oneOf enums in Form Generation

v2_tech_stack.md changes:
- Select Hono over Express based on community consensus
- Add Hono Rationale section with comparison table

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <[email protected]>
🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <[email protected]>
- Add [Settings], [Clone] buttons to card
- Add separate OAuth example showing [OAuth Debug] button
- Widen card to fit all buttons

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <[email protected]>
│ │ │ │ │
│ └─────────────────┘ │ ───────────────────────────────────────────────── │
│ │ │
│ Show Levels: │ │
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@cliffhall I added all log levels to:

  1. The ASCII art log stream
  2. The checkbox filters
  3. The color table

Address cliffhall's feedback about tool-specific metadata:
- Add [Edit Metadata] button for per-tool _meta fields
- Stored per-server, per-tool (not in global localStorage)
- Merged with server-level metadata on each call

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <[email protected]>
olaservo added a commit to olaservo/inspector that referenced this pull request Dec 8, 2025
Brings in PR modelcontextprotocol#945 feedback revisions:
- Server Settings Modal spec
- OAuth Debugger spec
- Resources accordion pattern
- 8 RFC 5424 log levels
- Hono selected over Express
- Advanced JSON-RPC tester spec
olaservo added a commit to olaservo/inspector that referenced this pull request Dec 8, 2025
Address reviewer feedback from cliffhall, pcarleton, KKonstantinov, mattzcarey:

Spec changes (v2_ux.md):
- Add Server Settings Modal for per-server config (headers, metadata, timeouts, OAuth)
- Add Clone button to Server Card Actions
- Add OAuth Debugger section for debugging auth flows
- Change Resources Screen from resizable panes to accordion pattern
- Update Logging Screen to all 8 RFC 5424 levels with distinct colors
- Clarify Browse button as local file picker
- Expand JSON-RPC Tester to support all methods with custom headers
- Add multi-select support for anyOf/oneOf enums in Form Generation

Tech stack changes (v2_tech_stack.md):
- Select Hono over Express based on community consensus
- Add Hono Rationale section with comparison table

Prototype changes (shadcn branch):
- Resources.tsx: Implement accordion pattern with collapsible sections
- Logs.tsx: Add all 8 RFC 5424 levels with distinct color styles

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants