Every design system you've used was written for humans - so when Cursor or Copilot touches it, you get hallucinated props, made-up variants, and class names that compile but render nothing. useVyre is the first design system written for both.
npm i @usevyre/react @usevyre/tokens or npm i @usevyre/vue @usevyre/tokens Components with built-in AI context. Zero hallucinations.
AI CONTEXT — visible to your agent
variant = "primary"|"secondary"|"ghost"|
"accent"|"teal"|"danger"
size = "sm"|"md"|"lg"|"icon"
loading = boolean
Every prompt to your agent burns context, time, and patience. You tell it to
"use our Button component," and back comes variant="brand" - a variant
that has never existed. You correct it. It picks color="primary". Wrong
again. Three turns later, you write the JSX yourself.
The problem isn't your agent. It's that no one designed your component library
to be readable by one. useVyre flips the contract: every component carries an inline
AI CONTEXT block listing the exact props, variants, and patterns that
are valid - and nothing else. Your agent reads it before it writes a single line.
What's inside
--vyre-color-semantic-accent, not --amber-400.
Token names describe intent, so your agent picks the right one without guessing
hex values it half-remembers from training data.
Every component carries a structured comment block listing every valid prop
and variant. Drop it into CLAUDE.md, .cursor/rules,
or AGENTS.md - agents read it before they write.
Pure CSS variables. No styled-components, no className soup, no theme provider. Ship it in React, Vue, Svelte, or plain HTML - same tokens, same look, no bundle weight.
@usevyre/react and @usevyre/vue share an identical
API surface and identical CSS classes. Switch frameworks; your design system
doesn't care.
Tokens follow the W3C Design Token Community Group 2025 format - readable by Figma, Style Dictionary, and any toolchain that speaks the standard. No custom export pipeline.
WAI-ARIA patterns, focus management, keyboard navigation - built into the primitives, not bolted on after. The same components your agent reaches for pass an a11y audit on the first try.
For your editor
useVyre ships first-party tooling for every major AI coding agent. Configure once; your team's UI generation gets quieter overnight.
8 tools - get_component_info, check_valid_prop_value,
suggest_component, and more - exposed over Model Context Protocol.
vyre/no-invalid-vyre-props catches hallucinated props before
they merge. Flat config (ESLint 9+) and legacy both supported.
npx @usevyre/validate-ai-context src/ - instant scan for
hallucinated props and invalid enum values. --json output for CI.
Drop-in system prompts for Claude, Cursor, Copilot, Windsurf, and a generic template for whatever ships next.
50+ components
Below is what your agent sees for each component. No guessing, no scraping the docs,
no hallucinated color="brand".
Five minutes to install, one file to point your agent at, and the next prompt you write returns code that runs the first time.
Free, MIT-licensed, no signup. npm i @usevyre/react or @usevyre/vue and you're in.