Onsystem

What onsystem does

The onsystem MCP server inspects a React design system and compares UI code against what the system actually exports. It understands components, component parts, props, variants defined with cva or tv, and design tokens. Checks apply to .tsx and .jsx files, helping agents work from the repository’s implementation rather than relying only on training data.

Findings include a rule identifier, source location, and suggested fix. The checks cover unknown components and parts, unsupported props, invalid variant values, native elements that should use an available design-system component, hardcoded colors, inaccessible icon-only buttons, arbitrary spacing, and arbitrary border radii.

The project is intended for design-system and platform teams that maintain a React component package. A shadcn/ui application is supported as a zero-configuration example, but the material does not describe support for non-React design systems.

How it works

The onsystem MCP server reads source with the TypeScript compiler. It derives component and variant information from the repository, reads tokens from stylesheets, DTCG 2025.10 files, or DESIGN.md, and checks application markup against that information.

Rules have default severities. Unknown components, unknown props, unknown variants, native-component preference, hardcoded colors, and missing accessible names are errors. Arbitrary spacing and radius are warnings. For example, a nonexistent Card.Header, an unsupported tone prop, or a danger value where only destructive exists can be reported with a corresponding correction.

The same checking model can be used while an agent edits code and as a pull-request gate. A GitHub Action is available in the project’s marketplace listing, although its configuration is not included in the supplied material.

Setup and configuration

Run the package locally from the application directory or a monorepo root. The quickstart requires Node.js 20.19 or newer and uses the npm package through npx. The project describes the default setup as local and zero configuration. The repository also provides installation links for Cursor, VS Code, and a Claude Code plugin.

Token inputs can come from stylesheets, DTCG 2025.10 files, or DESIGN.md. The onsystem export command writes token data in either of the documented token formats, but the supplied excerpt does not show the full command syntax or configuration options.

Tools and capabilities

The onsystem MCP server is relevant when an agent is creating or modifying React UI and you need repository-specific validation. Supported checks include:

• Detecting components and parts that are not exported by the system.
• Detecting props that a component does not accept.
• Detecting values outside a component’s declared variants.
• Recommending a design-system component instead of a native element.
• Finding hardcoded color values and arbitrary spacing or radius values.
• Checking icon-only buttons for an accessible name.
• Returning each finding’s rule, location, and fix.

The README demonstrates an agent using check_ui to find UI problems and then apply the reported fixes.

Limitations and notes

The supplied corpus discussion is not a universal false-positive rate. Its labeled subset covered 28.0% of findings, and the project says the remaining rate will be measured with a future seeded sample. The checks therefore still need review in the context of each codebase.

The server reads the design system from source, so its usefulness depends on the component exports, variant definitions, and token sources being present and understandable to its analyzer. The provided material does not specify remote hosting, authentication, environment variables, or non-React framework support. The package was formerly named @dgesteves/design-system-mcp.