@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