@andesphereai/react
AndyChat React components - embeddable AI chatbot library for React applications.
Overview
A React component library for embedding AI chatbots into React applications. Features automatic configuration loading, customizable theming, and complete integration with the AndyChat platform.
Installation
npm install @andesphereai/react
# or
yarn add @andesphereai/react
# or
pnpm add @andesphereai/react
Peer Dependencies
This package requires React as a peer dependency:
npm install react react-dom
Compatible with:
- React 18+
- React 19+
Quick Start
Basic Usage
import React from 'react'
import { AndyChat } from '@andesphereai/react'
function App() {
return (
<div>
<h1>My App</h1>
<AndyChat embedId="your-embed-id" />
</div>
)
}
export default App
With Custom Styling
import { AndyChat } from '@andesphereai/react'
function App() {
return (
<AndyChat
embedId="your-embed-id"
color="#ff6b35"
theme="dark"
orientation="left"
/>
)
}
API Reference
AndyChat Component
The main component that renders the complete chatbot experience.
Props
Prop | Type | Default | Description | ||
---|---|---|---|---|---|
embedId |
string (required) |
- | Your unique chatbot embed ID | ||
color |
string |
#4086F4 |
Brand primary color (hex) | ||
theme |
`'light' \ | 'dark' \ | 'auto'` | 'light' |
Color theme |
orientation |
`'left' \ | 'right'` | 'right' |
Chat window position | |
fontFamily |
string |
- | Custom font family | ||
borderRadius |
string |
- | Custom border radius (e.g., '8px') |
Configuration Loading
The component automatically loads configuration from your AndyChat dashboard using the provided embedId
. This includes:
- Welcome messages
- FAQ items
- Bot personality
- Default styling
- Feature toggles
Example with All Props
<AndyChat
embedId="your-embed-id"
color="#ff6b35"
theme="auto"
orientation="left"
fontFamily="Inter, sans-serif"
borderRadius="12px"
/>
Features
- 🎨 Automatic theming - Loads colors, logo, and branding from dashboard
- 📱 Mobile responsive - Optimized for all screen sizes
- 🔒 Style isolation - Uses Shadow DOM to prevent CSS conflicts
- ⚡ Performance optimized - Code splitting and lazy loading
- ♿ Accessible - Full keyboard navigation and screen reader support
- 🌐 i18n ready - Supports multiple languages via dashboard config
Advanced Usage
Custom Event Handlers
import { AndyChat } from '@andesphereai/react'
function App() {
const handleChatOpen = () => {
console.log('Chat opened')
// Analytics tracking, etc.
}
return (
<AndyChat
embedId="your-embed-id"
onOpen={handleChatOpen}
/>
)
}
Integration with React Router
import { useLocation } from 'react-router-dom'
import { AndyChat } from '@andesphereai/react'
function App() {
const location = useLocation()
return (
<div>
<Routes>
{/* Your routes */}
</Routes>
{/* Chat available on all pages */}
<AndyChat
embedId="your-embed-id"
key={location.pathname} // Reset on route change
/>
</div>
)
}
TypeScript Support
Full TypeScript support with exported types:
import { AndyChat, type AndyChatProps } from '@andesphereai/react'
const MyComponent: React.FC = () => {
const chatProps: AndyChatProps = {
embedId: 'your-embed-id',
color: '#ff6b35',
theme: 'dark'
}
return <AndyChat {...chatProps} />
}
Bundle Size
- Core bundle: ~15KB gzipped
- With React: ~45KB gzipped total
- Lazy-loaded features: FAQ, user forms load on demand
Browser Support
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
Contributing
See our contributing guidelines for details on how to contribute to this project.
License
MIT