VS Code MCP Button Generator

Instructions

Implementation Reference

• src/index.ts:142-146 (handler)

  The handler function for the 'from_mcp_config' tool. It extracts inputs and config from the provided MCP object using the helper function, generates the install buttons markdown, and returns it as structured content.

  async ({ name, mcp }) => {
    const { inputs, config } = fromMcpConfigObject(name, mcp ?? {});
    const markdown = generateButtonsMarkdown(name, inputs, config);
    return { content: [{ type: "text", text: markdown }] };
  }

• src/index.ts:132-147 (registration)

  Registration of the 'from_mcp_config' tool on the MCP server using server.registerTool.

  server.registerTool(
    "from_mcp_config",
    {
      title: "Buttons from MCP config",
      description: "Generate install buttons from a raw MCP JSON-like config object and a server name.",
      inputSchema: {
        name: z.string().describe("Server display name."),
        mcp: z.any(),
      }
    },
    async ({ name, mcp }) => {
      const { inputs, config } = fromMcpConfigObject(name, mcp ?? {});
      const markdown = generateButtonsMarkdown(name, inputs, config);
      return { content: [{ type: "text", text: markdown }] };
    }
  );

• src/index.ts:137-140 (schema)

  Input schema definition for the 'from_mcp_config' tool using Zod, specifying 'name' as string and 'mcp' as any.

  inputSchema: {
    name: z.string().describe("Server display name."),
    mcp: z.any(),
  }

• src/lib/buttons.ts:47-56 (helper)

  Helper function used by the handler to parse the MCP config object into inputs (MCPInput[]) and config (CommandConfig).

  export function fromMcpConfigObject(name: string, configObj: any): { inputs: MCPInput[]; config: CommandConfig } {
    // Accepts a JSON like the example and converts env placeholders ${input:...} to VS Code expected rendering untouched.
    const inputs = Array.isArray(configObj.inputs) ? (configObj.inputs as MCPInput[]) : [];
  
    // For NPX-based servers, we expect the consumer to specify the npx invocation
    // Example: { command: 'npx', args: ['-y', '@scope/server@latest', '--flag'], env: { KEY: '${input:id}' } }
    // If not given, default to npx with no args
    const config: CommandConfig = configObj.config ?? { command: 'npx', args: [] };
    return { inputs, config };
  }

• src/lib/buttons.ts:1-12 (helper)

  Type definitions for MCPInput and CommandConfig used in the tool's inputs and config parsing.

  export type MCPInput = {
    type: string;
    id: string;
    description?: string;
    password?: boolean;
  };
  
  export type CommandConfig = {
    command: string; // e.g., "npx"
    args?: string[];
    env?: Record<string, string>;
  };