# Watermelon UI

MCP-сервер для поиска готовых компонентов React, Tailwind CSS и shadcn. Позволяет ИИ-ассистенту подбирать готовые блоки интерфейса и вставлять исходный код в проект.

- MCP-сервер · `type=mcp` · Claude Code, Codex, Cursor, GitHub Copilot, Windsurf (Devin Desktop), Cline, Zed, Gemini CLI · ★ 97
- Автор: WatermelonCorp
- Лицензия: MIT · policy=link-only · показываем только описание, файл — у автора
- Исходник: https://github.com/WatermelonCorp/watermelon-platform/tree/HEAD/mcp
- Обновлён: 2026-10-24
- HTML: https://affpapa.org/nevibecode/mcp/watermelon-ui

## Что делает

Сервер подключает AI-ассистентов к каталогу интерфейсов Watermelon. Модель получает доступ к более чем 800 готовым примерам, включая анимированные элементы, готовые дашборды, адаптивные блоки и шаблоны страниц на стеке React 19, Motion и Tailwind CSS 4.

Компоненты отдаются в формате реестра shadcn. Модель забирает чистый исходный код прямо в проект через команду `npx shadcn`, сохраняя возможность свободно править разметку и стили под свои задачи.

Публичный хостинг на Cloudflare работает без API-ключа. Для локального запуска через stdio или собственной сборки реестра потребуется Bun.

## Требования
- Удалённый сервер: `https://mcp.watermelon.sh/mcp`

## Установка

### Claude Code (родная платформа)

**Командой платформы: удалённый сервер**
```bash
claude mcp add --transport http ui https://mcp.watermelon.sh/mcp
```

### Codex

**Командой платформы: удалённый сервер**
```bash
codex mcp add mcp --url https://mcp.watermelon.sh/mcp
```

### Cursor

**Файл настроек**
Файл `.cursor/mcp.json`:
```json
{
    "mcpServers": {
        "mcp": {
            "url": "https://mcp.watermelon.sh/mcp"
        }
    }
}
```

### GitHub Copilot

**Файл настроек**
Файл `.vscode/mcp.json`:
```json
{
    "servers": {
        "mcp": {
            "type": "http",
            "url": "https://mcp.watermelon.sh/mcp"
        }
    }
}
```

### Gemini CLI

**Командой платформы: удалённый сервер**
```bash
gemini mcp add -t http mcp https://mcp.watermelon.sh/mcp
```

## Когда брать
- найти готовые блоки дашбордов и анимированных карточек
- добавить в проект компоненты интерфейса через реестр shadcn
- подобрать шаблоны страниц на React 19 и Tailwind CSS 4
- получить исходный код элементов интерфейса без ручного поиска на сайте

## Примеры запросов агенту
- Найди в Watermelon UI анимированную аккордеон-карточку для React и добавь её через shadcn
- Подбери готовый блок дашборда на Tailwind CSS 4 из каталога Watermelon
- Покажи примеры разметки карточек с анимацией Motion из репозитория Watermelon

## Похожие
- [Front-End Checklist](https://affpapa.org/nevibecode/mcp/front-end-checklist.md) — MCP-сервер · ★ 74559
- [tldraw](https://affpapa.org/nevibecode/mcp/tldraw.md) — MCP-сервер · ★ 51091
- [Figma-Context-MCP](https://affpapa.org/nevibecode/mcp/figma-context-mcp.md) — MCP-сервер · ★ 16062
- [mcp-server-chart](https://affpapa.org/nevibecode/mcp/mcp-server-chart.md) — MCP-сервер · ★ 4402
- [Dembrandt](https://affpapa.org/nevibecode/mcp/dembrandt.md) — MCP-сервер · ★ 3821
- [RevoGrid DataGrid MCP Pro](https://affpapa.org/nevibecode/mcp/revogrid-datagrid-mcp-pro.md) — MCP-сервер · ★ 3450

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md