How to Create One-Click MCP Installation Deep Links for Cursor and VS Code

A few weeks ago, I built the unsplashx MCP. But to make it easier for my friends to use it, I decided to simplify the installation process. Today, I want to explain why using deep links is critical for reducing friction in the MCP ecosystem.

Manual installation is a chore. Instead of asking users to hunt for JSON settings, fix syntax errors, and restart their IDE, we can use one-click deep links to make it invisible.

Why Deep Links?

Think of this as a "mailto:" link for your coding agent. If a user has Cursor or VS Code open, they click a link, and the editor handles the configuration automatically.

Both Cursor and VS Code support these links, but they use different encoding formats. Manually creating these links every time you update your package is exactly the kind of task we should automate.

The Goal: From JSON to One-Click

Let’s see how to transform a standard MCP configuration into a link that works in a real project. We'll use the config for my unsplashx server:

{
  "unsplashx": {
    "type": "stdio",
    "command": "npx",
    "args": ["-y", "unsplashx"],
    "env": {
      "UNSPLASH_ACCESS_KEY": "YOUR_KEY_HERE"
    }
  }
}

Step 1: Cursor Protocol (Base64)

Cursor requires the JSON configuration to be Base64 encoded.

Format: cursor://anysphere.cursor-deeplink/mcp/install?name=$NAME&config=$BASE64_CONFIG

Base64 encoding keeps the URL valid while preserving the entire JSON structure.

Step 2: VS Code Protocol (URL Encoded)

VS Code expects a URL-encoded JSON string (usually via the official MCP extension).

Format: vscode://mcp/install?${JSON_STRING_URL_ENCODED}

Since each editor has its own preference, our automation needs to handle both.

The Solution: A Reusable Script

Here is a simple TypeScript snippet to generate both links for any MCP server:

/**
 * Automate MCP Installation Links
 */
function generateMcpLinks(name: string, config: any) {
  const configString = JSON.stringify(config);
 
  // 1. Cursor (Base64)
  const cursorBase64 = Buffer.from(configString).toString('base64');
  const cursorLink = `cursor://anysphere.cursor-deeplink/mcp/install?name=${name}&config=${cursorBase64}`;
 
  // 2. VS Code (URL Encoded)
  const vscodeEncoded = encodeURIComponent(configString);
  const vscodeLink = `vscode://mcp/install?${vscodeEncoded}`;
 
  return { cursorLink, vscodeLink };
}
 
// Example for unsplashx
const myConfig = {
  type: "stdio",
  command: "npx",
  args: ["-y", "unsplashx"],
  env: { UNSPLASH_ACCESS_KEY: "" }
};
 
const links = generateMcpLinks("unsplashx", myConfig);
 
console.log("Cursor:", links.cursorLink);
console.log("VS Code:", links.vscodeLink);

Try it: One-Click unsplashx Installation

See it in action. These buttons will install the unsplashx MCP directly into your editor (you'll just need to provide your API key in the prompt):

Takeaway

Friction kills adoption. Most people love new tools but hate configuration. By automating these links, you remove the barrier to entry.

If you build an MCP server, don't just ship the code—ship the installation experience.

Photo by Sven on Unsplash