feat: Add copy json config button

[sumeetpardeshi]

Added a copy config button, to copy the json config for the server currently being tested.

Motivation and Context

Currently when we are adding configs to mcp.json configuration for any client(eg. cursor), we need to manually copy the command, args and env variable. Idea is to improve UX and provide a quick copy button, which when clicked will have the config ready in clipboard to be pasted in mcp.json file. we also show a toast when the values are copied to clipboard.

this config will be copied to clipboard when testing uvx mcp-server-fetch
{ "command": "uvx", "args": [ "mcp-server-fetch" ], "env": { "YOUR_ENV_VARIABLES": "VALUE" } }

so the Idea is in an existing mcp.json file, you will add this server config from clipboard as below:

{ "mcpServers": { "your-server-name": <paste-copied-config-here> } }

How Has This Been Tested?

Tested locally by connecting to a mcp-server-fetch server

Breaking Changes

Types of changes

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

Checklist

• I have read the MCP Documentation
• My code follows the repository's style guidelines
• New and existing tests pass locally
• I have added appropriate error handling
• I have added or updated documentation as needed

Additional context

[olaservo]

Thanks for the PR, I like the idea of making this more convenient. I think we should make some of this more generic though, rather than assuming we can use the Cursor format.

Another thing to take a look at is the recent support added for using a config file with inspector, mentioned here under the table: https://github.com/modelcontextprotocol/inspector?tab=readme-ov-file#configuration

I'm thinking that another way to avoid the UI edit -> partial config copy/paste process might be to edit a config file instead, and then just refer to that same config for your client and Inspector?

[cliffhall]

Thanks for the PR, I like the idea of making this more convenient. I think we should make some of this more generic though, rather than assuming we can use the Cursor format.

Another thing to take a look at is the recent support added for using a config file with inspector, mentioned here under the table: https://github.com/modelcontextprotocol/inspector?tab=readme-ov-file#configuration

I think the format that's listed above matches our config file format:

Suggestion

Our format

I'm thinking that another way to avoid the UI edit -> partial config copy/paste process might be to edit a config file instead, and then just refer to that same config for your client and Inspector?

That seems like a good plan, but I'm sure the copy and paste could still be useful.

Maybe, since this gaping hole exists in the UI...

... we could put two buttons: Copy Config File and Copy Config Entry

• Copy Config File would copy a whole config file shape with just the currently connected server in it,
• Copy Config Entry would give you an entry for such a file.

[sumeetpardeshi]

@cliffhall thanks for the inputs here, appreciate the help. I too validated that most clients have same format for mcp.json , so @olaservo your query should also be resolved with that.

I will go ahead and add those 2 buttons and update the PR.

[sumeetpardeshi]

Added 2 buttons:

• Config Entry
• Config File

Note: Ignored the Copy Prefix suggested above as its causing UI to overflow when both buttons on same line. to compensate added appropriate icons and tooltips for clear understanding though.