Watermelon UI

por Watermelon

Cientos de componentes, bloques y paneles de React para copiar, con un servidor MCP para tu agente.

MIT GratisOpen source

Ver en GitHub →

Qué hace

Componentes animados, secciones de página, paneles, plantillas
Instalación con el comando shadcn, o copiar y pegar el código
Su servidor MCP gratuito y sin clave permite a tu agente buscar y añadir componentes

! Las cifras de adopción que anuncia la web (más de 100 000 usuarios, más de 600 componentes) no están verificadas.

Instalarlo

Requisitos: Un proyecto React con Tailwind CSS. Para el MCP: Claude Code, Codex o Cursor.

Instalar un componente con la CLI (guía oficial)

https://ui.watermelon.sh/cli

Conectar su servidor MCP a Claude Code

claude mcp add --transport http watermelon https://mcp.watermelon.sh/mcp

Conectar su servidor MCP a Codex

codex mcp add watermelon --url https://mcp.watermelon.sh/mcp

El prompt para tu agente

Pégalo en tu agente de código: comprueba los requisitos y lo instala por ti.

Claude CodeCodexCursorGemini CLIopencode

Prompt

Instala Watermelon UI (https://ui.watermelon.sh/) en mi equipo.
1. Comprueba los requisitos: Un proyecto React con Tailwind CSS. Para el MCP: Claude Code, Codex o Cursor. Si falta algo, avísame antes de instalar nada.
2. Sigue el método oficial:
- consultar https://ui.watermelon.sh/cli
- Conectar su servidor MCP a Claude Code: claude mcp add --transport http watermelon https://mcp.watermelon.sh/mcp
- Conectar su servidor MCP a Codex: codex mcp add watermelon --url https://mcp.watermelon.sh/mcp
3. Comprueba que funciona y explícame cómo iniciarlo y por dónde empezar.

Revisa siempre lo que tu agente va a ejecutar, sobre todo los comandos de instalación.