Back to Browse
Free
Server data from the Official MCP Registry
useVyre component context for AI agents — valid props, variants, anti-patterns, and design tokens.
About
useVyre component context for AI agents — valid props, variants, anti-patterns, and design tokens.
Security Report
9.7
Low Risk9.7Low RiskValid MCP server (2 strong, 3 medium validity signals). No known CVEs in dependencies. ⚠️ Package registry links to a different repository than scanned source. Imported from the Official MCP Registry. 1 finding(s) downgraded by scanner intelligence.
15 files analyzed · 1 issue found
Security scores are indicators to help you make informed decisions, not guarantees. Always review permissions before connecting any MCP server.
Permissions Required
This plugin requests these system permissions. Most are normal for its category.
How to Install
Add this to your MCP configuration file:
{
"mcpServers": {
"io-github-gapra-usevyre-context": {
"args": [
"-y",
"@usevyre/mcp-server"
],
"command": "npx"
}
}
}Documentation
View on GitHubFrom the project's GitHub README.
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.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
Reviews
No reviews yet
Be the first to review this server!
More Developer Tools MCP Servers
Git
Freeby Modelcontextprotocol · Developer Tools
Read, search, and manipulate Git repositories programmatically
80.0K
Stars
6
Installs
6.5
Security
No ratings yet
Local
Fetch
Freeby Modelcontextprotocol · Developer Tools
Web content fetching and conversion for efficient LLM usage
80.0K
Stars
4
Installs
5.3
Security
No ratings yet
Local
Toleno
Freeby Toleno · Developer Tools
Toleno Network MCP Server — Manage your Toleno mining account with Claude AI using natural language.
137
Stars
525
Installs
8.0
Security
4.8
Local