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)
• [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
• [x] I have added appropriate error handling
• [x] I have added or updated documentation as needed

Additional context

[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.

[cliffhall]

@sumeetpardeshi Can we make the buttons take up the whole space?

[sumeetpardeshi]

@cliffhall, now buttons take up the whole space.

[sumeetpardeshi]

@cliffhall I agree with your point of calling it Server Entry & Servers File to avoid confusion. next steps:

• Change references and button names as suggested.
• add test cases for this feature
• The image(mcp-inspector.png) also needs to update to include these new buttons in sidebar.

[cliffhall]

@cliffhall I agree with your point of calling it Server Entry & Servers File to avoid confusion. next steps:

• Change references and button names as suggested.
• add test cases for this feature
• The image(mcp-inspector.png) also needs to update to include these new buttons in sidebar.

And a section of the README that explains what these buttons do and what the copied data is for.

[sumeetpardeshi]

@cliffhall I've addressed all the suggestions mentioned above

[sumeetpardeshi]

@cliffhall I've addressed the duplication as suggested

[cliffhall]

Local tests

StreamableHttp

• With an streamableHttp server, only the "copy servers file" button is present.
• It created a JSON ball that needs better indenting but more importantly identified the server type as "sse" instead of "streamableHttp"

Copy Servers File

{
  "mcpServers": {
  "default-server": {
    "type": "sse",
      "url": "http://localhost:3001/mcp",
      "note": "For SSE connections, add this URL directly in Client"
  }
}
}

SSE

• With an sse server, only the "copy servers file" button is present.
• I get the right output, albeit indenting needs a little help

Copy Servers File

{
  "mcpServers": {
  "default-server": {
    "type": "sse",
      "url": "http://localhost:3001/sse",
      "note": "For SSE connections, add this URL directly in Client"
  }
}
}

STDIO

With an stdio server, both buttons are present and I get the right output, indenting needs work in both cases

Copy Servers File

{
  "mcpServers": {
  "default-server": {
    "command": "npx",
        "args": [
      "/Users/cliffhall/Projects/mcp-servers/src/everything/dist/stdio.js"
    ],
        "env": {
      "HOME": "/Users/cliffhall",
          "LOGNAME": "cliffhall",
          "PATH": "/Users/cliffhall/...",
          "SHELL": "/bin/zsh",
          "TERM": "xterm-256color",
          "USER": "cliffhall"
    }
  }
}
}

Copy Servers Entry

{
  "command": "npx",
    "args": [
  "/Users/cliffhall/Projects/mcp-servers/src/everything/dist/stdio.js"
],
    "env": {
  "HOME": "/Users/cliffhall",
      "LOGNAME": "cliffhall",
      "PATH": "/Users/cliffhall/...",
      "SHELL": "/bin/zsh",
      "TERM": "xterm-256color",
      "USER": "cliffhall"
}
}

[sumeetpardeshi]

@cliffhall the latest fix should solve these problems. about the json indentation, Im not observing it when I copy paste it into any editor ( tried sublime/textedit) . also indentations might also be depend on host systems, and editor configuration where its pasted, so I suggest we can skip that part if values are correct.

[cliffhall]

... about the json indentation, Im not observing it when I copy paste it into any editor ( tried sublime/textedit) . also indentations might also be depend on host systems, and editor configuration where its pasted, so I suggest we can skip that part if values are correct.

@sumeetpardeshi Spaces instead of tabs will eliminate any issues with system interpretation. But it's not right in Webstorm, and even pasting it into this form (as you can see in the above examples) should make it clear that the formatting is off. It's worth fixing now, because otherwise there'll have to be another PR to fix.

[sumeetpardeshi]

@cliffhall I think the issue was occurring because we were using 2 space parameter in JSON.stringify function. A standard tab is either 4/8 spaces, so changing it from 2-> 4 is giving the desired indentation. Let me know its formatted as expected now.