Build AI-Powered Applications
with built-in interactive features and powerful plugins
while keeping your data secure
while keeping your data secure
Add AI Assistant to your app with ease
Light Mode
Dark Mode
LLM Models
page.tsx
tailwind.config.js (optional)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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"
welcomeMessage="Hello! How can I help you today?"
/>
);
}Supercharge your AI Assistant with Interactive Capabilities
Screenshot within App
Voice to Text
Function Calling
page.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
import { AiAssistant, ScreenshotWrapper } from '@openassistant/ui';
// only for React app without tailwindcss
import '@openassistant/ui/dist/index.css';
function App() {
const [startScreenCapture, setStartScreenCapture] = useState(false);
const [screenCaptured, setScreenCaptured] = useState('');
return (
<ScreenshotWrapper
setScreenCaptured={setScreenCaptured}
startScreenCapture={startScreenCapture}
setStartScreenCapture={setStartScreenCapture}
>
<div className="h-[600px] w-[400px] m-4">
<AiAssistant
modelProvider="openai"
model="gpt-4"
apiKey="your-api-key"
welcomeMessage="Hello! How can I help you today?"
// enable screen capture
enableScreenCapture={true}
screenCapturedBase64={screenCaptured}
onScreenshotClick={() => setStartScreenCapture(true)}
onRemoveScreenshot={() => setScreenCaptured('')}
/>
</div>
</ScreenshotWrapper>
);
}Extend your AI Assistant with powerful Plugins
Data Analysis (GeoDa)
Plots (eCharts)
SQL Query (DuckDB)
page.tsx
test-data.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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"
welcomeMessage="Hello! How can I help you today?"
/>
);
}All Features
🤖
Multiple AI Provider Support
🎯
Built-in Advanced Capabilities
🌟
AI Assistant Plugins
🎨
Customizable UI Components
📦
Easy Integration