useVyre Context
useVyre component context for AI agents — valid props, variants, anti-patterns, and design tokens.
Install
Add this to your client's MCP configuration (Claude Desktop: claude_desktop_config.json; Cursor: .cursor/mcp.json; VS Code and others use the same "mcpServers" shape).
@usevyre/mcp-serverclaude mcp add usevyre-context -- npx -y @usevyre/mcp-server@1.0.3{
"mcpServers": {
"usevyre-context": {
"command": "npx",
"args": [
"-y",
"@usevyre/mcp-server@1.0.3"
]
}
}
}Documentation
From the project's README on GitHub, refreshed weekly. Links open on GitHub.
Contents
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-accentnot--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.mdLocal 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 devOpen http://localhost:4321 in your browser.
Shortcut — tokens build + dev server in one command:
pnpm dev:docsContributing
This project is in early development. Feedback, ideas, and bug reports are very welcome — open an issue to get started.
License
MIT © Gapra
Frequently asked questions
What is useVyre Context?
useVyre component context for AI agents — valid props, variants, anti-patterns, and design tokens.
How do I install useVyre Context?
It runs on your machine. In Claude Code: claude mcp add usevyre-context -- npx -y @usevyre/mcp-server@1.0.3. For other clients, paste the JSON configuration from this page into their MCP settings.
Does useVyre Context need an API key?
Its registry entry lists no required key or secret. Some features may still need an account with the service it connects to.
Is useVyre Context open source?
Yes. Its code is on GitHub under the MIT license.
Who maintains useVyre Context?
It is published by gapra. AI.tn lists it but does not maintain or endorse it.
From the official MCP Registry. Listing is not an endorsement: review a server's code and permissions before giving it access to your data.