Server data from the Official MCP Registry
useVyre component context for AI agents — valid props, variants, anti-patterns, and design tokens.
useVyre component context for AI agents — valid props, variants, anti-patterns, and design tokens.
Valid 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.
This plugin requests these system permissions. Most are normal for its category.
Add this to your MCP configuration file:
{
"mcpServers": {
"io-github-gapra-usevyre-context": {
"args": [
"-y",
"@usevyre/mcp-server"
],
"command": "npx"
}
}
}From the project's GitHub README.
AI-native design system for humans and agents. Built on semantic CSS variables — no runtime magic, no hallucinations.
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 |
| 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 |
# 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
--vyre-color-semantic-accent not --amber-400usevyre/
├── packages/
│ ├── tokens/ @usevyre/tokens
│ ├── react/ @usevyre/react
│ ├── vue/ @usevyre/vue
│ └── ai-context/ @usevyre/ai-context
├── apps/
│ └── docs/ usevyre.com documentation site
└── README.md
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
This project is in early development. Feedback, ideas, and bug reports are very welcome — open an issue to get started.
MIT © Gapra
Be the first to review this server!
by Modelcontextprotocol · Developer Tools
Read, search, and manipulate Git repositories programmatically
by Toleno · Developer Tools
Toleno Network MCP Server — Manage your Toleno mining account with Claude AI using natural language.
by mcp-marketplace · Developer Tools
Create, build, and publish Python MCP servers to PyPI — conversationally.