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
| Package | Version | Description |
|---|---|---|
@usevyre/tokens |  | DTCG-compliant design tokens → CSS variables, JS/TS, JSON |
@usevyre/react | | React + TypeScript components |
@usevyre/vue |  | Vue 3 + TypeScript components |
@usevyre/ai-context |  | Machine-readable context for LLM system prompts |
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/tokens/css"; // design tokens (required)
import "@usevyre/react/styles"; // component styles
import { Button, Badge, Card } from "@usevyre/react";
Full setup guide → usevyre.com/docs/installation
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
│ └── ai-context/ @usevyre/ai-context
├── 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
SITE_MODE=live pnpm --filter @usevyre/docs dev
Open http://localhost:4321 in your browser.
Why
SITE_MODE=live? Without it the landing page shows a coming-soon screen. All/docs/*pages are accessible either way.
Shortcut — tokens build + dev server in one command:
SITE_MODE=live 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
4
Installs
6.5
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
448
Installs
8.0
Security
4.8
Local
mcp-creator-python
Freeby mcp-marketplace · Developer Tools
Create, build, and publish Python MCP servers to PyPI — conversationally.
-
Stars
59
Installs
10.0
Security
5.0
Local