HelloPixDig

Annuaire › Design & web › Watermelon UI

Watermelon UI
Image : dépôt officiel du projet

> PÉPITE DESIGN & WEB · DÉVELOPPEMENT · AGENTS & AUTOMATISATION

Watermelon UI

par Watermelon

Des centaines de composants, blocs et tableaux de bord React à copier, avec un serveur MCP pour ton agent.

MIT GratuitOpen source
Voir sur GitHub →

Ce que ça fait

  • Composants animés, sections de page, tableaux de bord, modèles
  • Installation avec la commande shadcn, ou copier-coller du code
  • Son serveur MCP gratuit, sans clé, laisse ton agent chercher et poser les composants

! Les chiffres d'adoption annoncés par le site (plus de 100 000 utilisateurs, plus de 600 composants) ne sont pas vérifiés.

L'installer

Prérequis : Un projet React avec Tailwind CSS. Pour le MCP : Claude Code, Codex ou Cursor.

Installer un composant avec la CLI (guide officiel)
https://ui.watermelon.sh/cli
Brancher son serveur MCP sur Claude Code
claude mcp add --transport http watermelon https://mcp.watermelon.sh/mcp
Brancher son serveur MCP sur Codex
codex mcp add watermelon --url https://mcp.watermelon.sh/mcp

Le prompt pour ton agent

Colle-le dans ton agent de code : il vérifie les prérequis et installe pour toi.

Claude CodeCodexCursorGemini CLIopencode
Prompt
Installe Watermelon UI (https://ui.watermelon.sh/) sur ma machine.
1. Vérifie les prérequis : Un projet React avec Tailwind CSS. Pour le MCP : Claude Code, Codex ou Cursor. S'il manque quelque chose, dis-le-moi avant d'installer quoi que ce soit.
2. Suis la méthode officielle :
- consulter https://ui.watermelon.sh/cli
- Brancher son serveur MCP sur Claude Code : claude mcp add --transport http watermelon https://mcp.watermelon.sh/mcp
- Brancher son serveur MCP sur Codex : codex mcp add watermelon --url https://mcp.watermelon.sh/mcp
3. Vérifie que ça fonctionne, puis explique-moi comment le lancer et par quoi commencer.

Relis toujours ce que ton agent s'apprête à exécuter, surtout les commandes d'installation.