UseVyre Context

useVyre component context for AI agents — valid props, variants, anti-patterns, and design tokens.

Quick Install

Automated & IDE Setup

Copy the AI prompt to install this server into Claude Code, Cursor, or another agent — or use 1-click editor setup below.

Add to Cursor Add to VS Code

Manual Client & Custom JSON ConfigExpand JSON ▾

Client Config & Setup

Choose your client or environment

Target File:~/Library/Application Support/Claude/claude_desktop_config.json

claude_desktop_config.json

{
  "mcpServers": {
    "usevyre-context": {
      "command": "npx",
      "args": [
        "-y",
        "usevyre-context"
      ]
    }
  }
}

💡 Paste the JSON block into your client's configuration file under mcpServers, then restart the application.

Documentation Overview

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

bash

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

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

server.ts

// 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

Code

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

server.ts

# 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:

bash

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

Read the full README →View source on GitHub →

Related MCP Servers

View all in Developer Tools View all alternatives

Reviews

No reviews yet — be the first to share how this listing worked for you.

Frequently Asked Questions about UseVyre Context

Add the following block to your claude_desktop_config.json under mcpServers: "mcpServers": { "usevyre-context": { "command": "npx", "args": ["-y", "useVyre Context"] } }

AllMCPs Directory Badge

Full Badge Customizer

Showcase your server listing on GitHub or your project documentation. Embed this dynamic SVG badge to highlight official listing status and live engagement.

Badge Style:

Live Dynamic SVG Preview

Markdown (GitHub README)

[![AllMCPs](https://allmcps.com/api/badge/usevyre-context?style=directory)](https://allmcps.com/mcp/usevyre-context)

HTML Embed

<a href="https://allmcps.com/mcp/usevyre-context"><img src="https://allmcps.com/api/badge/usevyre-context?style=directory" alt="UseVyre Context on AllMCPs" /></a>

Technical Specs & Signals

CategoryDeveloper Tools

27Quality signal: Emerging · 27/100How this signal is calculated ▾

Server availabilityNot measured

Not scored for repo-hosted servers — we can't reach the running server, only its GitHub page. Hosted MCP endpoints are health-checked live.

Verified ownership8/20

Documentation & tools11/30

Adoption & activity1/15

Community engagement0/10

A guidance signal from public completeness & health data — not a user rating. New listings start lower and rise as they add docs, get verified, and grow adoption. Signals we can't observe for a listing are skipped, not counted against it.

★ Featured

Moxie Docs MCP

MCP & Agent Skills for Automated Documentation, and codebase conventions + context

Explore Server →

Own this project?

This directory is pre-filled from public sources. Claim via GitHub README, site badge, or DNS TXT to unlock edit access and the Official badge — proof is checked automatically, then reviewed by our team.

Free dofollow backlink: add your website and place the AllMCPs badge on it — no claim needed. We detect it automatically and keep it verified as long as the badge stays live.

Claim & get free dofollow

Share & Embed

Add our SVG badge (dark/light directory styles) or embeddable widget to your site.

Explore more

More in 💻 Developer Tools →Best MCP servers for Developers →Alternatives to UseVyre Context →Install in Claude Desktop Install in Cursor Install in VS Code

UseVyre Context

useVyre component context for AI agents — valid props, variants, anti-patterns, and design tokens.

Quick Install

Automated & IDE Setup

Copy the AI prompt to install this server into Claude Code, Cursor, or another agent — or use 1-click editor setup below.

Add to Cursor Add to VS Code

Manual Client & Custom JSON ConfigExpand JSON ▾

Client Config & Setup

Choose your client or environment

Target File:~/Library/Application Support/Claude/claude_desktop_config.json

claude_desktop_config.json

{
  "mcpServers": {
    "usevyre-context": {
      "command": "npx",
      "args": [
        "-y",
        "usevyre-context"
      ]
    }
  }
}

💡 Paste the JSON block into your client's configuration file under mcpServers, then restart the application.

Documentation Overview

useVyre

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

Why useVyre?

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

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

bash

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

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

server.ts

// 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

Code

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

server.ts

# 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:

bash

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

Read the full README →View source on GitHub →

Related MCP Servers

View all in Developer Tools View all alternatives

Reviews

No reviews yet — be the first to share how this listing worked for you.

Frequently Asked Questions about UseVyre Context

Add the following block to your claude_desktop_config.json under mcpServers: "mcpServers": { "usevyre-context": { "command": "npx", "args": ["-y", "useVyre Context"] } }

AllMCPs Directory Badge

Full Badge Customizer

Showcase your server listing on GitHub or your project documentation. Embed this dynamic SVG badge to highlight official listing status and live engagement.

Badge Style:

Live Dynamic SVG Preview

Markdown (GitHub README)

[![AllMCPs](https://allmcps.com/api/badge/usevyre-context?style=directory)](https://allmcps.com/mcp/usevyre-context)

HTML Embed

<a href="https://allmcps.com/mcp/usevyre-context"><img src="https://allmcps.com/api/badge/usevyre-context?style=directory" alt="UseVyre Context on AllMCPs" /></a>

Technical Specs & Signals

CategoryDeveloper Tools

27Quality signal: Emerging · 27/100How this signal is calculated ▾

Server availabilityNot measured

Not scored for repo-hosted servers — we can't reach the running server, only its GitHub page. Hosted MCP endpoints are health-checked live.

Verified ownership8/20

Documentation & tools11/30

Adoption & activity1/15

Community engagement0/10

★ Featured

Moxie Docs MCP

MCP & Agent Skills for Automated Documentation, and codebase conventions + context

Explore Server →

Own this project?

Free dofollow backlink: add your website and place the AllMCPs badge on it — no claim needed. We detect it automatically and keep it verified as long as the badge stays live.

Claim & get free dofollow

Share & Embed

Add our SVG badge (dark/light directory styles) or embeddable widget to your site.

Explore more

More in 💻 Developer Tools →Best MCP servers for Developers →Alternatives to UseVyre Context →Install in Claude Desktop Install in Cursor Install in VS Code