Getting Started

MCP Server

Connect Shelf UI to AI assistants via the Model Context Protocol — so your assistant can query components, generate install commands, and browse the registry directly.

The Shelf UI MCP (Model Context Protocol) server exposes the component registry as structured, queryable tools. Once connected, your AI assistant can browse components, get install commands, and read prop documentation without leaving your editor.

MCP is a universal open standard — it works with any AI assistant that supports it, including GitHub Copilot, Cursor, Windsurf, Claude Desktop, and Antigravity.

What the server exposes

ToolDescription
search_componentsSearch the Shelf UI registry by name or keyword
get_componentGet the full JSON schema for a specific component
get_install_commandGenerate the correct shadcn CLI command for a component and package manager
list_adaptersList available storage adapters

Connecting your AI assistant

Add the following to your AI assistant's MCP config. No API key required — the server reads directly from the public Shelf UI registry at https://shelf-ui.vercel.app/r.

The easiest way is through the Cursor UI:

  1. Open Cursor Settings > Features > MCP Servers
  2. Click + Add New MCP Server
  3. Name: shelf-ui
  4. Type: command
  5. Command: npx -y @shelf-ui/mcp

Add to ~/.codeium/windsurf/mcp_config.json:

{
  "mcpServers": {
    "shelf-ui": {
      "command": "npx",
      "args": ["-y", "@shelf-ui/mcp"]
    }
  }
}

Add to ~/Library/Application Support/Claude/claude_desktop_config.json (macOS) or %APPDATA%\Claude\claude_desktop_config.json (Windows):

{
  "mcpServers": {
    "shelf-ui": {
      "command": "npx",
      "args": ["-y", "@shelf-ui/mcp"]
    }
  }
}

Any MCP-compatible client can connect using:

{
  "mcpServers": {
    "shelf-ui": {
      "command": "npx",
      "args": ["-y", "@shelf-ui/mcp"]
    }
  }
}

Example tool calls

When connected, you can ask your assistant natural language questions:

"What file upload components does Shelf UI have?"

The assistant will call search_components({ query: "upload" }) and return a structured list with descriptions.

"How do I install the Dropzone component with pnpm?"

The assistant will call get_install_command({ name: "dropzone", packageManager: "pnpm" }) and return the exact command.

"What storage adapters does Shelf UI support?"

The assistant will call list_adapters and return a list of all supported backends (Firebase Storage, Supabase, AWS S3, Cloudinary, Azure Blob, ImageKit, Uploadthing).

Last Updated on Jun 22, 2026

On this page