# Integrate Bodhi SDK Into React Apps

React developers often need a clear path from a Vite app to local LLM chat with OAuth. This skill provides setup steps, code patterns, deployment guidance, and troubleshooting for bodhi-js-sdk.

## Install

```bash
npx skillstore add bodhisearch/bodhi-sdk-react-integration
```

## Metadata

- - Slug: bodhisearch-bodhi-sdk-react-integration
- - Version: 1.0.0
- - Author: BodhiSearch
- - GitHub username: BodhiSearch
- - License: MIT
- - Repository: https://github.com/BodhiSearch/bodhi-js/tree/main/bodhi-js-sdk/skills/react-integration
- - Ref: main
- - Supported tools: Claude, Codex, Claude Code
- - Risk level: medium
- - Risk factors: external\_commands, network, env\_access, filesystem
- - Quality score: 50
- - Quality tier: warning
- - Public page: https://skillstore.pages.dev/skills/bodhisearch-bodhi-sdk-react-integration
- - Manifest: https://skillstore.pages.dev/api/skills/bodhisearch-bodhi-sdk-react-integration/manifest

## Capabilities

- Installs and configures @bodhiapp/bodhi-js-react in React and Vite projects.
- Adds BodhiProvider setup and useBodhi hook patterns for chat interfaces.
- Explains OAuth client registration for development and production environments.
- Provides streaming chat examples using OpenAI-compatible completion APIs.
- Covers GitHub Pages base path, callback, and deployment configuration.
- Troubleshoots extension detection, local backend connection, auth, and model loading issues.

## Use Cases

- Add local LLM chat to a React app: Set up the Bodhi provider, create a chat component, load models, and stream responses in a Vite application.
- Prepare OAuth for production deployment: Separate development and production client IDs, configure redirect URIs, and pass Vite environment variables through deployment workflows.
- Debug Bodhi integration failures: Check extension status, backend reachability, authentication state, model loading, and streaming behavior with targeted troubleshooting steps.

## Prompt Templates

### Start a Basic Integration

```
Integrate bodhi-js-sdk into my React and Vite app. Add the provider, a simple chat component, and clear setup notes.
```

### Configure OAuth Environments

```
Help me configure Bodhi OAuth for dev and production. Include redirect URI checks, Vite environment variables, and safe deployment notes.
```

### Deploy to GitHub Pages

```
Prepare my Bodhi React app for GitHub Pages. Fix base path handling, callback routing, and the build workflow.
```

### Troubleshoot a Broken Integration

```
Diagnose why my Bodhi React integration is not authenticating or loading models. Check provider configuration, backend reachability, and browser storage safely.
```

## Limitations

- Focused on React and Vite projects, not other frontend frameworks.
- Requires the Bodhi App backend and optional browser extension to be available.
- Does not create OAuth clients automatically in the Bodhi developer portal.
- Some troubleshooting steps inspect browser storage and should avoid shared token logs.

## Best Practices

- Use separate OAuth clients for development and production environments.
- Redact token values and auth state before sharing console logs.
- Verify package scripts and dependency changes before running npm or npx commands.

## Anti Patterns

- Do not commit real deployment configuration when your team treats client IDs as sensitive.
- Do not paste localStorage auth values into public issues or support channels.
- Do not reuse localhost redirect URIs for production OAuth clients.

## Security Audit

- - Safe to publish: true
- - Audited at: 2026-06-28T16:06:02.196\+00:00
- - Summary: 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.

## Stats

- - Views: 445
- - Downloads: 5
- - Favorites: 0
- - Popularity score: 0