REFERENCE
SDK 範例
@asgard-js/core 與 @asgard-js/react 的用法與可以直接操作的範例。
整合總覽
這一頁是用 Asgard 開發第一個功能的路線圖。本站（SDK Demo）聚焦在前端
@asgard-js/react 的用法；而「如何建立 Bot、設定對話邏輯、取得憑證」屬於平台
端，文件在 Asgard 開發者文件。下面把整條路徑
串起來，每一步都指向該看的頁面。
一句話總結
先在 Odin 把 Bot 做好並發佈成 Bot Provider（拿到 endpoint 與憑證）→ 再用本站
的 @asgard-js/react 把它接到你的前端。
整條開發旅程
1. 了解概念，選擇整合模式
先決定你的應用要用哪種方式接 Asgard，這會影響後面所有步驟：
模式 適合情境 文件 Direct Connect 前端直接連 Bot Provider，最快上線 Direct Connect Backend Relay 需要在你自己的後端中繼、隱藏金鑰、加業務邏輯 Backend Relay Hosted Embed 用官方 iframe 直接嵌入，免寫前端 Hosted Embed 延伸閱讀：整合總論。 本站的 demo 預設示範 Direct Connect。
2. 在 Odin 建立 Bot、發佈成 Bot Provider
這是開發者最常卡住的一步——前端要的
botProviderEndpoint是從這裡來的。 在 Odin Studio 裡：-
建立 Project 與 Workflow，設計對話邏輯（HTTP 呼叫、SQL 查詢、知識庫檢索…）。
-
發佈成 Bot Provider，取得 endpoint 與憑證：
https://api.asgard-ai.com/ns/{namespace}/bot-provider/{botProviderId}
延伸閱讀：
3. 用
@asgard-js/react接到前端拿到 endpoint 後，回到本站：
- 快速開始 — 安裝、引入 CSS、渲染第一個
<Chatbot>、SSR/Next.js 包裝 - Chatbot Props — 所有可用 props
- 嵌入與整合 — inline / 浮動 widget / 全螢幕
4. 設計訊息與回覆呈現
Bot 回覆會以訊息模板呈現，前端負責渲染：
- 訊息模板 Demo — 11 種內建模板的互動式預覽
- Message Template 規格 — 每種模板的完整 JSON schema
- 想完全自訂呈現？看 自訂渲染
5. 認證與私有 Bot
如果你的 Bot 需要驗證：
-
接下來
- 第一次接觸？直接從 快速開始 動手。
- 想看所有前端功能？瀏覽左側選單的各個 Demo。
- 需要後端中繼？看 Backend Relay 模式 與 後端 SDK。