English Français العربية

Uwarp

Registre officiel Recherche et web

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

Code source Site web Documentation

Installation

Ajoutez ceci à la configuration MCP de votre client (Claude Desktop : claude_desktop_config.json ; Cursor : .cursor/mcp.json ; VS Code et les autres utilisent la même forme « mcpServers »).

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

Documentation

Tirée du README du projet sur GitHub, actualisée chaque semaine. Les liens ouvrent GitHub.

Sommaire
  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

Questions fréquentes

Qu'est-ce que Uwarp ?

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

Comment installer Uwarp ?

Il s'exécute sur votre machine. Dans Claude Code : claude mcp add uwarp -- npx -y uwarp-mcp@1.0.0. Pour les autres clients, collez la configuration JSON de cette page dans leurs réglages MCP.

Faut-il une clé API pour Uwarp ?

Son entrée au registre n'indique aucune clé ni secret obligatoire. Certaines fonctions peuvent tout de même demander un compte auprès du service auquel il se connecte.

Uwarp est-il open source ?

Oui. Son code est sur GitHub sous licence MIT.

Qui maintient Uwarp ?

Il est publié par sherotree. AI.tn le référence sans le maintenir ni le recommander.

Issu du registre MCP officiel. Être listé n'est pas une recommandation : vérifiez le code et les permissions d'un serveur avant de lui donner accès à vos données.