Quick Start

Transform Your React Apps with OpenAssistant: The AI Integration Library You've Been Waiting For

Looking to supercharge your React applications with AI capabilities? Meet OpenAssistant - your new favorite tool for seamlessly integrating AI power into existing React apps without the hassle.

Unlike general-purpose chatbots such as ChatGPT or Google Gemini, OpenAssistant takes a different approach. It's specifically engineered to be the bridge between Large Language Models (LLMs) and your application's functionality. Think of it as your application's AI co-pilot that can not only chat with users but also execute complex tasks by leveraging your app's features and external AI plugins.

Installation

Install the core packages using npm:

npm install @openassistant/core @openassistant/ui

Dependencies

The following dependencies are required and should be installed in your project:

react

@langchain/core

@langchain/google-genai

@langchain/ollama

@langchain/openai

html2canvas

next-themes

@nextui-org/react

framer-motion

Getting Started

Here's a basic example of using OpenAssistant in your React app:

import { AiAssistant } from '@openassistant/ui';
// only for React app without tailwindcss
import '@openassistant/ui/dist/index.css';

function App() {
  return (
    <AiAssistant
      modelProvider="openai"
      model="gpt-4"
      apiKey="your-api-key"
      enableVoice={true}
      welcomeMessage="Hello! How can I help you today?"
    />
  );
}

Key Features

OpenAssistant comes with powerful features:

🤖 Multiple AI Provider Support

OpenAI (GPT models)

Google Gemini

Ollama (local AI models)

🎯 Advanced Capabilities

Take screenshot to ask

Talk to ask

Function calling support

🌟 AI Assistant Plugins

DuckDB: in-browser query data using duckdb via prompt

ECharts: visualize data using echarts via prompt

GeoDa: apply spatial data analysis using geoda wasm via prompt

🎨 Customizable UI Components

Pre-built chat interface

Pre-built LLM configuration interface

Screenshot wrapper for your app

Theme support

For more detailed documentation and examples, check out our package-specific guides:

• Core Package Documentation
• UI Components Guide
• CLI Tool Tutorial
• Plugin Documentation (DuckDB, GeoDa, ECharts)