# Watermelon UI

MCP server that searches React, Tailwind CSS, and shadcn components. Helps your AI assistant grab ready-to-use UI blocks and inject source code into your app.

- MCP server · `type=mcp` · Claude Code, Codex, Cursor, GitHub Copilot, Windsurf (Devin Desktop), Cline, Zed, Gemini CLI · ★ 97
- Author: WatermelonCorp
- License: MIT · policy=link-only · description only; the file stays with the author
- Source: https://github.com/WatermelonCorp/watermelon-platform/tree/HEAD/mcp
- Updated: 2026-10-24
- HTML: https://affpapa.org/en/nevibecode/mcp/watermelon-ui

## What it does

The server links your coding agent to the Watermelon UI library. It provides query tools across 800+ documented interface examples, covering animated cards, layouts, dashboard views, and full templates built with React 19, Motion, and Tailwind CSS 4.

Instead of locking code inside dependencies, it serves items via the shadcn registry format. The agent pulls raw source files directly into your repository with `npx shadcn`, so you can modify styling or behavior immediately.

The public endpoint on Cloudflare requires no API key or token setup. If you prefer running the stdio server locally or building custom registry entries, you will need Bun installed on your machine.

## Requirements
- Remote server: `https://mcp.watermelon.sh/mcp`

## Install

### Claude Code (native platform)

**Platform CLI: remote server**
```bash
claude mcp add --transport http ui https://mcp.watermelon.sh/mcp
```

### Codex

**Platform CLI: remote server**
```bash
codex mcp add mcp --url https://mcp.watermelon.sh/mcp
```

### Cursor

**Config file**
File `.cursor/mcp.json`:
```json
{
    "mcpServers": {
        "mcp": {
            "url": "https://mcp.watermelon.sh/mcp"
        }
    }
}
```

### GitHub Copilot

**Config file**
File `.vscode/mcp.json`:
```json
{
    "servers": {
        "mcp": {
            "type": "http",
            "url": "https://mcp.watermelon.sh/mcp"
        }
    }
}
```

### Gemini CLI

**Platform CLI: remote server**
```bash
gemini mcp add -t http mcp https://mcp.watermelon.sh/mcp
```

## When to use it
- search animated React UI blocks and dashboards
- import editable component source files using shadcn
- explore UI layouts built for React 19 and Tailwind CSS 4
- find ready-made interface templates directly from the editor

## Example prompts
- Find an animated split accordion card in Watermelon UI and install it using shadcn
- Search Watermelon components for a responsive analytics dashboard block
- Show Motion animation examples for interactive cards in Watermelon

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

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md