Watermelon UI MCP Server
sh.watermelon/ui
Search and install free React, Tailwind, and shadcn UI components, blocks, and dashboards.
What is the Watermelon UI MCP server?
The Watermelon UI MCP server provides access to a searchable catalog of 800+ free React components, blocks, dashboards, and templates built with Tailwind CSS and shadcn. It enables AI agents to discover, retrieve, and help install ready-to-use UI source code into projects.
Watermelon UI is an open-source platform that catalogs and distributes free, copy-paste React components and UI blocks. The MCP server exposes search, retrieval, inspiration, category, and page-composition tools so Claude and other AI agents can help you find and integrate components into your projects without needing an API key.
How to install Watermelon UI
Copy-paste configuration for popular MCP clients.
Tools & capabilities
Tools this server exposes to the agent.
search— Search the Watermelon component catalog by name, keyword, or categoryretrieval— Retrieve detailed source code and metadata for specific components, blocks, dashboards, or templatesinspiration— Get component suggestions and examples for common UI patternscategory— Browse components organized by category or typepage-composition— Discover how to compose multiple components into complete page layouts
Use cases
- Find and copy React components with Tailwind styling into your project
- Discover animated UI blocks and dashboard templates for rapid prototyping
- Get installable shadcn registry items via CLI for seamless integration
- Browse component examples and source code while building your UI
- Explore page composition patterns and layout combinations
Watermelon UI MCP server FAQ
It's a free MCP server that gives Claude and other AI agents access to 800+ searchable React components, blocks, dashboards, and templates from the Watermelon platform. No API key required.
Yes, Watermelon is free for the community. The MCP server is free and requires no authentication.
Run `claude mcp add --transport http watermelon https://mcp.watermelon.sh/mcp` to add the hosted MCP endpoint to your Claude configuration.
Use `codex mcp add watermelon --url https://mcp.watermelon.sh/mcp` to add the Watermelon MCP server to Cursor.
Yes. Components are distributed as shadcn registry items. You can install them with `npx shadcn@latest add https://registry.watermelon.sh/r/[component-name].json`.
Components are built with React 19, TypeScript, Tailwind CSS 4, and Motion for animations. They're designed to be copy-paste and fully editable in your project.
README (reference)
Source of truth, from the repository.
Watermelon Platform
The open-source platform behind ui.watermelon.sh.
Free for the community. Supported by people and teams who want Watermelon to keep getting better.
This repo powers the browsing experience for Watermelon components, animated UI, blocks, dashboards, and templates. It is where discovery, previews, docs, SEO pages, and contributor-facing content all come together.
What This Repo Does
- renders the public Watermelon UI experience
- loads content from MDX and colocated source files
- previews components, blocks, dashboards, and templates
- generates the sitemap and other search-friendly surfaces
- gives contributors a structured way to publish new content
- includes developer-facing AI and MCP discovery files
Stack
- React 19
- TypeScript
- Vite
- Tailwind CSS 4
- Motion
- React Router
- Bun for the preferred local workflow
Quick Start
git clone https://github.com/WatermelonCorp/watermelon-platform.git
cd watermelon-platform
bun install
bun run dev
Useful commands:
bun run dev: start the local appbun run build: generate the sitemap, typecheck, and build production assetsbun run lint: run ESLintbun run preview: preview the production build locallybun run deploy: build and deploybun run mcp: start the local Watermelon MCP server over stdiobun run mcp:dev: run the hosted MCP Worker locallybun run mcp:deploy: deploy the hosted MCP Worker to Cloudflarebun run generate:shadcn-registry: generate installable shadcn registry JSON
Public machine-readable endpoints:
/llms.txt/openapi.json/api/docs/api/catalog/summary/api/catalog/entries?kind=blocks
Content Model
Most public content is file-based and lives in src/data/contents.
animated-components/: animated component source foldersregistry/: MDX metadata for animated component entriescomponents/: UI component category configsblocks/: block content and previewsdashboards/: dashboard entries and demostemplates/: template entries and demos
Routes are wired in src/components/layout/app-routes.tsx, and the sitemap is generated from the same content model in scripts/generate-sitemap.ts.
Installable Components
Watermelon components are distributed as copy-paste shadcn registry items, so the resulting code lives in the consuming project and remains fully editable.
npx shadcn@latest add https://registry.watermelon.sh/r/card-split-accordian.json
The registry is generated from the maintained animated component source during every platform build and includes the complete base-component collection.
Connect the hosted MCP server (no API key) to your AI client:
claude mcp add --transport http watermelon https://mcp.watermelon.sh/mcp
codex mcp add watermelon --url https://mcp.watermelon.sh/mcp
Contributing
The easiest way to contribute is to improve one thing at a time:
- Read CONTRIBUTING.md.
- Pick the content type you want to add or improve.
- Follow the matching folder pattern in
src/data/contents. - Run
bun run lintandbun run build. - Open a PR with screenshots for anything visual.
Docs, polish, accessibility fixes, demo improvements, and contributor experience changes are all valuable contributions here.
AI And Developer Surfaces
Watermelon includes a few machine-readable surfaces to help agents and tooling understand the project faster:
public/llms.txtpublic/openapi.jsonpublic/sitemap.xmlmcp/server.tsmcp/worker.tswrangler.mcp.tomlworker/site.tsskills/watermelon-ui/SKILL.md.codex-plugin/plugin.json.claude-plugin/plugin.json.cursor-plugin/plugin.json
The hosted MCP endpoint lives at https://mcp.watermelon.sh/mcp and exposes
800+ source-backed examples through search, retrieval, inspiration, category,
and page-composition tools.
The hosted Worker records aggregate initialize and tools/call event counts
in Cloudflare Analytics Engine. It does not retain IP addresses, session IDs,
prompts, tool arguments, or client-provided versions.
Repository Health
Star History
The chart is generated from the repository's own stargazer timeline. Maintainers can refresh it with bun run generate:star-history.
Support The Work
This platform is part of the free public Watermelon ecosystem. If it saves your team time, sponsorship helps us keep improving it for everyone.
- use the GitHub
Sponsorbutton when available - use the custom funding link configured for the org: watermelon.sh
- star the repo and share it with other builders
Where Sponsor Support Goes
Support for this repo helps fund:
- more free public components, dashboards, templates, and docs
- better previews, discovery, search, and SEO improvements
- bug fixes, accessibility work, and contributor experience cleanup
- hosting, deployment, and ongoing maintenance
As of August 30, 2026, GitHub Sponsors for the WatermelonCorp org is not fully activated yet, so the funding links are the current support path.
Related MCP servers
Identity, secrets, and passwordless SSH provisioning for AI agents — Keycloak, vault, MCP tools.
View repository →
Nagora
Buy real goods with Nano (XNO) through escrow. Search, purchase, track orders, get signed receipts.
Machine-history prints, merch and £4 print files at notrobo.shop, run by an AI. Cards for downloads.
The Others — an agentic t-shirt shop. Browse products and buy t-shirts via AI agents.
Buy and manage RU PBN and international iGaming SEO links with protected Tier1.shop checkout.
Free enterprise-grade due diligence for your app, run by your coding agent. Then the full SDLC.
