English Français العربية

Uwarp

Official registry Search and web

WCAG contrast checks, HSL palettes with :root CSS, and search of 500+ free Uwarp UI tools.

Source code Website Documentation

Install

Add this to your client's MCP configuration (Claude Desktop: claude_desktop_config.json; Cursor: .cursor/mcp.json; VS Code and others use the same "mcpServers" shape).

NPM package uwarp-mcp
Claude Code 
claude mcp add uwarp -- npx -y uwarp-mcp@1.0.0
JSON configuration (Claude Desktop, Cursor, VS Code) 
{
    "mcpServers": {
        "uwarp": {
            "command": "npx",
            "args": [
                "-y",
                "uwarp-mcp@1.0.0"
            ]
        }
    }
}

Documentation

From the project's README on GitHub, refreshed weekly. Links open on GitHub.

Contents
  1. uwarp-mcp
  2. Install via npx
  3. Requirements
  4. Install & build
  5. Test
  6. Run locally (stdio)
  7. Cursor (mcp.json)
  8. Claude Desktop
  9. Tool reference
  10. Project layout
  11. License

uwarp-mcp

MCP server for Uwarp — a directory of 500+ free browser UI tools.

This package exposes three local tools you can use from Cursor or Claude Desktop. No paid API key is required. Most Uwarp listings are third-party embeds; this server does not scrape or wrap them. Contrast and palette math run entirely on-device; search_tools reads a bundled local catalog (data/tools.json).

ToolPurpose
check_contrastWCAG 2.x contrast ratio + AA/AAA flags
generate_paletteHSL harmony palettes + :root CSS
search_toolsSearch the local Uwarp tool catalog

Author / context: Sherotree · https://uwarp.design · MIT

Install via npx

No clone needed. Add to your MCP client config (Cursor mcp.json, Claude Desktop, etc.):

{
  "mcpServers": {
    "uwarp": {
      "command": "npx",
      "args": ["-y", "uwarp-mcp"]
    }
  }
}

Requirements

  • Node.js 18+

Install & build

cd /path/to/uwarp-mcp
npm install
npm run build

Test

npm test

Includes a check that black-on-white contrast ≈ 21.

Run locally (stdio)

npm start
# or during development:
npm run dev

The process speaks MCP over stdio (JSON-RPC on stdin/stdout). Log noise goes to stderr.

Optional env stub
VariableNotes
UWARP_API_KEYReserved for a future Uwarp API. Ignored today — no paid key needed.

Cursor (mcp.json)

Add to your Cursor MCP config (e.g. ~/.cursor/mcp.json or project .cursor/mcp.json). Point args at the built entry after npm run build:

{
  "mcpServers": {
    "uwarp": {
      "command": "node",
      "args": ["/ABSOLUTE/PATH/TO/uwarp-mcp/dist/index.js"]
    }
  }
}

Example if the project lives at ~/code/uwarp-mcp (use the absolute path):

{
  "mcpServers": {
    "uwarp": {
      "command": "node",
      "args": ["/Users/you/code/uwarp-mcp/dist/index.js"]
    }
  }
}

Restart Cursor (or reload MCP servers) after saving.

Claude Desktop

Edit the Claude Desktop config:

  • macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
  • Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "uwarp": {
      "command": "node",
      "args": ["/ABSOLUTE/PATH/TO/uwarp-mcp/dist/index.js"]
    }
  }
}

Restart Claude Desktop after saving.

Tool reference

check_contrast

Input

FieldTypeDescription
foregroundstringHex #RGB / #RRGGBB
backgroundstringHex #RGB / #RRGGBB

Output

{
  "ratio": 21,
  "aa_normal": true,
  "aa_large": true,
  "aaa_normal": true,
  "aaa_large": true
}

Uses WCAG 2.x relative luminance and contrast ratio thresholds (AA normal ≥ 4.5, AA large ≥ 3, AAA normal ≥ 7, AAA large ≥ 4.5).

generate_palette

Input

FieldTypeDefaultDescription
seedstring—Seed hex
harmonyanalogous \complementary \triadic \monoanalogousHarmony mode
countnumber6Colors, 3–12

Output

{
  "colors": [{ "name": "Mid Blue", "hex": "#3b82f6" }],
  "css": ":root {\n  --color-1: #3b82f6; /* Mid Blue */\n}"
}
search_tools

Input

FieldTypeDefaultDescription
querystring—Search text
categorystring—Optional filter (e.g. color, svg-generators)
limitnumber8Max results, 1–20

Output

{
  "tools": [
    {
      "name": "Contrast Checker",
      "summary": "…",
      "url": "https://uwarp.design/tools/contrast-checker",
      "category": "color"
    }
  ]
}

Note: search_tools uses the local catalog in data/tools.json (sample entries for development). It does not scrape uwarp.design at runtime.

Project layout

uwarp-mcp/
├── data/tools.json          # Local Uwarp catalog (~28 samples)
├── src/
│   ├── index.ts             # MCP stdio entry
│   └── tools/
│       ├── check_contrast.ts
│       ├── generate_palette.ts
│       └── search_tools.ts
├── tests/
├── dist/                    # After npm run build
├── package.json
├── tsconfig.json
├── LICENSE
└── README.md

License

MIT © Sherotree / Uwarp

Frequently asked questions

What is Uwarp?

WCAG contrast checks, HSL palettes with :root CSS, and search of 500+ free Uwarp UI tools.

How do I install Uwarp?

It runs on your machine. In Claude Code: claude mcp add uwarp -- npx -y uwarp-mcp@1.0.0. For other clients, paste the JSON configuration from this page into their MCP settings.

Does Uwarp need an API key?

Its registry entry lists no required key or secret. Some features may still need an account with the service it connects to.

Is Uwarp open source?

Yes. Its code is on GitHub under the MIT license.

Who maintains Uwarp?

It is published by sherotree. AI.tn lists it but does not maintain or endorse it.

From the official MCP Registry. Listing is not an endorsement: review a server's code and permissions before giving it access to your data.