@courseecho/ai-widget-vue

Vue 3 component for AI chat widget - Progressive AI assistance for your Vue app.

Overview

A production-ready Vue 3 component with:

• Vue 3 Composition API
• Full TypeScript support
• Reactive props and events
• Zero external dependencies
• Minimize on load
• Go offline mode
• Pre-chat form
• AI suggestions
• Booking integration

Installation

npm install @courseecho/ai-widget-vue @courseecho/ai-core-sdk

Quick Start

<template>
  <AiChatWidget :config="widgetConfig" />
</template>

<script setup>
import { AiChatWidget } from '@courseEcho/ai-widget-vue';

const widgetConfig = {
  apiKey: 'your-api-key',
  context: { pageType: 'course', entityId: 'course-123' }
};
</script>

v2.1+ Features

Minimize on Load

<template>
  <AiChatWidget :config="widgetConfig" />
</template>

<script setup>
const widgetConfig = {
  apiKey: 'your-api-key',
  context: { pageType: 'course' },
  defaultMinimized: true
};
</script>

Go Offline + Booking

<script setup>
const widgetConfig = {
  apiKey: 'your-api-key',
  context: { pageType: 'course' },
  goOfflineEnabled: true,
  limitExpiredConfig: {
    offlineForm: { 
      title: 'Get in touch', 
      submitEndpoint: '/api/contact' 
    },
    booking: { 
      title: 'Schedule', 
      calendarUrl: 'https://calendly.com/...' 
    }
  }
};
</script>

Pre-Chat Form

<template>
  <AiChatWidget :config="widgetConfig" />
</template>

<script setup>
const widgetConfig = {
  apiKey: 'your-api-key',
  context: { pageType: 'course' },
  preChatFormEnabled: true
};
</script>

Usage Examples

With Vue Router

<template>
  <div>
    <h1>{{ course.title }}</h1>
    <AiChatWidget :config="widgetConfig" />
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { useRoute } from 'vue-router';
import { AiChatWidget } from '@courseecho/ai-widget-vue';

const route = useRoute();
const courseId = computed(() => route.params.courseId);

const widgetConfig = computed(() => ({
  apiKey: 'your-api-key',
  context: { pageType: 'course', entityId: courseId.value }
}));

const course = ref({ title: 'Loading...' });
</script>

With Event Handling

<template>
  <AiChatWidget 
    :config="widgetConfig"
    @on-suggestion-select="handleSuggestion"
    @on-message-send="handleMessage"
  />
</template>

<script setup>
const handleSuggestion = (suggestion) => {
  console.log('Selected suggestion:', suggestion);
};

const handleMessage = (message) => {
  console.log('Message sent:', message);
};
</script>

Authentication

API Key (Recommended):

<script setup>
const widgetConfig = { 
  apiKey: 'key', 
  context: { pageType: 'general' } 
};
</script>

JWT Token:

<script setup>
const widgetConfig = { 
  context: { pageType: 'general' },
  jwtToken: userToken.value
};
</script>

Support

• Docs: https://courseecho.com/docs
• Issues: https://github.com/COURSEECHO/courseecho-ai-widget-sdk/issues
• Email: [email protected]

License

MIT 2026 CourseEcho