Watermelon UI — MCP-сервер для Claude Code: что делает
MCP-сервер для поиска готовых компонентов React, Tailwind CSS и shadcn. Позволяет ИИ-ассистенту подбирать готовые блоки интерфейса и вставлять исходный код в проект.
claude mcp add --transport http ui https://mcp.watermelon.sh/mcpЧто делает Watermelon UI
Сервер подключает AI-ассистентов к каталогу интерфейсов Watermelon. Модель получает доступ к более чем 800 готовым примерам, включая анимированные элементы, готовые дашборды, адаптивные блоки и шаблоны страниц на стеке React 19, Motion и Tailwind CSS 4.
Компоненты отдаются в формате реестра shadcn. Модель забирает чистый исходный код прямо в проект через команду npx shadcn, сохраняя возможность свободно править разметку и стили под свои задачи.
Публичный хостинг на Cloudflare работает без API-ключа. Для локального запуска через stdio или собственной сборки реестра потребуется Bun.
Какие задачи решает
- найти готовые блоки дашбордов и анимированных карточек
- добавить в проект компоненты интерфейса через реестр shadcn
- подобрать шаблоны страниц на React 19 и Tailwind CSS 4
- получить исходный код элементов интерфейса без ручного поиска на сайте
Примеры запросов агенту
- Найди в Watermelon UI анимированную аккордеон-карточку для React и добавь её через shadcn
- Подбери готовый блок дашборда на Tailwind CSS 4 из каталога Watermelon
- Покажи примеры разметки карточек с анимацией Motion из репозитория Watermelon
Как установить Watermelon UI
Командой платформы: удалённый сервер
claude mcp add --transport http ui https://mcp.watermelon.sh/mcpКомандой платформы: удалённый сервер
codex mcp add mcp --url https://mcp.watermelon.sh/mcpФайл настроек
{
"mcpServers": {
"mcp": {
"url": "https://mcp.watermelon.sh/mcp"
}
}
}Файл настроек
{
"servers": {
"mcp": {
"type": "http",
"url": "https://mcp.watermelon.sh/mcp"
}
}
}Командой платформы: удалённый сервер
gemini mcp add -t http mcp https://mcp.watermelon.sh/mcpПо шагам, с командами для каждой платформы: Как подключить MCP-сервер: Claude Code, Codex, Cursor, VS Code, Gemini CLI и другие
Вопросы о Watermelon UI
Как установить Watermelon UI в Claude Code?
Выполните команду claude mcp add --transport http ui https://mcp.watermelon.sh/mcp в терминале. Сервер сразу готов к работе.
Что делает MCP-сервер Watermelon UI?
Он даёт агенту инструменты поиска по каталогу компонентов, готовых блоков и шаблонов. Ассистент находит нужные элементы и выгружает исходники через реестр shadcn.
Нужен ли API-ключ для подключения к Watermelon UI?
Удалённый сервер по адресу https://mcp.watermelon.sh/mcp доступен бесплатно и не требует ключей авторизации.
