I run VibeCodePicks, a directory of AI coding tools (disclosure: it's my site, and it's the example in this post). It has a free remote MCP server, and until today connecting it meant copying a JSON block into a config file. Now the setup page has two buttons, "Add to Cursor" and "Install in VS Code". Neither one is magic: each is a plain link with the server config packed into the URL. Here's what goes in them, so you can make the same buttons for your own server.
The server is remote over HTTP and needs no sign-in, so the whole config is one URL:
{ "url": "https://vibecodepicks.com/api/mcp" }
If your server runs locally instead, the config would have command and args the way it does in mcp.json. The link formats below take either shape.
Cursor's documented format is:
cursor://anysphere.cursor-deeplink/mcp/install?name=$NAME&config=$BASE64_ENCODED_CONFIG
name is the server name that shows up in Cursor. config is the JSON above, base64-encoded:
echo -n '{"url":"https://vibecodepicks.com/api/mcp"}' | base64
So the button's href is:
cursor://anysphere.cursor-deeplink/mcp/install?name=vibecodepicks&config=eyJ1cmwiOiJodHRwczovL3ZpYmVjb2RlcGlja3MuY29tL2FwaS9tY3AifQ==
One thing to watch: the config object holds only the server settings. The name goes in the name parameter, not inside the JSON.
VS Code's documented format is vscode:mcp/install?{json-configuration} (and vscode-insiders:mcp/install?... for Insiders). Here the JSON is URL-encoded rather than base64, and the name lives inside it, next to the transport type:
{ "name": "vibecodepicks", "type": "http", "url": "https://vibecodepicks.com/api/mcp" }
In JavaScript:
const cfg = { name: "vibecodepicks", type: "http", url: "https://vibecodepicks.com/api/mcp" };
const href = "vscode:mcp/install?" + encodeURIComponent(JSON.stringify(cfg));
which gives:
vscode:mcp/install?%7B%22name%22%3A%22vibecodepicks%22%2C%22type%22%3A%22http%22%2C%22url%22%3A%22https%3A%2F%2Fvibecodepicks.com%2Fapi%2Fmcp%22%7D
| Cursor | VS Code | |
|---|---|---|
| Scheme | cursor://anysphere.cursor-deeplink/mcp/install |
vscode:mcp/install |
| Server name | name= query parameter |
"name" inside the JSON |
| Config encoding | base64 | URL-encoded JSON |
| Transport | implied by url |
"type": "http" |
The mistake that's easy to make is reusing one config for both. The Cursor JSON has no name and no type; the VS Code JSON needs both.
Both links only do something on a machine that has that editor installed, and other clients (Claude, Claude Code, Codex, Windsurf, ChatGPT) have their own setup steps. So the page keeps the plain config blocks under the buttons. The buttons are a shortcut, not the only way in.
It searches the directory of 114 tools and exposes 13 MCP tools, including search, recommend_tools, compare_tools, list_alternatives and whats_new. Once it's connected you can ask your assistant something like "what's a free open-source coding agent for the terminal?" and it answers from the directory, with pricing and alternatives.
Setup page with both buttons and the config for every other client: https://vibecodepicks.com/mcp/?utm_source=devto&utm_medium=social&utm_campaign=mcp-install-links
Format references: Cursor MCP install links and VS Code MCP developer guide.