@andesphereai/react NPM

@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} />
}