vue-ai-chatbubble

🤖 A beautiful floating AI chatbot widget for Vue 3 — appears as a bouncing ball in the bottom-right corner that opens into a sleek chat interface.

✨ Features

• 🎈 Bouncing Bubble — Eye-catching hopping animation draws user attention
• 🎨 Dark Modern UI — Beautiful glassmorphism design with smooth animations
• 💬 Real-time Chat — Message bubbles with typing indicators
• 🔌 AI-Ready — Connect to any AI API (OpenAI, Claude, custom backends)
• 📱 Responsive — Works perfectly on mobile and desktop
• ⚙️ Customizable — Colors, text, avatar, and behavior options

📦 Installation

npm install vue-ai-chatbubble

🚀 Quick Start

Option 1: Global Registration (Plugin)

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import VueAIChatBubble from 'vue-ai-chatbubble'
import 'vue-ai-chatbubble/dist/style.css'

const app = createApp(App)
app.use(VueAIChatBubble)
app.mount('#app')

Then use anywhere in your app:

<template>
  <ChatBubble 
    bot-name="AI Helper"
    welcome-message="Hi! How can I assist you today?"
    api-endpoint="https://your-api.com/chat"
  />
</template>

Option 2: Local Import

<template>
  <ChatBubble 
    bot-name="Assistant"
    primary-color="#8b5cf6"
    @message-sent="handleSent"
    @message-received="handleReceived"
  />
</template>

<script setup>
import { ChatBubble } from 'vue-ai-chatbubble'
import 'vue-ai-chatbubble/dist/style.css'

const handleSent = (message) => {
  console.log('User sent:', message.text)
}

const handleReceived = (message) => {
  console.log('Bot replied:', message.text)
}
</script>

🔧 Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | botName | String | 'AI Assistant' | Name displayed in the chat header | | avatarUrl | String | '' | URL for the bot's avatar image | | statusText | String | 'Online' | Status text shown below bot name | | inputPlaceholder | String | 'Type your message...' | Placeholder for the input field | | welcomeMessage | String | 'Hello! 👋 How can I help you today?' | First message shown when chat opens | | primaryColor | String | '#6366f1' | Primary theme color (hex) | | position | String | 'right' | Position: 'left' or 'right' | | apiEndpoint | String | '' | URL to your chat API | | apiHeaders | Object | {} | Additional headers for API requests | | audioVolume | Number | 0.8 | Volume for audio responses (0.0 to 1.0) |

📡 Events

| Event | Payload | Description | |-------|---------|-------------| | @open | — | Emitted when chat window opens | | @close | — | Emitted when chat window closes | | @message-sent | { text, timestamp } | Emitted when user sends a message | | @message-received | { text, timestamp } | Emitted when bot responds |

🤖 Connecting to AI APIs

Example: OpenAI Integration

<template>
  <ChatBubble 
    bot-name="GPT Assistant"
    api-endpoint="/api/chat"
    :api-headers="{ 'Authorization': 'Bearer your-key' }"
  />
</template>

Your backend endpoint should accept POST requests with:

{
  "message": "user's message here"
}

And respond with:

{
  "response": "AI's reply here"
}

Example: Custom Backend (Express.js)

// server.js
app.post('/api/chat', async (req, res) => {
  const { message } = req.body
  
  // Call your AI service
  const aiResponse = await callOpenAI(message)
  
  res.json({ response: aiResponse })
})

🎨 Customization Examples

Purple Theme

<ChatBubble 
  primary-color="#8b5cf6"
  bot-name="Violet"
/>

Custom Avatar

<ChatBubble 
  avatar-url="https://your-domain.com/bot-avatar.png"
  bot-name="Custom Bot"
/>

Full Configuration

<ChatBubble 
  bot-name="Support Bot"
  avatar-url="/images/support-avatar.png"
  status-text="Always here to help"
  input-placeholder="Ask me anything..."
  welcome-message="Welcome! I'm here to answer your questions."
  primary-color="#10b981"
  api-endpoint="https://api.yoursite.com/chat"
  :api-headers="{ 'X-API-Key': 'your-key' }"
  @open="trackChatOpened"
  @message-sent="logMessage"
/>

📱 Mobile Support

The widget automatically adapts to mobile screens with:

• Smaller bubble button
• Full-width chat window
• Touch-optimized interface

🛠️ Development

# Install dependencies
npm install

# Start dev server
npm run dev

# Build for production
npm run build

📄 License

MIT © 2024