useVyre Context
useVyre component context for AI agents — valid props, variants, anti-patterns, and design tokens.
Installation
Ajoutez ceci à la configuration MCP de votre client (Claude Desktop : claude_desktop_config.json ; Cursor : .cursor/mcp.json ; VS Code et les autres utilisent la même forme « mcpServers »).
@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
Tirée du README du projet sur GitHub, actualisée chaque semaine. Les liens ouvrent GitHub.
Sommaire
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
Questions fréquentes
Qu'est-ce que useVyre Context ?
useVyre component context for AI agents — valid props, variants, anti-patterns, and design tokens.
Comment installer useVyre Context ?
Il s'exécute sur votre machine. Dans Claude Code : claude mcp add usevyre-context -- npx -y @usevyre/mcp-server@1.0.3. Pour les autres clients, collez la configuration JSON de cette page dans leurs réglages MCP.
Faut-il une clé API pour useVyre Context ?
Son entrée au registre n'indique aucune clé ni secret obligatoire. Certaines fonctions peuvent tout de même demander un compte auprès du service auquel il se connecte.
useVyre Context est-il open source ?
Oui. Son code est sur GitHub sous licence MIT.
Qui maintient useVyre Context ?
Il est publié par gapra. AI.tn le référence sans le maintenir ni le recommander.
Issu du registre MCP officiel. Être listé n'est pas une recommandation : vérifiez le code et les permissions d'un serveur avant de lui donner accès à vos données.