Model Context Protocol PRO

The whole Vuesax catalog, one prompt away.

Connect your AI editor once. Then describe what you need — your assistant finds the right piece, reads its props and writes the real source straight into your project.

Get your key
Set up in a minute
Tools
13
Catalogs
3
Source pulls
Unlimited
Works with
  • Claude Code
  • Cursor
  • VS Code
  • Windsurf
  • Zed
  • + any MCP client
~/my-app — Claude Code vuesax

Add a pricing section with a monthly / yearly toggle to the landing page.

  1. vuesax · search_sections "pricing toggle" 6 matches
  2. vuesax · get_section_docs sec-pricing-scale 6 props
  3. vuesax · get_section_source sec-pricing-scale 1 file

Done — <vs-sec-pricing-scale> is on the landing page with your three plans, yearly selected by default.

  • src/components/vs-sec-pricing-scale.jsnew
  • src/pages/index.astro+4

Quickstart

Connected in three steps

No SDK, nothing to install — a URL and a key. Paste your key once and every snippet below is ready to copy.

  1. Get your key

    Open the dashboard and hit Generate key. One key per account — it starts with vsx_. Regenerating revokes the old one on the spot.

    No PRO plan yet? See plans

    Open dashboard

    Optional. It only fills in the snippets on this page — never sent, never saved.

  2. Connect your editor

    Pick yours and paste. Every editor gets the same three things: the URL, HTTP transport and your key as a Bearer header.

    Endpoint
    https://mcp.vuesax.com
    Transport
    Streamable HTTP
    Auth
    Bearer vsx_…

    Run it in your terminal — no config file to edit:

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

    Add --scope user to make it available in every project instead of just the current one.

  3. Restart and ask

    Fully quit and reopen the editor — most load MCP servers only at startup. Then ask for something only the catalog knows.

    In Claude Code, /mcp should list vuesax with 13 tools.

    Try this prompt

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

    Real slugs back — vs-accordion, vs-accordion-glow, vs-accordion-slide… means you're in. A generic answer from memory means the tools didn't load: restart, then check the key.

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

Using a catalog by hand is a loop of tab-switching — and your assistant never sees any of it, only the paste. With MCP it runs the whole loop itself.

Without MCP

  1. Search the website
  2. Open the component
  3. Read the props
  4. Copy the code
  5. Paste it and fix the imports
  6. Find the stylesheet you didn't copy

With MCP

“Add a pricing section with a yearly toggle.”

  • Searches in your words
  • Reads the props before writing
  • Pulls every file, globals included
  • Adapts it to your naming and data
The catalog is identical The MCP serves the same source you see on the website — same files, same version. Nothing is simplified or regenerated for the AI.

Requirements

PRO only The MCP server requires a PRO key. Every request without a valid key answers 401. There is no free tier on the MCP — the free previews live on the website only.
  • A PRO plan — annual or lifetime.
  • An MCP key, generated from your dashboard.
  • An editor that supports MCP over HTTP.

The 13 tools

Three catalogs — components, sections and animations — each with the same four verbs, plus one shared skill installer. Your assistant picks the right one on its own.

Components Buttons, inputs, modals Sections Heroes, pricing, footers Animations Canvas and motion
List Every item, one line each category?, subcategory? list_componentslist_sectionslist_animations
Search Plain words, all must match query search_componentssearch_sectionssearch_animations
Docs Props, types and defaults slug get_component_docsget_section_docsget_animation_docs
Source The real files, ready to paste slug, file?, includeGlobals? get_component_sourceget_section_sourceget_animation_source
Skill Shared by all three get_vuesax_skill The Vuesax usage guide plus how to install it — see below.

Only the three get_*_source tools pull code. Listing, searching and reading docs are always free — let your agent browse as much as it wants before it commits to a pull. Large items come back as the main file plus a list of remaining paths, fetched one at a time with file; includeGlobals: true also returns tokens.css and effects.css.

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.

Find and paste a section

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.

Browse a category first

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

Check props before committing

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

Bring the globals along

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

Annual and Lifetime have no per-catalog allowance: pull components, sections, animations and wallpapers as the work needs them, over the MCP and the website alike.

Every plan sits under a fair-use limit: 30 new items a day and 300 a month, counted across all catalogs and shared between the MCP and the website. Re-fetching something you already pulled this month is always free, so the limit only ever meets a script walking the catalog, not a person building a site. The tool output says when it is reached and when it resets.

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.

Still stuck? Email support@vuesax.com with the editor you use and the exact error. Never include your key.