Skip to content
VEXA
enes
@vexa/mcp

MCP & Design Skill

VEXA is AI-native. The @vexa/mcp server exposes the live registry, tokens, themes, and design rules to coding agents over the Model Context Protocol; the Design Skill teaches an agent how to build the VEXA way.

The seven MCP tools

All tools are read-only and read VEXA's own source at request time, so the catalog is never hardcoded.

  • list_componentsInput: no input

    Every registry item with type, title, description, frameworks, RSC boundary, and a11y note. Start here to discover what exists.

  • get_componentInput: name

    The full Open Code payload: each file's inlined content and install target, npm and @vexa registry dependencies, metadata, an example, and copy-in instructions.

  • search_componentsInput: query

    Search the registry by keyword across name, title, description, type, frameworks, RSC boundary, variants, and accessibility notes.

  • get_tokensInput: theme?

    Semantic tokens parsed from VEXA Core: per-theme color HSL triplets plus the radius, spacing, motion, shadow, and control scales.

  • list_themesInput: no input

    The Light, Obsidian, and Graphite themes with labels, descriptions, the default, and how to activate each.

  • get_design_guidanceInput: topic?

    Actionable guidance: principles, the Open Code workflow, RSC boundaries, token styling, API standards, WCAG 2.2 AA accessibility, and the agent brief.

  • get_registry_urlInput: name?

    The canonical registry endpoint, the @vexa namespace, a per-item URL, and the shadcn add command.

Connect it

The server speaks stdio. Build it once, then point any MCP client at the entry.

Build the server

pnpm --filter @vexa/mcp build

Add it to Claude Code

.mcp.json
{
  "mcpServers": {
    "vexa": {
      "command": "node",
      "args": ["/absolute/path/to/vexa/packages/mcp/dist/index.js"]
    }
  }
}
claude mcp add vexa -- node /absolute/path/to/vexa/packages/mcp/dist/index.js
The server runs from inside a VEXA checkout and makes no network calls. Set VEXA_REPO_ROOT to pin the repo explicitly.

The agent loop

  1. 1

    list_components or search_components to find a primitive.

  2. 2

    get_component to get its source, dependencies, and metadata.

  3. 3

    Write each file to its target; resolve registry dependencies the same way.

  4. 4

    get_tokens and list_themes to style with semantic tokens.

  5. 5

    get_design_guidance to apply RSC, API, and accessibility rules.

The Design Skill

vexa-design is an agent skill that teaches the VEXA way of building UI — beyond raw catalog access.

It activates when an agent works in a VEXA project or is asked to add a component the VEXA way, and it encodes:

  • The Open Code workflow — copy the source you own, prefer editing it over a giant prop API.
  • Semantic-token styling — never hardcode colors; compose variants with cva and cn.
  • RSC / 'use client' boundaries — keep static structure server-renderable.
  • WCAG 2.2 AA accessibility — keyboard models, focus, associated labels and errors.
  • VEXA's component API and state standards — every applicable state gets a visible treatment.