# react-ai-assist

> AI assistant helps transform your react app into an AI-powered app.

Latest version **0.0.26** (published 2024-12-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-ai-assist
pnpm add react-ai-assist
yarn add react-ai-assist
bun add react-ai-assist
```

## Health

**Score 35/100 (D)** — status: maintenance-mode.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support; pre 1.0.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.26 |
| Published | 2024-12-18 |
| First published | 2024-11-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 17 |
| Unpacked size | 9.2 MB |
| Known vulnerabilities | 0 (+4 in 2 direct dependencies) |
| Install scripts | no |
| Author | Xun Li |
| Maintainers | lixun910 |
| Keywords | ai, assistant, chatbot, openai, chatgpt, ollama |

## Links

- npm: https://www.npmjs.com/package/react-ai-assist
- npm.io page: https://npm.io/package/react-ai-assist

## Dependencies (17)

- [axios](https://npm.io/package/axios.md) ^1.7.7
- [openai](https://npm.io/package/openai.md) ^4.56.0
- [async-mutex](https://npm.io/package/async-mutex.md) ^0.5.0
- [html2canvas](https://npm.io/package/html2canvas.md) ^1.4.1
- [next-themes](https://npm.io/package/next-themes.md) ^0.3.0
- [framer-motion](https://npm.io/package/framer-motion.md) ^11.11.10
- [@iconify/react](https://npm.io/package/@iconify/react.md) ^5.0.2
- [@langchain/core](https://npm.io/package/@langchain/core.md) ^0.2.31
- [@langchain/ollama](https://npm.io/package/@langchain/ollama.md) ^0.0.4
- [@langchain/openai](https://npm.io/package/@langchain/openai.md) ^0.3.0
- [@nextui-org/react](https://npm.io/package/@nextui-org/react.md) ^2.4.8
- [@langchain/anthropic](https://npm.io/package/@langchain/anthropic.md) ^0.3.3
- [@langchain/community](https://npm.io/package/@langchain/community.md) ^0.2.31
- [@google/generative-ai](https://npm.io/package/@google/generative-ai.md) ^0.21.0
- [@langchain/google-genai](https://npm.io/package/@langchain/google-genai.md) ^0.1.5
- [@nextui-org/use-clipboard](https://npm.io/package/@nextui-org/use-clipboard.md) ^2.0.7
- [react-audio-voice-recorder](https://npm.io/package/react-audio-voice-recorder.md) ^2.2.0

## Alternatives

- [@expo/fingerprint](https://npm.io/package/@expo/fingerprint.md) — 6.2M weekly downloads
- [@azure/monitor-opentelemetry-exporter](https://npm.io/package/@azure/monitor-opentelemetry-exporter.md) — 850.0K weekly downloads
- [@azure/monitor-opentelemetry](https://npm.io/package/@azure/monitor-opentelemetry.md) — 624.0K weekly downloads
- [@posthog/ai](https://npm.io/package/@posthog/ai.md) — 423.3K weekly downloads
- [fakefilter](https://npm.io/package/fakefilter.md) — 63.9K weekly downloads

## Recent versions

- 0.0.26 (latest) — 2024-12-18
- 0.0.25 — 2024-12-08
- 0.0.24 — 2024-12-07
- 0.0.23 — 2024-12-07
- 0.0.22 — 2024-12-07
- 0.0.21 — 2024-12-07
- 0.0.20 — 2024-12-04
- 0.0.19 — 2024-12-04
- 0.0.18 — 2024-12-03
- 0.0.17 — 2024-11-27
- 0.0.16 — 2024-11-27
- 0.0.15 — 2024-11-27
- 0.0.14 — 2024-11-26
- 0.0.13 — 2024-11-26
- 0.0.12 — 2024-11-26
- … 11 more at https://npm.io/package/react-ai-assist/versions

## README

# Introduction

AI-Assistant helps adding AI capabilities to your React SPA  applications while keeping your data secure and private.

## License

MIT License.

## Features

- Support for multiple AI models.
  - OpenAI <img src="https://upload.wikimedia.org/wikipedia/commons/0/04/ChatGPT_logo.svg" width="20" height="20" alt="OpenAI logo" style="vertical-align: middle;">
  - Gemini <img src="https://upload.wikimedia.org/wikipedia/commons/8/8a/Google_Gemini_logo.svg" width="20" height="20" alt="Google logo" style="vertical-align: middle;">
  - Ollama <img src="https://ollama.com/public/assets/c889cc0d-cb83-4c46-a98e-0d0e273151b9/42f6b28d-9117-48cd-ac0d-44baaf5c178e.png" width="20" height="20" alt="Ollama logo" style="vertical-align: middle;">
- Built-in "Screenshot to Ask" feature.
- Built-in "Talk to Ask" feature.
- Support custom functions.
  - support calling existing actions
  - support custom message UI.
- Addons: 
  - query your dataset using duckdb https://www.npmjs.com/package/@react-ai-assist/duckdb
  - map your data
  - analyze and visualize your data  https://www.npmjs.com/package/@react-ai-assist/echarts
  - ...

## Usage

You can use the `AiAssistant` component to add AI capabilities to your React SPA applications directly.

```tsx
import { AiAssistant } from 'react-ai-assistant';
import 'react-ai-assist/dist/index.css';

<AiAssistant 
  modelProvider="openai"
  model="gpt-4o"
  apiKey="your-api-key"
  welcomeMessage="Hello, how can I help you today?"
  instructions="You are a helpful assistant."
  functions={[]}
/>
```
See an example:
| kepler.gl AI Assistant (kepler.gl) |  GeoDa.AI AI Assistant (geoda.ai)    |
|----|----|
| [<img width="215" alt="Screenshot 2024-12-08 at 9 12 22 PM" src="https://github.com/user-attachments/assets/edc11aee-8945-434b-bec9-cc202fee547c">](https://kepler.gl) |  [<img width="215" alt="Screenshot 2024-12-08 at 9 13 43 PM" src="https://github.com/user-attachments/assets/de418af5-7663-48fb-9410-74b4750bc944">](https://geoda.ai) |

### Screenshot to Ask

Click to watch the video
[<img width="215" alt="Screenshot 2024-12-08 at 9 13 43 PM" src="https://github.com/user-attachments/assets/d87fdb72-d7af-488f-bf4d-3afa89a5e09f">](https://geoda.ai/img/highlight-screenshot.mp4)

### Talk to Ask

Click to watch the video
[<img width="215" alt="Screenshot 2024-12-08 at 9 13 43 PM" src="https://github.com/user-attachments/assets/d87fdb72-d7af-488f-bf4d-3afa89a5e09f">](https://geoda.ai/img/highlight-ai-talk.mp4)

## Installation

```bash
npm install react-ai-assistant
```

## Usage

```tsx
import { AiAssistant } from 'react-ai-assistant';
import 'react-ai-assist/dist/index.css';

<AiAssistant 
  modelProvider="openai"
  model="gpt-4o"
  apiKey="your-api-key"
  welcomeMessage="Hello, how can I help you today?"
  instructions="You are a helpful assistant."
  functions={[]}
/>
```

You can use `useAssistant` hook to get the assistant instance directly. 

```tsx
import { useAssistant } from 'react-ai-assistant';

const {initializeAssistant, addAdditionalContext} = useAssistant(assistantProps);
```

The package provides utiles to manage the assistant state.

For example, you can use it to create a configuration UI for your assistant:

|  |  |
|----|----|
| <img width="215" alt="Screenshot 2024-12-08 at 9 12 49 PM" src="https://github.com/user-attachments/assets/0beae014-efb0-447a-8e11-3cd16f5cae5b"> | |

## Tutorial
See the [example](./example) for more details.

---
_Source: https://npm.io/package/react-ai-assist · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._