VS Code MCP Button Generator

Instructions

Implementation Reference

• src/index.ts:106-130 (registration)

  Registers the 'make_install_buttons' tool with the MCP server, providing title, description, input schema, and an async handler that generates button markdown by calling generateButtonsMarkdown.

  server.registerTool(
    "make_install_buttons",
    {
      title: "Generate install buttons",
      description: "Generate VS Code Stable and Insiders MCP install button markdown for an NPX-based server.",
      inputSchema: {
        name: z.string().describe("Server display name (e.g., 'supabase')."),
        inputs: z.array(z.object({
          type: z.string(),
          id: z.string(),
          description: z.string().optional(),
          password: z.boolean().optional(),
        })).default([]),
        config: z.object({
          command: z.string().default("npx"),
          args: z.array(z.string()).default([]),
          env: z.record(z.string()).optional(),
        }).default({ command: "npx", args: [] }),
      }
    },
    async ({ name, inputs, config }) => {
      const markdown = generateButtonsMarkdown(name, inputs, config);
      return { content: [{ type: "text", text: markdown }] };
    }
  );

• src/lib/buttons.ts:34-45 (handler)

  Core handler logic that generates the markdown for VS Code Stable and Insiders install buttons using the provided server name, inputs, and config.

  export function generateButtonsMarkdown(name: string, inputs: MCPInput[], config: CommandConfig): string {
    const base = "https://insiders.vscode.dev/redirect/mcp/install";
    const stableBadge = makeBadge("0098FF", "VS_Code");
    const insidersBadge = makeBadge("24bfa5", "VS_Code_Insiders");
  
    const stableLink = buildInstallLink(base, name, inputs, config, false);
    const insidersLink = buildInstallLink(base, name, inputs, config, true);
  
    const stable = `[![Install with NPX in VS Code](${stableBadge})](${stableLink})`;
    const insiders = `[![Install with NPX in VS Code Insiders](${insidersBadge})](${insidersLink})`;
    return `${stable}\n${insiders}`;
  }

• src/index.ts:70-87 (schema)

  Zod schema definitions for the tool inputs: InputSchema for individual inputs, ConfigSchema for command config, and MakeButtonsParams combining them with name.

  const InputSchema = z.object({
    type: z.string(), // "promptString" supported for now
    id: z.string(),
    description: z.string().optional(),
    password: z.boolean().optional(),
  });
  
  const ConfigSchema = z.object({
    command: z.string().default("npx"),
    args: z.array(z.string()).default([]),
    env: z.record(z.string()).optional(),
  });
  
  const MakeButtonsParams = z.object({
    name: z.string().min(1, "name is required"),
    inputs: z.array(InputSchema).default([]),
    config: ConfigSchema.default({ command: "npx", args: [] }),
  });

• src/lib/buttons.ts:23-32 (helper)

  Helper function to build the install link URL parameters for both stable and insiders VS Code versions.

  function buildInstallLink(base: string, name: string, inputs: MCPInput[], config: CommandConfig, insiders = false) {
    const parts: string[] = [];
    parts.push(`name=${encodeURIComponent(name)}`);
    if (inputs && inputs.length) {
      parts.push(`inputs=${encodeURIComponent(JSON.stringify(inputs))}`);
    }
    parts.push(`config=${encodeURIComponent(JSON.stringify(config))}`);
    if (insiders) parts.push(`quality=insiders`);
    return `${base}?${parts.join('&')}`;
  }

• src/lib/buttons.ts:19-21 (helper)

  Helper function to generate the badge image URL for VS Code install buttons.

  function makeBadge(color: string, label: string) {
    return `https://img.shields.io/badge/${encodeURIComponent(label)}-NPM-${color}?style=flat-square&logo=visualstudiocode&logoColor=white`;
  }