The Vuesax MCP server

What is MCP

The Model Context Protocol is an open standard for connecting an AI assistant to an external system. The assistant discovers a set of tools the server exposes, and calls them on its own when the conversation needs them — the same way it reads a file or runs a command.

An MCP server is not a chatbot and not a plugin UI. It is a small API with self-describing tools. Vuesax runs one at https://mcp.vuesax.com, and every MCP-capable client can talk to it: Claude Code, Cursor, VS Code (Copilot agent mode), Windsurf, Zed, Cline and the rest.

What it changes

Without MCP, using a catalog means a loop of tab-switching: search the site, open a component, read the props, copy the code, paste it, fix the imports, discover it needs a stylesheet you didn't copy. Your assistant never sees any of it — it only sees the paste.

With MCP, the assistant does the whole loop itself:

• It searches the catalog with your words, not yours-translated-to-keywords.
• It reads the props before writing anything, so it configures the piece instead of guessing prop names.
• It pulls the exact source — every file of a multi-file component, plus the global tokens if the project is missing them.
• It adapts the code to your project in the same turn: your naming, your data, your framework conventions.

Requirements

• A PRO plan — annual or lifetime.
• An MCP key, generated from your dashboard.
• An editor that supports MCP over HTTP.

1 · Get your key

Open the dashboard and hit Generate key in the MCP panel. You get a token that starts with vsx_:

vsx_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

The panel shows it masked; click the eye to reveal it, and Copy to grab it. One key per account. Regenerating immediately revokes the old one, so every editor you had connected stops working until you paste the new value.

2 · Connect your editor

Pick your editor. In every case you are configuring the same three things: the URL, HTTP transport, and an Authorization header. Replace vsx_YOUR_KEY with your real key.

claude mcp add --transport http vuesax https://mcp.vuesax.com \
  --header "Authorization: Bearer vsx_YOUR_KEY"

{
  "mcpServers": {
    "vuesax": {
      "url": "https://mcp.vuesax.com",
      "headers": { "Authorization": "Bearer vsx_YOUR_KEY" }
    }
  }
}

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

{
  "mcpServers": {
    "vuesax": {
      "serverUrl": "https://mcp.vuesax.com",
      "headers": { "Authorization": "Bearer vsx_YOUR_KEY" }
    }
  }
}

{
  "context_servers": {
    "vuesax": {
      "source": "custom",
      "command": "npx",
      "args": [
        "-y",
        "mcp-remote",
        "https://mcp.vuesax.com",
        "--header",
        "Authorization: Bearer vsx_YOUR_KEY"
      ],
      "env": {}
    }
  }
}

{
  "mcpServers": {
    "vuesax": {
      "url": "https://mcp.vuesax.com",
      "headers": { "Authorization": "Bearer vsx_YOUR_KEY" }
    }
  }
}

3 · Verify it works

In Claude Code, /mcp lists connected servers; vuesax should report as connected with 13 tools. In the other editors, look for a green dot next to the server in the MCP settings panel.

If you prefer a real check, ask for something the model cannot know:

Ask the vuesax MCP to list components in the Disclosure category.

A list of real slugs means you are connected. A generic answer from memory means the tools were not loaded — restart, then check the key.

The 13 tools

The catalog is split into three families — components (buttons, inputs, modals), sections (heroes, pricing blocks, footers) and animations (canvas and motion pieces). Each family gets the same four tools, plus one shared skill installer.

Only the three get_*_source tools spend quota. Listing, searching and reading docs are free and unlimited — your agent can explore the catalog as much as it wants before committing to a pull.

Why the catalogs are separate

Each family has its own tools so the agent cannot blur them. Asking for a "pricing" component returns nothing useful; asking for a pricing section returns the block you meant. The separation is what keeps results sharp — the tool descriptions spell out the difference so the model picks correctly on its own.

How to actually use it

You never call tools by hand. You describe the outcome and let the assistant chain the calls — search, then docs, then source. Naming the MCP explicitly ("use the vuesax MCP") helps on the first request of a session.

Use the vuesax MCP: find a pricing section with a monthly/annual toggle,
then add it to src/components/Pricing.vue and wire it to our plans.

List vuesax animations in the WebGL category, then pull the source for
the one that looks like a fluid cursor.

Get the docs for vs-button from vuesax and show me which tones and
sizes it supports. Don't pull the source yet.

Pull vs-tabs from vuesax with includeGlobals: true — this project
doesn't have the token stylesheet yet.

Getting better results

• Say where the code goes. "Add it to src/components/Pricing.vue" beats "give me a pricing section" — the agent adapts imports and naming instead of dumping a file.
• Let it browse first. Listing and searching are free; a "show me what's available" turn costs nothing and picks better than a blind slug guess.
• Mention the missing globals. The first Vuesax piece in a fresh project needs tokens.css and effects.css — includeGlobals: true brings them.
• Install the skill once. See below — it is the single biggest quality jump.

The Vuesax skill

get_vuesax_skill returns a markdown guide that teaches your assistant how the catalog is organised, where files should land, and how tokens and effects are wired together. Installing it makes every later request noticeably sharper — the model stops guessing at conventions.

Ask for it once, at the start of a project:

Call get_vuesax_skill and install it.

The tool returns the guide plus install instructions, and your assistant writes the file for you — ~/.claude/skills/vuesax/SKILL.md for every project, or <repo>/.claude/skills/vuesax/SKILL.md for just this one. Restart afterwards; the skill activates on its own whenever Vuesax or a Vs* component comes up.

Quota

There isn't one. Source pulls are unmetered on both plans, Annual and Lifetime: pull as many components, sections, animations and wallpapers as the work needs, as often as you need them, over the MCP and the website alike.

The retired Monthly plan was metered — 40 components, 30 sections, 30 animations and 20 wallpapers per calendar month. It is no longer sold, and anyone still holding one keeps those limits; the tool output says what is left.

Your key, your usage and the tools it can reach are on the dashboard.

Key security

The key is tied to your account, and anything holding it can spend your quota. Treat it like a password.

• Don't commit it. A project-level mcp.json ends up in git — prefer the global config, or keep the file ignored.
• Don't paste it in chat. Not into an issue, not into your own assistant's conversation.
• Regenerate if in doubt. One click in the dashboard revokes the old key immediately. You then repaste it in the editors you use.

Troubleshooting

401 Unauthorized

The key is missing, malformed, revoked, or the account is not PRO. Check that the header name is exactly Authorization, that the value is Bearer + key (with the space), and that the key starts with vsx_. If you regenerated recently, the old key is dead — paste the new one.

503 with Retry-After

The auth backend is briefly unavailable. Retry in a few seconds; your key is fine and nothing was consumed.

A plan change wasn't picked up

Plan and key changes can take up to a minute to reach the server. Wait a minute and retry before assuming anything is wrong.

The tools don't appear

Almost always a restart issue — most editors load MCP servers once, at startup. Fully quit and reopen the application. If they still don't show, check the client's MCP log: a JSON syntax error in the config file fails silently in several editors.

Only one file came back

Expected for large items: over 64 KB the server returns the main file plus the list of remaining paths. Ask your assistant to fetch the rest with the file argument — it costs no extra quota, the item is already paid for this month.