feat(client): add search param configuration

[kentcdodds]

Motivation and Context

I plan to use this in my workshops about MCPs and in my workshop environment I want to have an iframe of the inspector. Each exercise has a different URL for the MCP server for that exercise so having the URL of the config coming from the URL can be quite helpful.

How Has This Been Tested?

✅ Yes

https://github.com/user-attachments/assets/7e8acbf3-13e7-4934-900c-73665c17fd49

Breaking Changes

✅ No breaking changes

Types of changes

• [ ] Bug fix (non-breaking change which fixes an issue)
• [x] New feature (non-breaking change which adds functionality)
• [ ] Breaking change (fix or feature that would cause existing functionality to change)
• [ ] Documentation update

Checklist

• [x] I have read the MCP Documentation
• [x] My code follows the repository's style guidelines
• [x] New and existing tests pass locally (probably, I did this in the github editor and tested it by manually modifying the code in node_modules 😅)
• [x] I have added appropriate error handling (I handle errors just as well as the existing code does 😅)
• [x] I have added or updated documentation as needed

Additional context

My current WIP workshop repo can be found here: https://github.com/epicweb-dev/mcp-fundamentals

[kentcdodds]

I think it would be useful to have all of the configuration options be initialized via URL search params. Are you okay if I make updates to support that?

[cliffhall]

I agree that this makes sense. However, with the very recent addition of streamable-http transport and continued support for sse I don't think a single sseUrl is the full solution.

I imagine three query params needed to address the transport possibilities:

• transport=[stdio|sse|streamable-http] required
• serverUrl=http://127.0.0.1/sse optional, use when transport === sse or streamable-http
• serverPath=/Users/zaphod/heart-of-gold/bin/stdio.js optional, use when transport === stdio

[kentcdodds]

Yep, good call. I just made it do that. I moved some things around to organize it a little bit better. Let me know if you'd like me to change that at all.

[kentcdodds]

I realized that I also needed to be able to set the configuration via the search params, so I've added that as well. Hopefully that's okay.

With this all set up, now I have a really nice setup for learners in my workshop:

https://github.com/user-attachments/assets/36783f8d-dbd3-4c8c-899d-33bd330ae5f1

[kentcdodds]

I published this to @kentcdodds/tmp-modelcontextprotocol_inspector@alpha if anyone wants to test it out. I'll be using it for my workshop this week.

(No pressure if you all decide you'd like to go a different direction or something, this just unblocks me so there's no time pressure for anyone).

[kentcdodds]

Love to hear it! Thanks Cliff!

[olaservo]

Nice work on the workshop Kent, I'm expecting will get tagged into a release sometime over the next couple days 👍

[kentcdodds]

Thanks!