Zero-dependency JavaScript chat widget for modern web applications
QuikChat is a lightweight, highly customizable chat interface that integrates seamlessly with any web project. Built with vanilla JavaScript, it provides powerful features for LLM applications, real-time chat, and interactive messaging experiences.
🚀 Live Demo | 📚 API Reference | 🛠 Developer Guide
- 🚫 Zero Dependencies - Pure vanilla JavaScript, no frameworks required
- 🎨 Fully Customizable - Complete CSS theming system with multi-instance support
- 🤖 LLM Ready - Built-in support for OpenAI, Anthropic, Ollama, and streaming responses
- 📱 Responsive Design - Adapts to any screen size and container dimensions
- ⚡ High Performance - Virtual scrolling for large message volumes
- 👁 Advanced Visibility - Individual and group-based message control (v1.1.13+)
- 🏷 Tagged Messages - Powerful tagging system for message organization (v1.1.14+)
- 💾 Full History Control - Save, load, and restore complete chat sessions
- 🔧 Developer Friendly - TypeScript-ready with comprehensive API
Get a working chat interface in under 60 seconds:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/quikchat/dist/quikchat.css">
</head>
<body>
<div id="chat" style="width: 100%; height: 400px;"></div>
<script src="https://unpkg.com/quikchat"></script>
<script>
const chat = new quikchat('#chat', (instance, message) => {
// Echo user message
instance.messageAddNew(message, 'You', 'right');
// Add bot response
setTimeout(() => {
instance.messageAddNew('Thanks for your message!', 'Bot', 'left');
}, 1000);
});
// Add welcome message
chat.messageAddNew('Hello! How can I help you today?', 'Bot', 'left');
</script>
</body>
</html>npm install quikchatimport quikchat from 'quikchat';
import 'quikchat/dist/quikchat.css';
const chat = new quikchat('#chat-container', (instance, message) => {
// Your message handling logic
console.log('User said:', message);
});npm install quikchat<!-- CSS -->
<link rel="stylesheet" href="https://unpkg.com/quikchat/dist/quikchat.css">
<!-- JavaScript -->
<script src="https://unpkg.com/quikchat"></script>Download the latest release from GitHub Releases
Track message modifications for streaming and real-time updates:
// Track streaming content as it arrives
chat.setCallbackonMessageAppend((instance, msgId, content) => {
console.log(`Streaming: ${content} added to message ${msgId}`);
});
// Monitor message edits
chat.setCallbackonMessageReplace((instance, msgId, newContent) => {
console.log(`Message ${msgId} updated`);
});
// Track deletions
chat.setCallbackonMessageDelete((instance, msgId) => {
console.log(`Message ${msgId} deleted`);
});Efficiently handle large chat histories with pagination and search:
// Paginated history retrieval
const page = chat.historyGetPage(1, 20, 'desc'); // Get newest 20 messages
console.log(page.messages);
console.log(page.pagination.hasNext); // Check if more pages exist
// Search through history
const results = chat.historySearch({
text: 'error',
userString: 'Support',
limit: 50
});
// Get history metadata
const info = chat.historyGetInfo();
console.log(`Total messages: ${info.totalMessages}`);
console.log(`Memory used: ${info.memoryUsage.estimatedSize} bytes`);QuikChat includes beautiful built-in themes and supports complete customization:
// Use built-in themes
const chat = new quikchat('#chat', handler, {
theme: 'quikchat-theme-dark' // or 'quikchat-theme-light'
});
// Switch themes dynamically
chat.changeTheme('quikchat-theme-light');Create your own themes with CSS:
.my-custom-theme {
border: 2px solid #3b82f6;
border-radius: 12px;
font-family: 'SF Pro Display', sans-serif;
}
.my-custom-theme .quikchat-message-content {
border-radius: 18px;
padding: 12px 16px;
}
/* Apply to chat */
const chat = new quikchat('#chat', handler, {
theme: 'my-custom-theme'
});async function handleMessage(chat, message) {
chat.messageAddNew(message, 'You', 'right');
const response = await fetch('https://api.openai.com/v1/chat/completions', {
method: 'POST',
headers: {
'Authorization': `Bearer ${API_KEY}`,
'Content-Type': 'application/json'
},
body: JSON.stringify({
model: 'gpt-4',
messages: formatChatHistory(chat.historyGetAllCopy(), message)
})
});
const data = await response.json();
chat.messageAddNew(data.choices[0].message.content, 'Assistant', 'left');
}// Create message for streaming
const botMsgId = chat.messageAddNew('', 'Bot', 'left');
// Append content as it arrives
streamingAPI.onChunk(chunk => {
chat.messageAppendContent(botMsgId, chunk);
});🛠 Complete LLM Integration Guide
function ChatComponent() {
const chatRef = useRef(null);
const instanceRef = useRef(null);
useEffect(() => {
instanceRef.current = new quikchat(chatRef.current, handleMessage);
}, []);
return <div ref={chatRef} style={{ height: '400px' }} />;
}<template>
<div ref="chatContainer" class="chat-container"></div>
</template>
<script>
import quikchat from 'quikchat';
export default {
mounted() {
this.chat = new quikchat(this.$refs.chatContainer, this.handleMessage);
}
}
</script>⚛️ Framework Integration Examples
| Document | Description |
|---|---|
| API Reference | Complete technical reference for all methods and options |
| Developer Guide | Practical recipes and advanced patterns |
| Examples | Working code examples and demos |
| Live Demo | Interactive examples and showcase |
- Basic Chat - Simple chat interface
- LLM Integration - OpenAI GPT integration
- Multi-Instance - Multiple chats on one page
- Visibility Controls - Message visibility features
- Theme Showcase - Light and dark themes
- React Integration - React component example
- Backend Examples - FastAPI and Node.js backends
QuikChat is built for production use:
- Lightweight: ~25KB minified + gzipped
- Fast: Sub-millisecond message rendering
- Scalable: Tested with 10,000 messages rendering in 38ms with virtual scrolling
- Memory Efficient: Only renders visible messages in viewport
📊 Virtual Scrolling Technical Details | Performance Guide
# Clone repository
git clone https://github.com/deftio/quikchat.git
cd quikchat
# Install dependencies
npm install
# Build for production
npm run build
# Run tests
npm test
# Start development server
npm run devRequirements: Node.js 14+ and npm 6+
We welcome contributions! Here's how you can help:
- 🐛 Report Issues - Found a bug? Open an issue
- 💡 Feature Requests - Have an idea? We'd love to hear it
- 🔧 Code Contributions - Submit pull requests for bug fixes or new features
- 📖 Documentation - Help improve our guides and examples
- 🌟 Share Examples - Show us what you've built with QuikChat
git clone https://github.com/deftio/quikchat.git
cd quikchat
npm install
npm run devQuikChat is licensed under the BSD-2-Clause License.
