bodhi-sdk-react-integration
將 Bodhi SDK 整合到 React 應用程式
React 開發者通常需要一條清楚的路徑，從 Vite 應用程式走到具備 OAuth 的本機 LLM 聊天。此技能提供 bodhi-js-sdk 的設定步驟、程式碼模式、部署指引與疑難排解。
下載技能 ZIP
在 Claude 中上傳
前往 設定 → 功能 → 技能 → 上傳技能
開啟並開始使用
Agent 可讀資源
當 AI Agent、爬蟲或腳本需要乾淨脈絡、而不是讀取完整頁面時，請使用這些連結。
測試它
正在使用「bodhi-sdk-react-integration」。 將 Bodhi 加到我的 Vite React 專案。
預期結果:
一份精簡的整合計畫，包含 package installation、provider placement、chat component changes 與 verification steps。
正在使用「bodhi-sdk-react-integration」。 我的 GitHub Pages callback 回傳 404。
預期結果:
一份部署檢查清單，涵蓋 Vite base path、callback path、redirect URI registration 與 static routing behavior。
正在使用「bodhi-sdk-react-integration」。 Login 成功一次後，應用程式就失去 authentication。
預期結果:
一套針對 browser storage access、base path mismatches、token refresh 與 safe log redaction 的疑難排解流程。
安全審計
中風險Static analysis heavily overcounted Markdown code fences as Ruby backtick execution and marked documentation URLs as risky network behavior. Human review found no prompt injection or confirmed malicious intent, but the skill can run npm/npx commands and includes troubleshooting guidance that may expose OAuth token state in browser storage or console logs.
中風險問題 (2)
低風險問題 (3)
風險因素
⚙️ 外部命令 (6)
🌐 網路存取 (5)
🔑 環境變數 (5)
📁 檔案系統存取 (3)
偵測到的模式
品質評分
你可以打造什麼
將本機 LLM 聊天加入 React 應用程式
在 Vite 應用程式中設定 Bodhi provider、建立聊天元件、載入模型並串流回應。
為生產部署準備 OAuth
分離開發與生產 client IDs、設定 redirect URIs，並透過部署工作流程傳遞 Vite environment variables。
偵錯 Bodhi 整合失敗
透過針對性的疑難排解步驟，檢查 extension 狀態、backend 可連線性、authentication state、模型載入與串流行為。
試試這些提示
將 bodhi-js-sdk 整合到我的 React 和 Vite 應用程式。加入 provider、一個簡單的聊天元件，以及清楚的設定說明。
協助我設定 dev 和 production 的 Bodhi OAuth。包含 redirect URI 檢查、Vite environment variables，以及安全部署注意事項。
為 GitHub Pages 準備我的 Bodhi React 應用程式。修正 base path 處理、callback routing 與 build workflow。
診斷為什麼我的 Bodhi React 整合無法 authentication 或載入模型。安全地檢查 provider configuration、backend reachability 與 browser storage。
最佳實務
- 為開發與生產環境使用不同的 OAuth clients。
- 在分享 console logs 前，遮蔽 token values 和 auth state。
- 執行 npm 或 npx commands 前，先驗證 package scripts 和 dependency changes。
避免
- 如果你的團隊將 client IDs 視為敏感資訊，請勿提交真實的 deployment configuration。
- 請勿將 localStorage auth values 貼到公開 issues 或 support channels。
- 請勿將 localhost redirect URIs 重複用於 production OAuth clients。