MCP server
Connect your AI editor to the Vuesax catalog so it can list, read and paste any component without you leaving the IDE.
TL;DR · your editor, plugged into the catalog
- One URL, one header:
https://mcp.vuesax.com+Bearer vsx_…. - You describe what you want; the assistant searches, reads the docs and pulls the real source.
- PRO only. Pulls are unmetered on Annual and Lifetime.
Instead of copying code from the website, you ask your assistant for a component and it pulls the real source — props, styles, effects and all — straight into your project.
It speaks the Model Context Protocol, so it works with any MCP-capable client: Claude Code, Cursor, VS Code (Copilot), Windsurf, Zed, Cline and the rest.
401. Grab a key from the dashboard after
upgrading on pricing.
Connection details
| URL | https://mcp.vuesax.com |
| Transport | Streamable HTTP |
| Auth header | Authorization: Bearer vsx_… |
Keys always start with vsx_. Treat one like a password: it is tied to your
account, and anything that holds it can pull the whole catalog as you.
Setup, editor by editor
What the server exposes
Thirteen tools: one for the skill, and four for each of the three catalogs (components, sections, animations). A good assistant uses them in this order:
list_*/search_*get_*_docsget_*_source
| Tool | What it does |
|---|---|
list_components · list_sections · list_animations | Every item in the catalog, filterable by category, subcategory, framework. |
search_components · search_sections · search_animations | Free-text search over name, category, slug and description. Every word must match. |
get_component_docs · get_section_docs · get_animation_docs | Description plus the full prop/control list with defaults and options. |
get_component_source · get_section_source · get_animation_source | The real source files. Pass framework (react, next, vue, nuxt, svelte, angular, astro, html) — React/Next adds the typed wrapper VsX.tsx and the .d.ts types, the others add setup notes. Large items come in several calls: the answer names the next file (and part) to fetch. |
get_vuesax_skill | Returns the Vuesax skill (a usage guide for your assistant) plus install instructions. |
Only the three get_*_source tools consume quota. Listing, searching and
reading docs are free and unlimited.
Talking to it
You never call tools by hand — you describe what you want:
YouUse 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.
Your editorSearched sections for "pricing toggle", read the docs for vs-sec-pricing-toggle, pulled its source and set plans from your config.
YouList vuesax animations in the WebGL category, then pull the source for the one that looks like a fluid cursor.
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. Installing it makes every later request noticeably sharper — the model
stops guessing at conventions.
Ask once, at the start:
YouCall get_vuesax_skill and install it.
See Skills for what it contains and where it is stored.
Quota
Source pulls are unmetered on both current plans, Annual and Lifetime: pull as many components, sections, animations and wallpapers as your work needs, as often as you need them.
The counter is shared with the website’s copy-code button, so a component you already pulled from the site is free over MCP too.
The retired Monthly plan was metered (40 components, 30 sections, 30 animations and 20 wallpapers per calendar month, UTC). It is no longer sold, and anyone still holding one keeps those limits. When you get close, the tool output tells you how many are left and when the count resets.
Troubleshooting
401 Unauthorized — the key is missing, malformed (must start with vsx_),
revoked, or the account is not PRO. Check the header name is exactly
Authorization and the value is Bearer + key.
503 with Retry-After — the auth backend is briefly unavailable. Retry in a
few seconds; your key is fine.
Plan change not picked up — plan and key changes take up to a minute to reach the server. Wait, then retry.
The tools do not appear — most editors only load MCP servers at startup. Fully restart the editor (not just the chat panel) after editing config.