@liyalabs/liya-ai-chat-vue

Vue.js Chat Widget & Full App Component for Liya AI Assistants.

Live Demo →  |  Website →

Screenshots

Widget Mode (Floating Chat)

| Desktop | Mobile | |---------|--------| | | |

App Mode (Full Chat Interface)

| Desktop | Mobile | |---------|--------| | | |

Features

| Session History | File Upload | Voice Input | |----------------|-------------|-------------| | | | |

Features

• 🎨 Two Modes: Widget (floating chatbox) & App (full chat interface)
• 💬 Real-time Chat: Send messages and receive AI responses
• 📁 File Upload: Attach files to your messages
• 🎤 Voice Input: Speech-to-text support
• 📜 Session History: Browse and continue previous conversations
• 🎯 Customizable: Theme, colors, position, and more
• 📱 Responsive: Mobile-friendly design
• 🔒 TypeScript: Full type support

Installation

npm install @liyalabs/liya-ai-chat-vue
# or
yarn add @liyalabs/liya-ai-chat-vue
# or
pnpm add @liyalabs/liya-ai-chat-vue

Quick Start

Widget Mode (Website Helper)

Perfect for embedding a chat widget on your website.

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import { LiyaChatPlugin } from '@liyalabs/liya-ai-chat-vue'
import '@liyalabs/liya-ai-chat-vue/style.css'

const app = createApp(App)

app.use(LiyaChatPlugin, {
  mode: 'widget',
  apiKey: 'liwhai_your_api_key_here',
  baseUrl: 'https://app-X-ai.liyalabs.com', // Your assigned backend URL (see GAR section)
  assistantId: 'your-assistant-uuid',
  assistantName: 'Destek Asistanı',
  theme: {
    primaryColor: '#6366f1',
    position: 'bottom-right'
  }
})

app.mount('#app')

<!-- App.vue -->
<template>
  <div>
    <h1>My Website</h1>
    <!-- Widget will appear automatically -->
    <LiyaChatWidget 
      welcome-message="Merhaba! Size nasıl yardımcı olabilirim?"
      :show-voice="true"
      :show-file-upload="true"
    />
  </div>
</template>

App Mode (Full Chat Application)

For building a complete chat interface with session management.

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import { LiyaChatPlugin } from '@liyalabs/liya-ai-chat-vue'
import '@liyalabs/liya-ai-chat-vue/style.css'

const app = createApp(App)

app.use(LiyaChatPlugin, {
  mode: 'app',
  apiKey: 'liwhai_your_api_key_here',
  baseUrl: 'https://app-X-ai.liyalabs.com', // Your assigned backend URL (see GAR section)
  assistantId: 'your-assistant-uuid',
  assistantName: 'AI Assistant',
  features: {
    voice: true,
    fileUpload: true,
    sessionHistory: true
  }
})

app.mount('#app')

<!-- App.vue -->
<template>
  <div class="chat-container">
    <LiyaChatApp 
      :show-sidebar="true"
      sidebar-width="320px"
      welcome-message="Merhaba! Yeni bir sohbet başlatın."
      :show-voice="true"
      :show-file-upload="true"
      @session-created="onSessionCreated"
      @message-sent="onMessageSent"
    />
  </div>
</template>

<script setup>
function onSessionCreated(session) {
  console.log('New session:', session)
}

function onMessageSent(message) {
  console.log('Message sent:', message)
}
</script>

<style>
.chat-container {
  height: 100vh;
  width: 100%;
}
</style>

Configuration

Plugin Options

| Option | Type | Required | Description | |--------|------|----------|-------------| | mode | 'widget' \| 'app' | No | Chat mode (default: both components registered) | | apiKey | string | Yes | Your Liya API key | | baseUrl | string | Yes | API base URL | | assistantId | string | Yes | Assistant UUID | | assistantName | string | No | Display name for the assistant | | theme | ThemeConfig | No | Theme customization | | features | FeaturesConfig | No | Feature toggles |

Theme Configuration

interface ThemeConfig {
  primaryColor?: string      // Main brand color (default: #6366f1)
  secondaryColor?: string    // Secondary color
  backgroundColor?: string   // Background color
  textColor?: string         // Text color
  fontFamily?: string        // Font family
  borderRadius?: string      // Border radius
  position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'
  zIndex?: number            // Z-index for widget
}

Features Configuration

interface FeaturesConfig {
  voice?: boolean           // Enable voice input (default: true)
  fileUpload?: boolean      // Enable file upload (default: true)
  sessionHistory?: boolean  // Enable session history (default: true)
  markdown?: boolean        // Render markdown in messages
  typingIndicator?: boolean // Show typing indicator
}

Components

LiyaChatWidget

Floating chat widget for websites.

<LiyaChatWidget
  position="bottom-right"
  :theme="{ primaryColor: '#6366f1' }"
  welcome-message="Merhaba!"
  placeholder="Mesajınızı yazın..."
  :show-branding="true"
  :show-voice="true"
  :show-file-upload="true"
  @opened="onWidgetOpened"
  @closed="onWidgetClosed"
  @message-sent="onMessageSent"
  @message-received="onMessageReceived"
/>

LiyaChatApp

Full chat application with sidebar.

<LiyaChatApp
  :theme="{ primaryColor: '#6366f1' }"
  :show-sidebar="true"
  sidebar-width="300px"
  welcome-message="Yeni sohbet başlatın"
  placeholder="Mesajınızı yazın..."
  :show-voice="true"
  :show-file-upload="true"
  @session-created="onSessionCreated"
  @session-selected="onSessionSelected"
  @session-deleted="onSessionDeleted"
  @message-sent="onMessageSent"
  @message-received="onMessageReceived"
/>

Composables

Use composables for custom implementations:

import { useChat, useSessions, useVoice, useFileUpload } from '@liyalabs/liya-ai-chat-vue'

// Chat functionality
const { 
  messages, 
  isLoading, 
  sendMessage, 
  loadHistory, 
  clearMessages 
} = useChat()

// Session management
const { 
  sessions, 
  currentSession, 
  loadSessions, 
  createSession, 
  deleteSession 
} = useSessions()

// Voice input
const { 
  isRecording, 
  transcript, 
  startRecording, 
  stopRecording 
} = useVoice()

// File upload
const { 
  pendingFiles, 
  uploadedFiles, 
  addFiles, 
  uploadFiles 
} = useFileUpload()

API Functions

Direct API access:

import { 
  sendMessage, 
  getSessions, 
  createSession, 
  getSessionHistory,
  uploadFile,
  getAssistants 
} from '@liyalabs/liya-ai-chat-vue'

// Send a message
const response = await sendMessage('Hello!', sessionId)

// Get sessions
const { sessions } = await getSessions()

// Create new session
const session = await createSession('New Chat')

// Get message history
const { messages } = await getSessionHistory(sessionId)

// Upload file
const file = await uploadFile(sessionId, fileObject)

Styling

CSS Variables

Override CSS variables for custom styling:

:root {
  --liya-primary-color: #6366f1;
  --liya-primary-hover: #4f46e5;
  --liya-bg-color: #ffffff;
  --liya-bg-secondary: #f3f4f6;
  --liya-text-color: #374151;
  --liya-text-muted: #9ca3af;
  --liya-border-color: #e5e7eb;
  --liya-border-radius: 12px;
  --liya-font-family: system-ui, sans-serif;
}

Dark Mode

The package supports dark mode via CSS media query:

@media (prefers-color-scheme: dark) {
  :root {
    --liya-bg-color: #1f2937;
    --liya-bg-secondary: #374151;
    --liya-text-color: #f9fafb;
    --liya-border-color: #4b5563;
  }
}

TypeScript

Full TypeScript support with exported types:

import type {
  LiyaChatConfig,
  ThemeConfig,
  Session,
  Message,
  Assistant,
  FileAttachment
} from '@liyalabs/liya-ai-chat-vue'

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

GAR (Global Application Router)

Liya AI uses a distributed backend architecture. Each user is assigned to a specific backend instance based on their account.

Finding Your Backend URL

Your backend URL is displayed in your Liya AI dashboard under Settings > API Configuration. It follows this pattern:

https://app-{X}-ai.liyalabs.com

Where {X} is your assigned instance number (1, 2, 3, etc.).

Examples

| Instance | Backend URL | |----------|-------------| | 1 | https://app-1-ai.liyalabs.com | | 2 | https://app-2-ai.liyalabs.com | | 3 | https://app-3-ai.liyalabs.com |

Dynamic Configuration

For production apps, we recommend fetching your backend URL dynamically:

// Fetch config from your backend or environment
const config = await fetch('/api/config').then(r => r.json())

app.use(LiyaChatPlugin, {
  apiKey: config.apiKey,
  baseUrl: config.baseUrl, // Dynamic from GAR
  assistantId: config.assistantId,
  // ...
})

Live Demo

See the widget in action:

• Full Platform: ai.liyalabs.com — Create an assistant and use the chat widget & app mode
• Website: liyalabs.com — See the chat widget embedded on a live website

License

MIT © Liya Labs

Support

• 🌐 Website: liyalabs.com
• 📖 Documentation: ai.liyalabs.com/developer
• 🐛 Issues: GitHub Issues
• 📧 Email: [email protected]