React Component MCP Server
Watermelon MCP is a free, hosted Model Context Protocol server that lets AI coding agents search the Watermelon UI catalog and pull installable React component source. Add https://mcp.watermelon.sh/mcp as a remote MCP server in Claude, Cursor, Codex, or any client that supports Streamable HTTP. No API key is needed.
Instead of the agent guessing at UI from memory, it can search real components, compare options, and install one with the shadcn CLI.
Connect it
In Claude Code, run claude mcp add --transport http watermelon https://mcp.watermelon.sh/mcp. In Cursor, add the URL under MCP servers in settings. Full setup notes are on the MCP docs page.
- Server URL:
https://mcp.watermelon.sh/mcp - Transport: Streamable HTTP
- Auth: none, read-only and public
Tools the server exposes
| Tool | What it does |
|---|---|
| search | Finds components, blocks, and dashboards that match a request |
| get_inspiration | Returns several source-backed options to compare |
| get_component | Returns installable source and dependencies |
| compose_page | Suggests blocks for a multi-section page |
| list_categories | Lists categories with accurate counts |
Why an MCP server beats pasting docs into a prompt
Agents write better UI when they start from working code. An MCP server gives the agent a structured, always current catalog, so it can pick a real hero section or data table and install it instead of inventing markup. It also keeps your context window small, because the agent fetches only the component it needs.
Frequently asked questions
Is the Watermelon MCP server free?
Yes. It is public, read-only, and needs no account or API key.
Which clients are supported?
Any MCP client that supports remote Streamable HTTP servers, including Claude, Claude Code, Cursor, and Codex.