Enterprise AI chatbot component for React with multi-provider support
npm install @aireact/chatbotš AI Chat Components for React
Enterprise-grade conversational AI with streaming responses, multi-provider support, and beautiful UI.
- š¬ Ready-to-use Chat UI: Beautiful, responsive chat interface
- š Real-time Streaming: See AI responses token by token
- š± Mobile-friendly: Responsive design for all devices
- šØ Customizable: Style with CSS variables or custom components
- š§ Multi-Provider: OpenAI, Claude, Gemini, Ollama, and more
- š Markdown Support: Rich text with code highlighting
- š§ TypeScript: Full TypeScript support
``bash`
npm install @aireact/chatbot @aireact/core
`tsx
import { ChatWindow, useChatbot } from '@aireact/chatbot';
import '@aireact/chatbot/style.css';
function App() {
return (
apiKey={process.env.REACT_APP_OPENAI_API_KEY}
model="gpt-4o"
title="AI Assistant"
placeholder="Ask me anything..."
/>
);
}
`
`tsx
import { useChatbot } from '@aireact/chatbot';
function CustomChat() {
const {
messages,
isLoading,
error,
sendMessage,
clearMessages
} = useChatbot({
provider: 'openai',
apiKey: process.env.REACT_APP_OPENAI_API_KEY,
model: 'gpt-4o',
systemPrompt: 'You are a helpful assistant.',
streaming: true
});
return (
š¤ Supported Providers
| Provider | Models | Streaming |
|----------|--------|-----------|
| OpenAI | GPT-4, GPT-4o, GPT-3.5 | ā
|
| Anthropic | Claude 3, Claude 3.5 | ā
|
| Google | Gemini Pro, Ultra | ā
|
| Ollama | Llama, Mistral | ā
|
š Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
|
provider | string | - | AI provider |
| apiKey | string | - | API key |
| model | string | - | Model name |
| title | string | 'Chat' | Window title |
| placeholder | string | 'Type...' | Input placeholder |
| systemPrompt | string | - | System prompt |
| streaming | boolean | true | Enable streaming |
| theme | 'light' \| 'dark' | 'light' | Theme |šØ Customization
`css
:root {
--aireact-chat-bg: #ffffff;
--aireact-chat-text: #333333;
--aireact-chat-user-bg: #e1f5fe;
--aireact-chat-assistant-bg: #f5f5f5;
--aireact-chat-button-bg: #2196f3;
}
``- GitHub Repository
- Full Documentation
- Report Issues
MIT Ā© Bharatkumar Subramanian