bodhi-sdk-react-integrationlisted

# Bodhi JS SDK React Integration Guide for integrating React+Vite applications with bodhi-js-sdk to enable local LLM chat capabilities through the Bodhi Browser ecosystem. ## When to Use This Skill - User wants to integrate a React app with bodhi-js-sdk - User needs to add chat/LLM capabilities to their React+Vite app - User is deploying a bodhi-integrated app to GitHub Pages - User is troubleshooting SDK connection, authentication, or streaming issues ## Quick Integration Checklist 1. **Install**: `npm install @bodhiapp/bodhi-js-react` 2. **Register**: Create OAuth client at https://developer.getbodhi.app 3. **Wrap App**: Add `<BodhiProvider authClientId={...}>` around your app 4. **Use Hook**: Access `useBodhi()` for client, auth state, and actions 5. **Build UI**: Create chat interface with streaming support ## Core Concepts ### Package Architecture - `@bodhiapp/bodhi-js-react` - Preset package for web apps (auto-creates WebUIClient) - `@bodhiapp/bodhi-js-react-ext` - Preset package for Chrome extensions (auto-creates ExtUIClient) - Both include React bindings + OpenAI-compatible API ### Connection Modes - **Extension mode**: Via Bodhi Browser extension (preferred) - **Direct mode**: Direct HTTP to local server (fallback) - SDK auto-detects and switches modes automatically ### Authentication - OAuth 2.0 + PKCE flow - Two auth servers: - **Dev**: `https://main-id.getbodhi.app/realms/bodhi` (allows localhost) - **Prod**: `https://id.getbodhi.app/realms/bodhi`