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
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 quikchat
import 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
Group and control message visibility with powerful tagging:
// Add messages with tags
chat.messageAddNew('System initialized', 'System', 'center', 'system', true, true, ['system', 'startup']);
// Control visibility by tag
chat.setTagVisibility('system', false); // Hide all system messages
chat.setTagVisibility('system', true); // Show all system messages
// Get active tags
const tags = chat.getActiveTags(); // ['system', 'startup', 'user']
Multiple chat instances with different styling and behavior:
const salesChat = new quikchat('#sales', handler, {
theme: 'quikchat-theme-light',
instanceClass: 'sales-chat'
});
const supportChat = new quikchat('#support', handler, {
theme: 'quikchat-theme-dark',
instanceClass: 'support-chat'
});
Fine-grained control over message display:
// Hide individual messages
chat.messageSetVisibility(messageId, false);
// Check visibility status
const isVisible = chat.messageGetVisibility(messageId);
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 |
QuikChat is built for production use with excellent performance characteristics:
📊 Performance Optimization 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 dev
Requirements: Node.js 14+ and npm 6+
We welcome contributions! Here's how you can help:
git clone https://github.com/deftio/quikchat.git
cd quikchat
npm install
npm run dev
QuikChat is licensed under the BSD-2-Clause License.