包详细信息

@andesphereai/react

andesphere970MIT1.2.6

AndyChat React components - embeddable AI chatbot library for React applications

react, chatbot, ai, chat

自述文件

@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