AI Chat Widget for Vue

A beautiful AI chat widget for Vue 3 applications with fixed bottom-right positioning.

Installation

1. Install Dependencies

npm install

2. Development

Start the development server:

npm run dev

3. Build

Build the library for production:

npm run build

4. Preview

Preview the production build:

npm run preview

Usage

Import the Widget

<script setup>
import { AIChatWidget } from 'x-decision-ai-library-vue'
import 'x-decision-ai-library-vue/styles.css'

const apiEndpoint = import.meta.env.VITE_CHAT_API_URL
const apiKey = import.meta.env.VITE_CHAT_API_KEY
</script>

<template>
  <AIChatWidget
    :api-endpoint="apiEndpoint"
    :api-key="apiKey"
    title="AI Assistant"
    :suggestions="[
      'I want your best products',
      'What is your return policy?',
      'How do I track my order?'
    ]"
  />
</template>

Environment Setup

Create a .env file in your project root:

VITE_CHAT_API_KEY=your_api_key_here
VITE_CHAT_API_URL=http://localhost:8000

Note: For Vite projects, variables must start with VITE_ to be exposed to the client.

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | apiEndpoint | string | required | API endpoint for chat messages | | apiKey | string | - | API key for authentication | | title | string | "AI Assistant" | Chat widget title | | placeholder | string | "Type a message..." | Input placeholder text | | theme | "light" \| "dark" | "light" | Widget theme | | primaryColor | string | "#6366f1" | Primary color for styling | | suggestions | string[] | [] | Quick action prompts shown in welcome view | | className | string | - | Custom class name | | zIndex | number | 9999 | Z-index for the widget |

Features

• Multiple Sessions: Create and manage multiple chat sessions
• History View: Access recent chats via the document icon
• Welcome View: Shows greeting with customizable suggestions
• Persistence: Sessions are saved locally
• Product Cards: Supports rendering product recommendations

Available Exports

| Export | Description | | --- | --- | | AIChatWidget | Main chat widget component | | provideChatContext | Context provider function | | useChatContext | Composable to access chat context |

Types

import type {
  AIChatWidgetProps,
  Message,
  ChatConfig,
  ChatContextValue,
} from 'x-decision-ai-library-vue'

Peer Dependencies

| Package | Version | | --- | --- | | vue | ^3.4.0 |

License

ISC