@aireact/chatbot

🚀 AI Chat Components for React

Enterprise-grade conversational AI with streaming responses, multi-provider support, and beautiful UI.

✨ Features

- 💬 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

📦 Installation

``bash
npm install @aireact/chatbot @aireact/core
`

🚀 Quick Start

`tsx
import { ChatWindow, useChatbot } from '@aireact/chatbot';
import '@aireact/chatbot/style.css';

function App() {
return (
provider="openai"
apiKey={process.env.REACT_APP_OPENAI_API_KEY}
model="gpt-4o"
title="AI Assistant"
placeholder="Ask me anything..."
/>
);
}
`

$3

`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;
}
``

📦 Related Packages

$3

- @aireact/core - Core AI Client
- @aireact/autosuggest - AI Suggestions
- @aireact/smartform - AI Form Validation
- @aireact/smart-datatable - AI Data Tables

$3

- @aivue/chatbot - Vue Chat Components
- @aivue/core - Vue Core AI Client

$3

- @aiangular/chatbot - Angular Chat Components

🔗 More Information

- GitHub Repository
- Full Documentation
- Report Issues

📄 License

MIT © Bharatkumar Subramanian