Name: useVyre Context
Author: gapra

What can you do with useVyre Context?

useVyre

AI-native design system for humans and agents. Built on semantic CSS variables — no runtime magic, no hallucinations.

Why useVyre?

Most design systems were built for humans reading documentation. useVyre is built for both — every naming convention, token structure, and component API is designed so that AI coding agents (Claude, Cursor, Copilot, Windsurf) can generate correct, consistent UI without guessing.

Problem	useVyre solution
AI hallucinates component props	Every component has an inline AI context block
AI uses raw color values	Semantic tokens replace all raw colors
AI generates inconsistent spacing	4px grid enforced via spacing tokens
AI doesn't know valid variants	`data-variant` API is explicit and enumerated
Design system only works in one framework	CSS variables work everywhere

Packages

Core

Package	Version	Downloads	Description
`@usevyre/tokens`			DTCG-compliant design tokens → CSS variables, JS/TS, JSON
`@usevyre/react`			React + TypeScript components
`@usevyre/vue`			Vue 3 + TypeScript components
`@usevyre/init`			One-command setup CLI (`npx @usevyre/init`)
`@usevyre/all` · `react-all` · `vue-all`	—	—	Convenience meta-packages (tokens + components in one install)

AI tooling

Package	Version	Downloads	Description
`@usevyre/ai-context`			Machine-readable component schema for LLM system prompts
`@usevyre/mcp-server`			MCP server — gives agents live access to the component schema
`@usevyre/eslint-plugin`			Lints for invalid variants, raw colors, hallucinated props
`@usevyre/validate-ai-context`			CI check that the AI context stays in sync with components
`@usevyre/prompt-templates`			Ready-made prompts for generating UI with useVyre

Components

40+ production-ready components for React and Vue — buttons, forms (Input, Field, Radio, Checkbox, Select), overlays (Modal, Sheet, Popover, Tooltip), data (DataGrid, Table, Pagination), layout (Sidebar/AppLayout, Card, Tabs), and richer pieces like Kanban, Conversation (chat), DateRangePicker, and a zero-dependency RichTextEditor — plus more on the way.

Every component ships with an inline AI-context block, a machine-readable schema entry, and documented anti-patterns.

Browse the full list with live demos → usevyre.com/docs/components

Quick Start

# React
npm install @usevyre/tokens @usevyre/react

# Vue 3
npm install @usevyre/tokens @usevyre/vue

// Import once at your app entry point
import "@usevyre/react/styles";   // tokens + component styles (one import)

import { Button, Card, DataGrid } from "@usevyre/react";

Full setup guide → usevyre.com/docs/installation

Examples

Real, multi-page layouts built entirely from useVyre components:

Dashboard app — functional 5-page billing dashboard with working sidebar navigation
Sign-in — auth form with validation
All examples →

Design Principles

Semantic over primitive — --vyre-color-semantic-accent not --amber-400
Explicit over implicit — every valid value is documented inline
Zero runtime — pure CSS variables, works in any framework
AI-first naming — token names describe intent, not appearance
Copy-paste friendly — no mandatory build setup, just import CSS and go

Monorepo Structure

usevyre/
├── packages/
│   ├── tokens/                @usevyre/tokens
│   ├── react/                 @usevyre/react
│   ├── vue/                   @usevyre/vue
│   ├── all/ react-all/ vue-all/   convenience meta-packages
│   ├── ai-context/            @usevyre/ai-context
│   ├── mcp-server/            @usevyre/mcp-server
│   ├── eslint-plugin/         @usevyre/eslint-plugin
│   ├── validate-ai-context/   @usevyre/validate-ai-context
│   └── prompt-templates/      @usevyre/prompt-templates
├── apps/
│   └── docs/                  usevyre.com documentation site
└── README.md

Local Development

Run the docs site locally to browse all component examples and live demos.

Prerequisites: Node.js ≥ 18, pnpm ≥ 9

# 1. Clone and install
git clone https://github.com/gapra/usevyre.git
cd usevyre
pnpm install

# 2. Build design tokens (required — components import CSS variables from here)
pnpm --filter @usevyre/tokens build

# 3. Start the docs dev server
pnpm --filter @usevyre/docs dev

Open http://localhost:4321 in your browser.

Shortcut — tokens build + dev server in one command:

pnpm dev:docs

Contributing

This project is in early development. Feedback, ideas, and bug reports are very welcome — open an issue to get started.

License

MIT © Gapra

Install

Add useVyre Context to your client. Pick the one you use.

claude mcp add mcp-server -- npx -y @usevyre/mcp-server

codex mcp add mcp-server -- npx -y @usevyre/mcp-server

amp mcp add mcp-server -- npx -y @usevyre/mcp-server

{
  "mcpServers": {
    "mcp-server": {
      "command": "npx",
      "args": [
        "-y",
        "@usevyre/mcp-server"
      ]
    }
  }
}

Add to `claude_desktop_config.json`, then restart Claude Desktop.

{
  "mcpServers": {
    "mcp-server": {
      "command": "npx",
      "args": [
        "-y",
        "@usevyre/mcp-server"
      ]
    }
  }
}

Add to `~/.cursor/mcp.json`, or `.cursor/mcp.json` for a single project.

code --add-mcp '{"name":"mcp-server","command":"npx","args":["-y","@usevyre/mcp-server"]}'

Or add the block manually to `.vscode/mcp.json` under `servers`.

{
  "mcpServers": {
    "mcp-server": {
      "command": "npx",
      "args": [
        "-y",
        "@usevyre/mcp-server"
      ]
    }
  }
}

Add to `~/.codeium/windsurf/mcp_config.json`.

{
  "mcpServers": {
    "mcp-server": {
      "command": "npx",
      "args": [
        "-y",
        "@usevyre/mcp-server"
      ]
    }
  }
}

Add to `cline_mcp_settings.json` via the MCP Servers panel.

{
  "mcpServers": {
    "mcp-server": {
      "command": "npx",
      "args": [
        "-y",
        "@usevyre/mcp-server"
      ]
    }
  }
}

Add to `~/.gemini/settings.json`.

{
  "mcpServers": {
    "mcp-server": {
      "type": "local",
      "command": "npx",
      "args": [
        "-y",
        "@usevyre/mcp-server"
      ],
      "tools": [
        "*"
      ]
    }
  }
}

Add to `~/.copilot/mcp-config.json`, or run `/mcp add` inside the CLI.

{
  "context_servers": {
    "mcp-server": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "@usevyre/mcp-server"
        ]
      }
    }
  }
}

Add to your Zed `settings.json`.

npx -y @usevyre/mcp-server

Run `goose configure`, choose **Add Extension → Command-line Extension**, and paste this command.

Score

39 / 100

Incomplete

Documentation20/25
Maintenance19/25
Trust13/20
Capability0/15
Install experience12/15

Documents what it does and how to connect
Has a resolvable package or endpoint
Exposes at least one tool, prompt or resource
README has substantive content
Includes a code example
Documents its configuration
Mentions credentials or security posture
Last commit 28 days ago
Has a release history
Repository is not archived
Licensed MIT
Namespace verified in the official MCP registry
Claimed by its owner
Published under an organisation
0 tool(s) documented
Provides prompt templates
Provides resources
12 documented install method(s)
Published to a package registry
Offers a hosted endpoint — no local install

Read the full rubric →

Version history

Versions	Published
1.0.3Latest	May 13, 2026
1.0.2	May 13, 2026