Watermelon UI — Claude Code MCP server: what it does, how to install
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.
claude mcp add --transport http ui https://mcp.watermelon.sh/mcpWhat Watermelon UI 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.
What it helps with
- 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 for the agent
- 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
How to install Watermelon UI
Platform CLI: remote server
claude mcp add --transport http ui https://mcp.watermelon.sh/mcpPlatform CLI: remote server
codex mcp add mcp --url https://mcp.watermelon.sh/mcpConfig file
{
"mcpServers": {
"mcp": {
"url": "https://mcp.watermelon.sh/mcp"
}
}
}Config file
{
"servers": {
"mcp": {
"type": "http",
"url": "https://mcp.watermelon.sh/mcp"
}
}
}Platform CLI: remote server
gemini mcp add -t http mcp https://mcp.watermelon.sh/mcpStep by step, with commands for each platform: How to add an MCP server to Claude Code, Codex, Cursor, VS Code, Gemini CLI and more
Questions about Watermelon UI
How to install Watermelon UI in Claude Code?
Run claude mcp add --transport http ui https://mcp.watermelon.sh/mcp in your terminal. The remote endpoint connects without any extra tokens.
What does the Watermelon UI MCP server do?
It equips AI agents with search and retrieval tools for UI elements, blocks, and templates. The assistant can look up matching designs and fetch ready-to-edit component files.
Does Watermelon UI require an API key?
The hosted server at https://mcp.watermelon.sh/mcp is free and needs no API key. You only need an internet connection to reach the Cloudflare endpoint.
