Log inSubmit server
Melta UI logo

Melta UI

MCP server for querying melta UI design contracts and linting generated HTML, JSX, and class strings.

InstallRepositoryWebsite
Full README Compare alternatives Embed widget Claim this listing

Install Melta UI

Pick your client, then add it in one click or paste the config.

STDIONode.js
~/Library/Application Support/Claude/claude_desktop_config.json
claude_desktop_config.json
{
  "mcpServers": {
    "melta-ui": {
      "command": "npx",
      "args": [
        "-y",
        "melta-ds-mcp"
      ]
    }
  }
}

Settings → Developer → Edit Config, merge this into mcpServers, then fully quit and reopen Claude Desktop.

Automated check passed— started and listed 6 tools correctly (9d ago).

Overview

The melta UI MCP server exposes design tokens, component contracts, rules, and recipes to AI coding agents through MCP. Its tools retrieve specifications and inspect class strings or complete HTML/JSX with the same lint logic used by hooks and CI. Use it when generated interfaces must follow a shared Tailwind-based design contract rather than relying on written guidelines alone. It requires Node 22 or newer and an MCP client that supports stdio.

Use cases

  • Query design tokens before generating a Tailwind interface
  • Retrieve component contracts for AI-generated UI
  • Lint generated HTML or JSX with check_html
  • Check class strings for prohibited design patterns
  • Search design rules and contracts by keyword

Key features

  • MCP access to tokens, components, rules, and recipes
  • HTML and JSX validation with check_html
  • Class-string rule checking
  • Full-text contract search
  • Shared lint logic for MCP, hooks, and CI
  • Bring-your-own design-system asset loading

Tools6

What Melta UI lets your agent do. Expand a tool for its parameters.

Verified live~690 tokens of context

Security & health

What it can reach and how reliably it runs — from our own checks, not the maintainer’s claims.

ActiveLast checked Today

Recent health check succeeded.

6/6 checks healthy over the last 44d

Supply-chain signal

No high-severity advisories surfaced by our automated scan.

Critical 0High 0Medium 0Low 0

Scanned 7d ago via OSV.dev · melta-ds-mcp (npm)

Adoption & maintenance

Factual signals from GitHub, npm, and our automated checks — not a rating.

GitHub stars202Stargazers on the source repository.
npm downloads1.3kPackage downloads in the last 30 days.
Last commit12d agoMost recent push to the default branch.
Availability100%Our rolling endpoint + install checks that succeeded.
Install checkPassedOur sandbox started it and listed its tools.
Tools exposed6Callable tools this server registers over MCP.
Directory activity3 viewsConfig copies, upvotes, and views on AllMCPs.

How Melta UI works

What melta UI does

The melta UI MCP server gives AI coding agents access to a design system’s machine-readable contracts. The distributed contract data includes design tokens, component specifications, recipes, and rules covering values such as colors, spacing, component states, anatomy, and accessibility requirements.

It is intended for teams generating web UI with AI agents and Tailwind CSS classes. The project is not a ready-to-install React component library. Instead, it supplies tokens, rules, contracts, and verification tools; the web reference implementation uses HTML and Tailwind classes.

The contracts can also be shared with a separate React Native implementation through the melta-contracts package. Web and app implementations consume the same contract source rather than maintaining copied token sets.

How it works

The melta UI MCP server runs as a stdio process, commonly through npx -y melta-ds-mcp. On connection, it provides MCP instructions that point agents to the design constitution and to post-generation validation with check_html.

The server exposes resources including melta://design-constitution, melta://tokens, melta://components, melta://components/{id}, melta://rules, and melta://rules/auto-detectable. Agents can read the relevant contract before generating UI, then submit generated markup for checking. The same checking logic is also used by the repository’s lint CLI, hooks, and CI workflow.

The project documents 107 prohibited rules, with automated detection available for a subset. Rules that are not automatically checked are classified in the contract data, so a successful automated check does not mean every design requirement has been verified.

Setup and configuration

Use Node 22 or newer and register the stdio command with an MCP client. For Claude Code, the documented command is:

Terminal
claude mcp add melta-ui -- npx -y melta-ds-mcp

The repository also includes client configuration for Claude Code and Cursor when using the cloned project. Codex can register the same stdio command. A clone-based setup additionally provides the repository’s lint CLI, PostToolUse hook configuration, and CI-related files; the npm MCP package is the simpler path for contract lookup and self-checking.

The server can load assets from a different design-system bundle through a bring-your-own-design-system configuration. That bundle replaces the loaded assets rather than mixing them with melta’s rules.

Tools and capabilities

The melta UI MCP server provides these tools:

  • get_token retrieves a token by path, such as color.primary.600.
  • get_component returns a component contract, including variants, sizes, states, anatomy, and accessibility details.
  • check_rule tests a class string for prohibited patterns and conditional rules.
  • check_html lints complete generated HTML or JSX using the shared validation logic.
  • get_rules returns the rule set, with filtering support and manual rules included.
  • search performs full-text searches and returns up to 20 results with truncation information.

The system is designed around class-based Tailwind styling. Static checks can inspect class attributes, HTML attributes, and DOM structure. JSX or Vue class and HTML-attribute checks are supported, but composition checks for nesting and accessibility DOM are limited to HTML, and dynamically assembled classes or spreads may not be statically traceable.

Limitations and notes

Generated output still needs Tailwind and the melta token configuration to render as intended.

The server does not replace a complete component package. It is a contract and validation layer for projects whose styling is visible in markup. CSS-in-JS patterns that hide styling in props may fall outside the static lint coverage. The license is MIT.

Read the full README View source on GitHub

Reviews

No reviews yet — be the first to share how it worked for you.

Frequently Asked Questions about Melta UI

melta UI is an MCP server that connects AI coding agents to melta design-system contracts for tokens, components, rules, and recipes. Its main tools retrieve tokens and component specifications, search the contract data, inspect class strings with check_rule, and lint generated HTML or JSX with check_html using shared validation logic.

Install it through an MCP client by registering `npx -y melta-ds-mcp` as a stdio server. Claude Code can use `claude mcp add melta-ui -- npx -y melta-ds-mcp`. Node 22 or newer is required.

Yes, Cursor is supported through the repository’s `.cursor/mcp.json` project configuration.

Yes, class attributes and HTML attributes in JSX and Vue are linted. Composition checks for nesting and accessibility DOM apply to HTML only, and dynamically generated classes or spread attributes may not be statically detectable.

Yes, `melta-ds-mcp` can load assets from a different design-system bundle at startup. The replacement assets are kept separate from melta’s rules.

Related MCP servers

All in Legal All alternatives
Add a badge to your READMEShow it’s listed — live SVG, Markdown or HTML.

AllMCPs Directory Badge

Full Badge Customizer

Showcase your server listing on GitHub or your project documentation. Embed this dynamic SVG badge to highlight official listing status and live engagement.

Badge Style:
Live Dynamic SVG PreviewMelta UI AllMCPs Directory Badge
Markdown (GitHub README)
[![AllMCPs](https://allmcps.com/api/badge/melta-ui?style=directory)](https://allmcps.com/mcp/melta-ui)
HTML Embed
<a href="https://allmcps.com/mcp/melta-ui"><img src="https://allmcps.com/api/badge/melta-ui?style=directory" alt="Melta UI on AllMCPs" /></a>