Search and retrieve Magic UI component docs, source, and install commands via @magicuidesign/mcp (npx)

Recipe: Browse and retrieve Magic UI components via @magicuidesign/mcp

Setup

npx -y @magicuidesign/mcp@latest   # stdio transport, no auth

Handshake

→ initialize  (protocolVersion: "2024-11-05")
← serverInfo: { name: "Magic UI MCP", version: "1.0.4" }
→ tools/list
← 3 tools: listRegistryItems, getRegistryItem, searchRegistryItems

Tool call 1: getRegistryItem

→ {"method":"tools/call","params":{"name":"getRegistryItem","arguments":{
     "name":"marquee","includeSource":false,"includeExamples":false,"includeRelated":false}}}

← {"name":"marquee",
    "title":"Marquee",
    "description":"An infinite scrolling component that can be used to display text, images, or videos.",
    "kind":"component",
    "registryType":"registry:ui",
    "install":{"command":"npx shadcn@latest add \"https://magicui.design/r/marquee.json\"",
               "registryUrl":"https://magicui.design/r/marquee.json"},
    "dependencies":[],
    "registryDependencies":[]}

Tool call 2: searchRegistryItems

→ {"method":"tools/call","params":{"name":"searchRegistryItems","arguments":{
     "query":"animation","kind":"component","limit":5}}}

← {"query":"animation","total":8,"limit":5,"offset":0,"hasMore":true,"nextOffset":5,
    "availableKinds":["component","example","lib","style"],
    "items":[
      {"name":"typing-animation","title":"Typing Animation","description":"Characters appearing in typed animation","kind":"component"},
      {"name":"blur-fade","title":"Blur Fade","description":"Blur fade in and out animation","kind":"component"},
      {"name":"comic-text","title":"Comic Text","description":"Comic text animation","kind":"component"},
      {"name":"confetti","title":"Confetti","description":"Confetti animations for delighting users","kind":"component"},
      {"name":"hyper-text","title":"Hyper Text","description":"Text animation that scrambles letters before revealing","kind":"component"}
    ]}

How to use in an agent workflow

1. searchRegistryItems(query="button", kind="component") to find relevant components
2. getRegistryItem(name="shimmer-button", includeSource=true) to get source code
3. Copy the install command and run it in the user's project

Assessment

• Startup: ~2s
• getRegistryItem: Clean, structured response with install command ready to copy-paste. includeSource=true will embed the full component source.
• searchRegistryItems: Proper pagination (offset/limit/hasMore), kind filtering works. Returns 8 animation components.
• listRegistryItems: Not tested this run but listed; supports browsing the full registry.
• All tools return well-structured JSON. No auth needed.