@birdycom/omniacss-mcp
An MCP server for OmniaCSS. AI assistants such as Claude, Cursor, VS Code Copilot, Windsurf and Zed use it to check OmniaCSS classes before they write them, instead of guessing from Tailwind.
The server is read-only: it never changes your files. Only read_docs goes on the network, and only to omniacss.eu
and omniaui.eu.
Tools
| Tool | What it does |
|---|---|
getting_started | Install (CDN, npm + PostCSS/Vite, CLI), dark mode and the rules for writing OmniaCSS markup |
lookup_classes | Checks classes, variants included (md:hover:…), and OmniaUI oc-* classes. Returns the exact CSS, or the closest correct name for a typo |
search_utilities | Finds classes by name or by CSS ("anchor", "grid cols", "position-area") |
list_variants | Lists every variant prefix, or shows the selector or at-rule that one variant produces |
color_tokens | Lists the theme tokens (--oc-primary …) with their light and dark colors, and the palette colors (--color-*) with their hex value |
convert_tailwind | Gives the native OmniaCSS class for a Tailwind class, or the CSS that the migrate plugin generates for it |
list_components | Finds OmniaUI components (modal, tabs …) and blocks (pricing, hero, dashboard …) by name or description |
get_component | The reference HTML of one component or block, the packages it needs, and the npx omniaui add command for HTML, React, Vue or Blade |
search_docs / read_docs | Finds documentation pages and sections on omniacss.eu and omniaui.eu, and reads one as text with its code examples |
The class index is the same one the OmniaCSS IntelliSense editor extension uses, built from the same OmniaCSS version. The OmniaUI components and blocks ship with the server, with their HTML. When the project has its own OmniaUI packages installed, those versions are used.
OmniaUI Pro blocks and Pro components are listed by name and description, with the label the docs site shows (Pro, or Free + Pro for a free component with a Pro addition). Their HTML and classes appear only when the project has
@birdycom/omniaui-pro installed, which comes with a Pro licence.
Setup
Node.js 22 or newer. The server runs with npx, so there is nothing to install first.
Claude Code
claude mcp add omniacss -- npx -y @birdycom/omniacss-mcp
Claude Desktop, Cursor, Windsurf (claude_desktop_config.json, .cursor/mcp.json, ~/.codeium/windsurf/mcp_config.json)
{
"mcpServers": {
"omniacss": { "command": "npx", "args": ["-y", "@birdycom/omniacss-mcp"] }
}
}
VS Code (.vscode/mcp.json)
{
"servers": {
"omniacss": { "type": "stdio", "command": "npx", "args": ["-y", "@birdycom/omniacss-mcp"] }
}
}
Start the server in your project folder. Most clients do that by default; then OmniaUI packages installed in the project are found.
To pin the server to the OmniaCSS version your project uses, put a version in the package name, for example
@birdycom/[email protected].
Once it is connected, ask your assistant something like "Build a pricing card with OmniaCSS; check the classes with the omniacss tools".
In code
import { load } from "@birdycom/omniacss-mcp/knowledge";
const kb = await load();
kb.lookup(["p-1", "md:flx"]); // [{ token: "p-1", known: true, css: ".p-1 { padding: 1rem; … }" }, { …, hint: 'did you mean "md:flex"?' }]
Docs: https://omniacss.eu/docs/ · MIT