onyx MCP
onyx
From the onyx authors: gives agents exact props of Vue components, icons and CSS tokens for the installed version.
- 126 ★ on the repository
- Last commit
- Apache-2.0
Minimal access
Why this level
- The server serves component reference data and skills; the agent, not the server, changes project code.
Install
- Works in
Manual install
npm install -g @sit-onyx/modelcontextprotocolThe first README command installs the `onyx-mcp` CLI globally.
Access and checks
How we reviewMinimal accessThe tool runs nothing and makes no network calls.
- The server serves component reference data and skills; the agent, not the server, changes project code.
This is third-party code. Review the repository files before installing.
What it does
`onyx-mcp` is the MCP server of the onyx design system from Schwarz Digits. An agent gets a Vue component reference: the list, API description, documentation for each, icons and CSS design tokens. Instead of guessing props it reads data for the library version installed in the project. Four skills ship with the server: `onyx-components`, `onyx-foundation`, `onyx-setup` and `onyx-install-mcp`. They cover wiring styles and fonts, the grid, responsive mixins and component usage. Skills can be exported as plain files with the `--writeSkills` flag.
Who it is for. Vue and Nuxt teams building UI on onyx who want an agent to know component APIs instead of inventing properties.
Good fit when
- An agent assembles a form from onyx components and must know exact props and events.
- A new project wires onyx styles, fonts, i18n and router following the `onyx-setup` skill.
- Markup with hard-coded colours is moved onto the library's CSS tokens.
- An icon is picked from the onyx set by name instead of being drawn again.
Not a fit when
- The project does not use onyx: the server knows only this library.
- A different Vue UI library is needed; look for its own server.
- The interface is built without Vue components, for example in plain HTML.
Example request
Build a sign-in form from onyx components: first detect the library version in the project, then fetch the APIs of the needed components and colour tokens.MCP
- Transport
- stdio, http
- Authentication
- not required
Limitations
The server answers only about onyx and suits Vue projects. To match the project, the library version is detected before queries: the `onyx-components` skill requires that step. Clients without MCP resource support need the `-r` flag (`--resourcesAsTools`). Behind a corporate proxy the `NODE_USE_SYSTEM_CA=1` variable may be needed. The Node.js version from the repository's `.node-version` file is required. The server serves reference data and does not generate code: a developer checks the final markup.
How to disable. Remove the `onyx-mcp` entry from the client configuration and run `npm uninstall -g @sit-onyx/modelcontextprotocol`. Delete skill files exported with `--writeSkills` separately.
FAQ
What is the `-r` flag for?
It enables `--resourcesAsTools`, exposing server resources as tools. Clients that cannot read MCP resources need it.
How do I avoid duplicated skills in context?
Export them with `onyx-mcp --writeSkills "./skills"`, then run the server with `--exclude "skill"`. Skills stay as files and the server stops serving them.
How do I connect it to Gemini CLI?
Add an `onyx-mcp` entry with command `onyx-mcp` and argument `-r` to `~/.gemini/settings.json`. Check with `gemini mcp list`.
Is this the official server?
Yes, the README calls it the official onyx MCP server. The repository belongs to the SchwarzIT organization.
Does the server run over the network?
Yes, the package has an HTTP mode alongside stdio. The README describes stdio launch in detail; `onyx-mcp -h` lists the other options.
Discussion
No questions or reviews yet.
Related
MCP serversNuxt MCP Dev
nuxt-mcp-dev / vite-plugin-mcp
A Nuxt module and a Vite plugin start an MCP server on the dev server port so the agent sees config, pages, components, auto-imports and the module graph
Vuetify MCP server: the agent pulls component APIs, guides, release notes and the v2 to v3 upgrade playbook from it
The CodeRocket MCP server gives an agent a saved library's design rules, components and blocks over a read-only connection.
A Vite plugin with an MCP server that shows the agent the components, routes and Pinia stores of a running Vue app
Inspo
inspo
An MCP server with a reference of real working sites an agent studies for design before writing an interface. Take techniques and do not copy pages
A MasterGo MCP server that hands agents the DSL of a design file from a link so they rebuild the layout as HTML or a component.
Comparison with similar tools
Cards that share the main search query, and how they differ.
| Tool | Official | Authentication | Repository stars | Main difference |
|---|---|---|---|---|
| onyx MCP (this card) | yes | not required | 126 | |
| Nuxt UI | yes | 7,066 | covers Nuxt UI components; onyx MCP knows only the onyx library and its tokens | |
| Design Systems MCP | no | not required | 227 | works across several design systems; onyx MCP comes from a single library's team |
README in short
The `@sit-onyx/modelcontextprotocol` package installs globally and runs as `onyx-mcp`. The README covers Gemini CLI setup, exporting skills and running the inspector during development.