MCP Server

The Gaudi UI MCP server lets AI agents such as Claude Code, Cursor, VS Code and Codex find patterns, read their source and apply their styles to components you already have. It runs on your machine through npx and reads the same registry as the CLI. Nothing is hosted and there is no account.

Quick start

Run this in your project and pick your agent:

--client takes claude, cursor, vscode or codex. Restart the agent, or open a new session, afterwards: agents load MCP tools when a session starts.

Configuration

mcp init adds the server to your agent's project config. To add it by hand:

Claude Code

{
  "mcpServers": {
    "gaudi-ui": {
      "command": "npx",
      "args": ["-y", "gaudi-ui@latest", "mcp"]
    }
  }
}

Restart Claude Code and run /mcp to check that the server is connected.

Cursor

{
  "mcpServers": {
    "gaudi-ui": {
      "command": "npx",
      "args": ["-y", "gaudi-ui@latest", "mcp"]
    }
  }
}

Then enable the gaudi-ui server in Cursor Settings → MCP.

VS Code

{
  "servers": {
    "gaudi-ui": {
      "command": "npx",
      "args": ["-y", "gaudi-ui@latest", "mcp"]
    }
  }
}

Then open .vscode/mcp.json and click Start next to gaudi-ui.

Codex

Codex reads only ~/.codex/config.toml, which the CLI doesn't edit. Add the server there and restart Codex:

[mcp_servers.gaudi-ui]
command = "npx"
args = ["-y", "gaudi-ui@latest", "mcp"]

Tools

Applying styles to your components

A pattern is a complete example, but you may already have your own component, such as a shared Button in your design system. get_styles tells the agent exactly which classes and props to add to it, so it doesn't have to compare long class strings by eye.

The patterns of a component are compared with one default pattern, such as button-default. Every other pattern is described by what it adds and removes, and the agent sends the classes your element already has:

{
  "pattern": "button-secondary",
  "scope": "changes",
  "current": "inline-flex h-9 … bg-primary text-primary-foreground …"
}

The answer lists what to add, what is already there, and what conflicts:

{
  "classes": [
    "bg-secondary",
    "text-secondary-foreground",
    "not-data-disabled:hover:bg-secondary/80"
  ],
  "missing": [],
  "present": [],
  "conflicts": [{ "current": "bg-primary", "pattern": "bg-secondary" }, "…"],
  "removedButPresent": ["bg-primary", "text-primary-foreground", "shadow-xs", "…"],
  "props": {}
}

From this, the agent moves the primary colors into a default variant, adds a secondary variant with the three new classes, and keeps every shared class in the base. It doesn't overwrite a conflict without asking. For patterns with behavior, props lists what to apply as well: button-loading returns focusableWhenDisabled and aria-busy.

Try asking your agent

• "Add Gaudi UI's loading button to the settings form."
• "Style my Button component like Gaudi UI's default button."
• "Add a secondary variant to my Button from Gaudi UI's secondary pattern, using cva."
• "Which Gaudi UI button patterns are there?"
• "Update my Gaudi UI patterns, keeping my changes."

Skill

The server's tools work on their own. The Gaudi UI skill adds the full workflow, with examples, for agents that support skills.

Local registry

The server reads the registry at https://gaudi-ui.vercel.app/r. To use another one, such as a folder while you develop patterns, pass --registry or set GAUDI_REGISTRY_URL:

{
  "mcpServers": {
    "gaudi-ui": {
      "command": "npx",
      "args": ["-y", "gaudi-ui@latest", "mcp", "--registry", "./public/r"]
    }
  }
}