@shashankrai/echo-chat-react-widget
v1.0.2
Published
A drop-in React chat widget for Echo - an embeddable AI chat assistant for your website
Maintainers
Readme
@shashankrai/echo-chat-react-widget
An embeddable React chat widget for the ECHO Platform. Easily add an AI-powered chat assistant to your website using your unique API Key.
Features
- 🚀 Drop-in React component - minimal setup required
- 💬 AI-powered chat interface
- 🎨 Customizable and responsive design
- 🔒 Secure API key authentication
- ⚡ Lightweight and performant
Installation
npm install @shashankrai/echo-chat-react-widgetOr using yarn:
yarn add @shashankrai/echo-chat-react-widgetOr using pnpm:
pnpm add @shashankrai/echo-chat-react-widgetUsage
Wrap your application (or a specific page) in the <EchoProvider>, and place the <ChatWidget> component anywhere in the React tree. The widget automatically handles rendering the floating button and the chat UI.
import { EchoProvider, ChatWidget } from '@shashankrai/echo-chat-react-widget';
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<EchoProvider apiKey="YOUR_LIVE_OR_TEST_API_KEY">
{children}
{/* Renders the floating chat bubble */}
<ChatWidget />
</EchoProvider>
</body>
</html>
);
}API Key Configuration
The apiKey passed to the provider securely identifies your company and dynamically scopes all AI queries strictly to your company's knowledge base.
- Use your Live API Key for production environments
- Use your Test API Key for development and testing
Props
EchoProvider
| Prop | Type | Required | Description |
|------|------|----------|-------------|
| apiKey | string | Yes | Your Echo API key (Live or Test) |
| children | ReactNode | Yes | Your application content |
ChatWidget
The ChatWidget component doesn't require any props. Simply place it inside your EchoProvider.
Requirements
- React 18.0.0 or higher
- React DOM 18.0.0 or higher
License
MIT
Support
For issues, questions, or contributions, please visit our GitHub repository.
