react-ai-assist

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
  • Gemini
  • Ollama
• 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.

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)

Screenshot to Ask

Click to watch the video

Talk to Ask

Click to watch the video

Installation

npm install react-ai-assistant

Usage

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.

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:

Tutorial

See the example for more details.