技能 bodhi-sdk-react-integration

⚛️

bodhi-sdk-react-integration

Name: bodhi-sdk-react-integration
Author: BodhiSearch

安全 ⚙️ 外部命令🌐 網路存取

Ajouter un chat LLM local aux applications React

Les utilisateurs doivent intégrer des capacités LLM locales dans les applications React. Cette compétence fournit des instructions étape par étape pour installer bodhi-js-sdk, configurer l'authentification OAuth, et construire des interfaces de chat en streaming avec l'écosystème Bodhi Browser.

支援: Claude Codex Code(CC)

📊 70 充足

下載技能 ZIP

在 Claude 中上傳

前往設定 → 功能 → 技能 → 上傳技能

開啟並開始使用

測試它

正在使用「bodhi-sdk-react-integration」。 Add bodhi-js-sdk to my React+Vite project

預期結果:

1. Run: npm install @bodhiapp/bodhi-js-react
2. Wrap App.tsx with BodhiProvider using your OAuth client ID
3. Create Chat.tsx using useBodhi hook for client access
4. Implement streaming chat with for await loop over chunks
5. Run npm run dev and test the authentication flow

正在使用「bodhi-sdk-react-integration」。 Configure OAuth for development and production

預期結果:

Development: Use auth server at https://main-id.getbodhi.app/realms/bodhi with localhost redirect URIs
Production: Use auth server at https://id.getbodhi.app/realms/bodhi with real domain redirect URIs
Use environment variables VITE_BODHI_CLIENT_ID and VITE_BODHI_AUTH_SERVER for configuration
BodhiProvider handles OAuth 2.0 + PKCE flow automatically

正在使用「bodhi-sdk-react-integration」。 Debug connection issues

預期結果:

Check isExtension and isServerReady using useBodhi hook
Verify Bodhi App backend is running at http://localhost:1135
Extension mode requires Bodhi Browser extension installed
Direct mode fallback used when extension is not detected
Review console logs prefixed with [Bodhi/Web] for debugging

安全審計

安全

v5 • 1/16/2026

Documentation-only skill providing step-by-step guidance for integrating bodhi-js-sdk into React applications. All 438 static findings are false positives: the scanner misinterprets markdown code block delimiters (triple backticks) as Ruby shell backtick execution, legitimate Bodhi SDK endpoints as hardcoded network targets, and standard Vite environment variable patterns as sensitive data access. No executable code exists - only markdown documentation files (.md) with code examples for user reference.

已掃描檔案

2,678

分析行數

發現項

審計總數

風險因素

⚙️ 外部命令 (288)

🌐 網路存取 (71)

審計者: claude 查看審計歷史 →

品質評分

架構

100

可維護性

內容

社群

100

安全

規範符合性

你能建構什麼

Construire un chat LLM local

Ajouter une interface de chat en streaming à l'application React+Vite utilisant le package bodhi-js-react

Déployer sur GitHub Pages

Configurer basePath et OAuth pour le déploiement de site statique avec des domaines personnalisés

Dépanner l'intégration

Diagnostiquer et résoudre les problèmes de connexion, d'authentification et de streaming en production

試試這些提示

Intégration de base

Ajouter bodhi-js-sdk à mon projet React+Vite. Installer le package, envelopper mon application avec BodhiProvider en utilisant le client ID du portail développeur, et créer un composant de chat simple.

Configuration GitHub Pages

Configurer mon application React avec bodhi-integrated pour GitHub Pages. Définir le basePath correct dans vite.config.ts et BodhiProvider, ajouter la redirection 404.html, et configurer l'URI de redirection OAuth.

Configuration OAuth

Configurer l'authentification OAuth pour bodhi-js-sdk. Configurer l'environnement de dev avec le serveur d'auth localhost et l'environnement de prod avec le serveur d'auth de production utilisant les variables d'environnement.

Chat en streaming

Créer un composant de chat en streaming complet utilisant le hook useBodhi. Inclure la sélection de modèle, la boucle de streaming AsyncGenerator, les états de chargement, la gestion d'erreurs, et le support des conversations multi-tours.

最佳實務

Utiliser les variables d'environnement pour les IDs de clients OAuth et ne jamais engager d'identifiants dans le contrôle de version
Vérifier isOverallReady et isAuthenticated avant d'effectuer des appels API pour éviter les erreurs
Implémenter une gestion d'erreurs appropriée avec try/catch autour des requêtes en streaming et des opérations async

避免

Coder en dur les IDs de clients OAuth directement dans le code source au lieu d'utiliser des variables d'environnement
Faire des appels API avant que le client soit prêt ou que l'utilisateur soit authentifié
Ne pas gérer les erreurs de streaming ou les échecs de connexion de manière élégante dans l'interface utilisateur

常見問題

Qu'est-ce que bodhi-js-sdk ?

Un SDK TypeScript pour intégrer des capacités LLM locales dans les applications web en utilisant l'écosystème Bodhi Browser avec une API compatible OpenAI.

Quels modes de connexion sont supportés ?

Mode extension via l'extension Bodhi Browser et mode HTTP direct vers le serveur local sur localhost:1135. Le SDK détecte automatiquement.

Comment fonctionne l'authentification OAuth ?

Flux OAuth 2.0 + PKCE avec rafraîchissement automatique des jetons. Le dev utilise main-id.getbodhi.app, la prod utilise id.getbodhi.app.

Mes données sont-elles envoyées à des serveurs externes ?

Non. Bodhi se connecte aux modèles LLM locaux via le backend Bodhi App. Seuls les jetons OAuth sont envoyés aux serveurs d'auth.

Pourquoi le chat ne diffuse-t-il pas correctement ?

S'assurer que stream: true est défini dans la requête de chat et utiliser la boucle for await pour le streaming. Vérifier que le serveur fonctionne et que l'utilisateur est authentifié.

En quoi est-ce différent de l'API OpenAI ?

Se connecte aux modèles locaux au lieu de l'API cloud. Utilise le même motif d'API compatible OpenAI pour la familiarité et la migration facile.