給 AI coding agent 用（MCP server）

讓 Claude Code、Cursor、Codex 直接搜尋 WebberUI 元件、取得原始碼與安裝指令的 MCP server 設定方式。

WebberUI 有一支 MCP server（@webberui/mcp），讓 AI coding agent 不必先讀文件就能搜尋元件、拿到原始碼與安裝指令。

先看這裡：你可能不需要它

shadcn CLI 4.13 起內建 MCP server，功能比這支完整：

npx shadcn@latest mcp

在 components.json 設定好 registries（見安裝 Pro 元件）之後，它提供 search_items_in_registries、view_items_in_registries、get_add_command_for_items 等工具，涵蓋大部分需求。已經有 components.json 的專案，建議直接用官方的。

@webberui/mcp 只解決一件事：官方那些工具都要求專案裡已經有 components.json，所以在還沒 init 的空專案裡問不到任何東西。這支不依賴 components.json，可以先探索、拿到安裝指令，再決定要不要 init。

設定

claude mcp add webberui \
  -e WEBBERUI_URL=https://webberui.com \
  -e WEBBERUI_KEY=<你的 Pro 授權金鑰，選填> \
  -- npx -y @webberui/mcp

mcp.json

{
  "mcpServers": {
    "webberui": {
      "command": "npx",
      "args": ["-y", "@webberui/mcp"],
      "env": {
        "WEBBERUI_URL": "https://webberui.com",
        "WEBBERUI_KEY": "<你的 Pro 授權金鑰，選填>"
      }
    }
  }
}

環境變數	預設	說明
`WEBBERUI_URL`	`https://webberui.com`	registry 基底網址
`WEBBERUI_KEY`	（無）	Pro 授權金鑰。不設定也能搜尋與瀏覽全部項目，只是取 Pro 原始碼時會回導購訊息而不是程式碼

提供的工具

工具	說明
`search_components`	依名稱／標題／描述／分類搜尋，可限定 Free / Pro
`get_component`	取得單一項目的安裝指令、npm 相依與完整原始碼
`list_categories`	列出所有分類與數量
`list_templates`	列出整頁模板（一律 Pro）

目錄是向 /r/registry.json 即時取得，不內建靜態快照——新元件立刻可見，不需要更新這個套件。

用法（直接對 agent 說）

「用 webberui 找一個發光邊框的卡片元件並裝進來」

agent 會走：search_components("邊框") → 選中 border-beam → get_component("border-beam") 拿到安裝指令與原始碼 → 執行安裝。

Pro 項目未授權時的行為

未授權時 get_component 不會回傳空白或猜測的程式碼，而是明確回報這是 Pro 項目、給出購買連結，並要求 agent 不要自行重寫實作。

這是刻意的：靜默回傳空字串會讓 agent 以為元件是空的，然後自己編一個出來—— 1.0.0 版就是這個行為，已經修掉。

活動期間 Pro 免費

上線活動期間註冊帳號即可安裝全部 Pro 項目。取得金鑰與設定方式見安裝 Pro 元件。

不使用 MCP 的替代做法

不想裝 MCP server 的話，這兩個網址本身就是機器可讀的：

https://webberui.com/r/registry.json — 完整索引，479 個項目，每筆都標了 meta.tier（free / pro）
https://webberui.com/llms.txt — llmstxt.org 格式的站台索引，可直接貼進 agent 當文件來源