Agent skill · software engineering · aiskillstore
bodhi-sdk-react-integration
Integrate React+Vite web apps with bodhi-js-sdk for local LLM integration. Use when user asks to: "integrate bodhi", "add bodhi sdk", "connect to bodhi", "setup bodhi provider", "bodhi react integration", "deploy bodhi to github pages", or troubleshoot bodhi-js-sdk connection/auth issues.
Why this skill is useful
Provides specific integration patterns and commands for using bodhi-js-sdk with React+Vite that the AI wouldn't reliably generate on its own.
What it needs
Requires npm installed locally. Requires bodhi account access. About 6k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
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 (requires real domain) Basic Integration Steps Step 1: Install Package Step 2: Wrap App with BodhiProvider Step 3: Create Chat Component Key APIs and Hooks useBodhi() Hook Client Methods (OpenAI-Compatible) Advanced Configuration Custom Client Config basePath for Sub-paths or GitHub Pages When your app runs on a sub-path (e.g., GitHub Pages at /repo-name/): Common Patterns Conditional Rendering Model Loading with Caching Error Handling Detailed Guides For comprehensive information on specific topics, see the supporting documentation: Quick Start Guide - Complete 5-minute integration walkthrough OAuth Setup - …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/bodhi-sdk-react-integration