MCP server
Connect your AI editor to the Vuesax catalog so it can list, read and paste any component without you leaving the IDE.
The Vuesax MCP server puts the whole catalog inside your AI editor. 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).
| 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. Optional file to fetch one path, includeGlobals to add the token/effect stylesheets. |
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:
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.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:
Call 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 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.
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. 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.