VS Code

Use the Vuesax catalog from GitHub Copilot's agent mode in VS Code.

MCP & AI editors 1 min read

TL;DR · Copilot, in Agent mode

Declare the server in .vscode/mcp.json.
Use an inputs prompt for the key, and the file is safe to commit.
MCP tools only exist in Agent mode, not Ask or Edit.

VS Code supports MCP through Copilot agent mode. Servers are declared per workspace in .vscode/mcp.json, or globally in your user settings.

Add the server

Create .vscode/mcp.json:

{
  "inputs": [
    {
      "id": "vuesax-key",
      "type": "promptString",
      "description": "Vuesax PRO key (vsx_…)",
      "password": true
    }
  ],
  "servers": {
    "vuesax": {
      "type": "http",
      "url": "https://mcp.vuesax.com",
      "headers": {
        "Authorization": "Bearer ${input:vuesax-key}"
      }
    }
  }
}

Committing a config with no secret in it.

The inputs block is the point: VS Code prompts for the key once and stores it in secret storage, so the file is safe to commit and share with the team.

Open the file and click Start above the server entry, or run MCP: List Servers from the command palette.

Use it

Open Chat (⌃⌘I), switch the mode selector to Agent, and confirm the tools picker lists the vuesax tools.

YouUse the vuesax tools: find an input with validation states, add it to src/components/ui/ and use it in the signup form.

Copilot asks for confirmation before each tool call the first time. Choose Always allow for this workspace if you’d rather not confirm every pull.

Hardcoding the key instead

A key in plain text. Fine on your machine. Only there.

If you don’t want the prompt (personal machine, not committed):

{
  "servers": {
    "vuesax": {
      "type": "http",
      "url": "https://mcp.vuesax.com",
      "headers": { "Authorization": "Bearer vsx_your_key_here" }
    }
  }
}

Then add .vscode/mcp.json to .gitignore.

Install the skill

YouCall get_vuesax_skill and save the result to .github/copilot-instructions.md

Copilot reads that file on every request in the workspace, so the catalog’s conventions apply without you repeating them. See Skills.

If the tools don’t show up

Agent mode is required — MCP tools do not exist in Ask or Edit mode.
Update VS Code; MCP support landed in recent versions and moved fast.
Run MCP: List Servers → vuesax → Show Output to see the connection error.
A 401 there means the key is missing, malformed, revoked or not PRO.