VS Code
Use the Vuesax catalog from GitHub Copilot's agent mode in VS Code.
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}"
}
}
}
}
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.
Use 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
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
Call 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.