LuchoAI React Component

A React component for embedding the LuchoAI chat widget into any React application. This component provides the same functionality as the vanilla JavaScript widget, but packaged as a reusable React component.

Installation

npm install lucho-ai-react

or

yarn add lucho-ai-react

Requirements

• React >= 16.8.0
• React DOM >= 16.8.0

Basic Usage

import { LuchoAI } from 'lucho-ai-react';

function App() {
  return (
    <div>
      <h1>My App</h1>
      <LuchoAI apiUrl="https://rag-api-o5y7.onrender.com" />
    </div>
  );
}

Props

apiUrl (required)

The base API URL for your chat service.

Type: string

Example:

<LuchoAI apiUrl="https://rag-api-o5y7.onrender.com" />

position (optional)

Position of the widget on the screen.

Type: 'bottom-right' | 'bottom-left'

Default: 'bottom-right'

Example:

<LuchoAI 
  apiUrl="https://rag-api-o5y7.onrender.com" 
  position="bottom-left" 
/>

buttonColor (optional)

Customize the button gradient colors.

Type: { from: string; to: string }

Example:

<LuchoAI 
  apiUrl="https://rag-api-o5y7.onrender.com" 
  buttonColor={{ from: "#ff6b6b", to: "#ee5a6f" }}
/>

Features

• ✅ Toggle chat widget open/close with smooth animations
• ✅ Responsive design (mobile-optimized)
• ✅ Accessible (ARIA labels)
• ✅ Zero external CSS dependencies (all styles inline)
• ✅ TypeScript support with full type definitions
• ✅ Customizable button colors
• ✅ Position control (bottom-right or bottom-left)

Examples

Next.js

// pages/_app.tsx or app/layout.tsx
import { LuchoAI } from 'lucho-ai-react';

export default function App({ Component, pageProps }) {
  return (
    <>
      <Component {...pageProps} />
      <LuchoAI apiUrl="https://rag-api-o5y7.onrender.com" />
    </>
  );
}

Create React App

// src/App.tsx
import React from 'react';
import { LuchoAI } from 'lucho-ai-react';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Welcome to My App</h1>
      </header>
      <LuchoAI apiUrl="https://rag-api-o5y7.onrender.com" />
    </div>
  );
}

export default App;

Vite + React

// src/App.tsx
import { LuchoAI } from 'lucho-ai-react';

function App() {
  return (
    <>
      <h1>My Vite App</h1>
      <LuchoAI 
        apiUrl="https://rag-api-o5y7.onrender.com"
        position="bottom-left"
        buttonColor={{ from: "#667eea", to: "#764ba2" }}
      />
    </>
  );
}

TypeScript Support

This package includes full TypeScript definitions. Import types if needed:

import { LuchoAI, LuchoAIProps, WidgetPosition } from 'lucho-ai-react';

const props: LuchoAIProps = {
  apiUrl: "https://rag-api-o5y7.onrender.com",
  position: "bottom-right" as WidgetPosition,
};

Styling

The component uses inline styles and doesn't require any external CSS. All styles are scoped to the component to avoid conflicts with your application's styles.

Mobile Responsive

The widget automatically adapts to mobile screens:

• On screens smaller than 480px, the chat frame expands to fill most of the viewport
• The widget maintains proper spacing and positioning on all devices

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.