English Français العربية

useVyre Context

السجل الرسمي الوسائط والتصميم

useVyre component context for AI agents — valid props, variants, anti-patterns, and design tokens.

الشيفرة المصدرية الموقع التوثيق

التثبيت

أضف هذا إلى إعدادات MCP في عميلك (Claude Desktop: claude_desktop_config.json، وCursor: ‏.cursor/mcp.json، ويستخدم VS Code وغيره الصيغة نفسها «mcpServers»).

NPM package @usevyre/mcp-server
Claude Code 
claude mcp add usevyre-context -- npx -y @usevyre/mcp-server@1.0.3
إعداد JSON (Claude Desktop وCursor وVS Code) 
{
    "mcpServers": {
        "usevyre-context": {
            "command": "npx",
            "args": [
                "-y",
                "@usevyre/mcp-server@1.0.3"
            ]
        }
    }
}

التوثيق

مأخوذ من ملف README للمشروع على GitHub ويُحدَّث أسبوعيًا. تفتح الروابط على GitHub.

المحتويات
  1. useVyre
  2. Why useVyre?
  3. Packages
  4. Components
  5. Quick Start
  6. Examples
  7. Design Principles
  8. Monorepo Structure
  9. Local Development
  10. Contributing
  11. License

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.

ProblemuseVyre solution
AI hallucinates component propsEvery component has an inline AI context block
AI uses raw color valuesSemantic tokens replace all raw colors
AI generates inconsistent spacing4px grid enforced via spacing tokens
AI doesn't know valid variantsdata-variant API is explicit and enumerated
Design system only works in one frameworkCSS variables work everywhere

Packages

Core

PackageVersionDownloadsDescription
@usevyre/tokensDTCG-compliant design tokens → CSS variables, JS/TS, JSON
@usevyre/reactReact + TypeScript components
@usevyre/vueVue 3 + TypeScript components
@usevyre/initOne-command setup CLI (npx @usevyre/init)
@usevyre/all · react-all · vue-all——Convenience meta-packages (tokens + components in one install)

AI tooling

PackageVersionDownloadsDescription
@usevyre/ai-contextMachine-readable component schema for LLM system prompts
@usevyre/mcp-serverMCP server — gives agents live access to the component schema
@usevyre/eslint-pluginLints for invalid variants, raw colors, hallucinated props
@usevyre/validate-ai-contextCI check that the AI context stays in sync with components
@usevyre/prompt-templatesReady-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:

Design Principles

  1. Semantic over primitive — --vyre-color-semantic-accent not --amber-400
  2. Explicit over implicit — every valid value is documented inline
  3. Zero runtime — pure CSS variables, works in any framework
  4. AI-first naming — token names describe intent, not appearance
  5. 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

الأسئلة الشائعة

ما هو useVyre Context؟

useVyre component context for AI agents — valid props, variants, anti-patterns, and design tokens.

كيف أثبّت useVyre Context؟

يعمل على جهازك. في Claude Code: claude mcp add usevyre-context -- npx -y @usevyre/mcp-server@1.0.3. وفي العملاء الآخرين، الصق إعداد JSON من هذه الصفحة في إعدادات MCP الخاصة بهم.

هل يحتاج useVyre Context إلى مفتاح API؟

لا يذكر إدراجه في السجل أي مفتاح أو سر إلزامي. قد تتطلب بعض الميزات حسابًا لدى الخدمة التي يتصل بها.

هل useVyre Context مفتوح المصدر؟

نعم. شيفرته متاحة على GitHub بترخيص MIT.

من يصون useVyre Context؟

ينشره gapra. يدرجه AI.tn لكنه لا يصونه ولا يوصي به.

من سجل MCP الرسمي. الإدراج ليس توصية: راجع شيفرة الخادم وصلاحياته قبل منحه الوصول إلى بياناتك.