Cómo crear deep links de instalación en un clic para MCP en Cursor y VS Code

Hace unas semanas creé el servidor MCP unsplashx. Para que a mis amigos les resultara más fácil usarlo, decidí simplificar el proceso de instalación. Hoy quiero explicar por qué usar deep links es clave para reducir la fricción en el ecosistema MCP.

La instalación manual es tediosa. En lugar de pedir a los usuarios que busquen archivos de configuración JSON, corrijan errores de sintaxis y reinicien su editor, podemos usar deep links en un solo clic para hacer que todo el proceso sea transparente.

¿Por qué usar deep links?

Imagina esto como un enlace tipo "mailto:" para tu asistente de código. Si el usuario tiene abierto Cursor o VS Code, hace clic en el enlace y el editor se encarga de la configuración de forma automática.

Tanto Cursor como VS Code soportan estos enlaces, pero usan formatos de codificación distintos. Crear estos enlaces a mano cada vez que actualizas tu paquete es justo el tipo de tarea que deberíamos automatizar.

El objetivo: de JSON a un solo clic

Veamos cómo transformar una configuración estándar de MCP en un enlace funcional para un proyecto real. Usaremos la configuración de mi servidor unsplashx:

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

Paso 1: Protocolo de Cursor (Base64)

Cursor requiere que la configuración JSON esté codificada en Base64.

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

Codificar en Base64 mantiene la URL válida mientras conserva la estructura completa del JSON.

Paso 2: Protocolo de VS Code (URL Encoded)

VS Code espera una cadena JSON codificada en formato URL (normalmente mediante la extensión oficial de MCP).

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

Como cada editor tiene su propia preferencia, nuestra automatización debe encargarse de ambos.

La solución: un script reutilizable

Aquí tienes un script sencillo en TypeScript para generar ambos enlaces para cualquier servidor MCP:

/**
 * Automatizar enlaces de instalación de MCP
 */
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 codificado)
  const vscodeEncoded = encodeURIComponent(configString);
  const vscodeLink = `vscode://mcp/install?${vscodeEncoded}`;
 
  return { cursorLink, vscodeLink };
}
 
// Ejemplo para 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);

Pruébalo: instalación de unsplashx en un solo clic

Míralo en acción. Estos botones instalarán el MCP unsplashx directamente en tu editor (solo tendrás que ingresar tu API key cuando te lo pida):

Conclusión

La fricción mata la adopción. A la mayoría de la gente le encantan las nuevas herramientas, pero odia la configuración. Al automatizar estos enlaces, eliminas la barrera de entrada.

Si creas un servidor MCP, no te limites a publicar el código: publica también la experiencia de instalación.

Foto por Sven en Unsplash