@usevyre/mcp-server

Setup — Claude Desktop

Edit your Claude Desktop config file and add the mcpServers block. Restart Claude Desktop after saving — the server starts automatically.

macOS

// ~/Library/Application Support/Claude/claude_desktop_config.json
{
  "mcpServers": {
    "usevyre-context": {
      "command": "npx",
      "args": ["-y", "@usevyre/mcp-server"]
    }
  }
}

Windows

// %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "usevyre-context": {
      "command": "npx",
      "args": ["-y", "@usevyre/mcp-server"]
    }
  }
}

Setup — Cursor IDE

Create .cursor/mcp.json in your project root (or ~/.cursor/mcp.json for global config), then enable MCP in Cursor Settings → Features → MCP.

// .cursor/mcp.json (project) or ~/.cursor/mcp.json (global)
{
  "mcpServers": {
    "usevyre-context": {
      "command": "npx",
      "args": ["-y", "@usevyre/mcp-server"]
    }
  }
}

Available tools

Claude and Cursor call these tools automatically. You can also invoke them explicitly by asking things like "use get_token_info to look up the accent token".

Tool examples

get_component_info

// Input
{ "component": "Button" }

// Output (cheat sheet format)
## Button
Triggers actions and navigation.

import: import { Button } from "@usevyre/react"

Props:
  variant  = "primary" | "secondary" | "ghost" | "accent" | "teal" | "danger" (default: secondary)
  size     = "sm" | "md" | "lg" | "icon" (default: md)
  loading  = boolean (default: false)
  disabled = boolean (default: false)

Common mistakes:
  ❌ variant="blue"   → Use variant="accent"
  ❌ size="xl"        → Max size is "lg"
  ❌ color="red"      → No color prop — use variant="danger"

get_token_info

// Look up a specific token
{ "token": "accent" }

// Output
## --vyre-color-semantic-accent

Primary brand accent. CTAs, highlights, focus rings.

Light: "#7c3aed"
Dark:  "#a78bfa"

Aliases:
  Light → color.primitive.violet.600
  Dark  → color.primitive.violet.400

Usage:
  - Button primary background
  - Link active state
  - Focus ring
  - Badge accent variant
  - Active nav indicator

Related tokens:
  - --vyre-color-semantic-accent-hover
  - --vyre-color-semantic-accent-foreground
  - --vyre-color-semantic-accent-subtle

// List a category
{ "category": "spacing" }

// Output
## useVyre spacing tokens
4px base grid. Use for padding, margin, gap.

--vyre-spacing-0 = 0
--vyre-spacing-1 = 0.25rem — 4px
--vyre-spacing-2 = 0.5rem  — 8px
...

check_valid_prop_value

// Input
{ "component": "Button", "prop": "variant", "value": "blue" }

// Output
❌ "blue" is NOT a valid value for Button variant.
Valid values: "primary", "secondary", "ghost", "accent", "teal", "danger"
Did you mean: "primary"?

suggest_component

// Input
{ "use_case": "show a transient success notification" }

// Output
Suggested useVyre components for "show a transient success notification":
- Toast: Temporary notification messages with auto-dismiss
  Import: import { toast } from "@usevyre/react"
- Alert: Inline feedback messages for success, warning, error, info
  Import: import { Alert } from "@usevyre/react"

Prompt examples

These prompts trigger the MCP tools automatically — no manual invocation needed.

Without MCP

If you prefer not to use MCP, copy the context into your CLAUDE.md manually using @usevyre/ai-context. MCP automates this and keeps context in sync with your installed package version automatically.

Troubleshooting

Server not appearing in Claude Desktop

• Fully quit and relaunch Claude Desktop (menu bar → Quit, not just close window)
• Check the config file is valid JSON — use a JSON validator
• macOS path must be exact: ~/Library/Application Support/Claude/claude_desktop_config.json
• Check Claude Desktop logs: ~/Library/Logs/Claude/

npx command not found

• Ensure Node.js ≥ 18 is installed: node --version
• If Claude Desktop can't find npx, use the absolute path: which npx on macOS/Linux
• Alternatively, install globally and use a direct path:

  // Use a local path if you want to pin the version
  {
    "mcpServers": {
      "usevyre-context": {
        "command": "node",
        "args": ["/absolute/path/to/node_modules/@usevyre/mcp-server/src/index.js"]
      }
    }
  }

Tools not being called automatically

• MCP tools are called at Claude's discretion — mention "useVyre" explicitly in your prompt
• You can always trigger a tool directly: "Call get_component_info for Button"
• Check that the server is connected — look for the MCP indicator in Claude Desktop's interface