文件/API 參考
深色程式碼導向 API 參考/產品文件站
Pro內容docs8 個區段
安裝
npx webberui@latest add "https://webberui.com/r/docs-api-reference.json?t=<安裝 token>"整頁原始碼會落在 app/templates/docs-api-reference/。也可以改用長效授權金鑰：在 components.json 的 registries 設定 Authorization: Bearer <key>，適合 CI 或多人共用的專案。使用範圍見授權條款。
包含的區段
同一套模板內的區段共用設計 token，所以抽換、重排之後配色、間距與動畫節奏仍然一致。可在區段組裝器裡挑選組合。
- 1
頂欄與 API 概覽
深色頂欄搭配 Relay API 概覽、系統狀態徽章與基礎網址、版本、驗證方式四張資訊卡。
hero - 2
驗證
說明 Bearer 金鑰驗證方式，附 cURL 範例程式碼區塊與金鑰安全警告。
content - 3
快速開始
三分鐘上手指南，含安裝 SDK 與送出第一則訊息的 TypeScript 範例。
content - 4
API 端點
左側導覽樹搭配列出訊息、傳送訊息與建立頻道三個端點的參數表與請求回應範例。
product - 5
事件與簽章
列出 Webhooks 事件清單並示範以 HMAC 驗證 Relay 簽章的實作。
features - 6
錯誤代碼
標準 HTTP 錯誤代碼對照表與結構化 error 物件的回應範例。
content - 7
速率限制
說明每分鐘請求上限、速率標頭意義與建議的退避重試策略。
content - 8
頁尾
品牌標誌、產品資源支援三欄連結與 API 運行狀態的深色頁尾。
footer
一套 React API 文件模板：深色、以程式碼為主的三欄文件站，左側可收合的目錄、中間是端點說明與範例程式碼、右側是頁內錨點。以 Next.js App Router、Tailwind CSS 與 Motion 製作，內容直接寫在 page.tsx 裡。
適用情境
- 開發者平台或 API 產品的參考文件
- SDK、Webhook 的整合說明頁
- 內部服務的 API 文件
- 需要參數表、錯誤代碼與速率限制說明的技術文件
拿到後要改哪裡
- 左側目錄在 page.tsx 的 `NAV`，右側錨點在 `ANCHORS`；兩者的 `id` 都要對應內容區塊的 id，目前位置是依 `ANCHORS` 追蹤的。
- 各章節是獨立元件，例如 `AuthSection`、`QuickstartSection`、`ListMessagesSection`、`WebhooksSection`、`ErrorsSection`，照你的 API 增刪或改寫。
- 範例程式碼由 `CodeBlock` 呈現，語法上色是手動標記在 `lines`（`Seg` 陣列）裡，複製按鈕複製的是 `copyText`；兩者要一起更新。
- 參數表用 `ParamTable` 搭配 `Param` 資料，提示框用 `Callout`。頂欄的搜尋框只是外觀，要搜尋功能需另外接上搜尋服務。
你拿到的是原始碼
不是 npm 套件、不是 zip 檔。安裝之後整頁的 TypeScript 原始碼就在你的 repo 裡，可以任意修改、無執行期相依、沒有到期失效機制——我們的網站故障不會影響你已上線的網站。
瀏覽其他 103 套模板 →