Uwarp

uwarp-mcp

Uwarp 用の MCP サーバーです。500 種類以上の無料ブラウザー UI ツールを掲載するディレクトリです。

このパッケージでは、Cursor または Claude Desktop から利用できる3 つのローカルツールを公開します。有料 API キーは不要です。Uwarp の掲載項目の多くはサードパーティの埋め込みであり、このサーバーはそれらをスクレイピングしたりラップしたりしません。コントラストとパレットの計算はすべてデバイス上で実行され、search_tools は同梱のローカルカタログ（data/tools.json）を読み込みます。

作者／背景：Sherotree · https://uwarp.design · MIT

---

npx でインストール

クローンは不要です。MCP クライアントの設定（Cursor の mcp.json、Claude Desktop など）に追加します。

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

---

要件

• Node.js 18+

インストールとビルド

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

テスト

npm test

黒と白のコントラストが約 21 になることを確認するテストも含まれます。

ローカルで実行（stdio）

npm start
# or during development:
npm run dev

このプロセスは stdio（標準入力／標準出力上の JSON-RPC）で MCP 通信を行います。ログは標準エラー出力に送られます。

任意の環境変数スタブ

変数	備考
UWARP_API_KEY	将来の Uwarp API 用に予約されています。現在は無視されます。有料キーは不要です。

---

Cursor（mcp.json）

Cursor の MCP 設定（例：~/.cursor/mcp.json またはプロジェクトの .cursor/mcp.json）に追加します。npm run build の実行後、args がビルド済みのエントリを指すように設定してください。

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

プロジェクトが ~/code/uwarp-mcp にある場合の例（絶対パスを使用してください）：

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

保存後、Cursor を再起動するか、MCP サーバーを再読み込みしてください。

---

Claude Desktop

Claude Desktop の設定を編集します。

• 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"]
    }
  }
}

保存後、Claude Desktop を再起動してください。

---

ツールのリファレンス

check_contrast

入力

フィールド	型	説明
foreground	string	16 進数 #RGB ／ #RRGGBB
background	string	16 進数 #RGB ／ #RRGGBB

出力

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

WCAG 2.x の相対輝度とコントラスト比のしきい値を使用します（通常テキストの AA ≥ 4.5、大きなテキストの AA ≥ 3、通常テキストの AAA ≥ 7、大きなテキストの AAA ≥ 4.5）。

generate_palette

入力

フィールド	型	デフォルト	説明
seed	string	—	シードカラーの 16 進数
harmony	analogous | complementary | triadic | mono	analogous	ハーモニーモード
count	number	6	色数、3～12

出力

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

search_tools

入力

フィールド	型	デフォルト	説明
query	string	—	検索テキスト
category	string	—	任意のフィルター（例：color、svg-generators）
limit	number	8	最大結果数、1～20

出力

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

注： search_tools は data/tools.json のローカルカタログ（開発用のサンプル項目）を使用します。実行時に uwarp.design をスクレイピングすることはありません。

---

プロジェクトの構成

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

ライセンス

MIT © Sherotree / Uwarp