MCP

MCP

Let your agent search the catalogue, read source, and install components.

What MCP is

Model Context Protocol (MCP) lets AI clients talk to external tools over a standard interface. Mellow ships mellow-ui-mcp — a thin stdio server over the live registry. No API keys. No local clone.

  • list_components — search by name, title, description, or category
  • get_component — full markdown: props, aiPrompt, source, and demo (same as /components/<name>.md)

Install still goes through the shadcn CLI — you own the file afterward.

Quick start

Select your client and add the server. Until the package is on npm, point the command at a local checkout of packages/mcp/index.js instead of npx -y mellow-ui-mcp.

One command in your project, then restart Claude Code.

claude mcp add mellow-ui -- npx -y mellow-ui-mcp

Try prompts like

  • Show me Mellow UI backgrounds I can use behind a hero
  • Add split-flap from Mellow UI to this page
  • What props does mechanical-keyboard accept?

Optional: shadcn registry alias

If you use the shadcn MCP server, register Mellow in components.json first:

{
  "registries": {
    "@mellow": "https://www.mellowui.com/r/{name}.json"
  }
}

Then agents that speak shadcn can resolve @mellow/<name>. The first-party mellow-ui-mcp tools remain the richest path — they return our markdown docs, not only registry JSON.

Also useful

  • /llms.txt — machine-readable index of the catalogue
  • Per-component markdown at /components/<name>.md
  • Override the fetch origin with MELLOW_SITE_URL when pointing at a preview deploy