Bharatkumar Subramanian

Posted on Jun 22

Introducing AIVue: Enterprise-Grade AI Components for Vue.js

#vue #nuxt #ai

AIVue is a comprehensive suite of AI-powered Vue.js components that makes integrating advanced AI capabilities into your applications simple and efficient. With support for multiple AI providers, database integration, and enterprise-ready features, AIVue helps developers build intelligent interfaces without the complexity.

The Problem

Integrating AI into Vue applications has traditionally been challenging:

Inconsistent APIs across different AI providers
Complex state management for chat interfaces
Lack of enterprise features like storage and analytics
Poor developer experience with minimal TypeScript support
Limited fallback options when API keys aren't available

Introducing AIVue

AIVue solves these problems with a suite of ready-to-use components:

@aivue/chatbot (v2.0.0)

Our flagship component offers enterprise-grade conversational AI:

🗄️ Database Integration: Support for localStorage, Supabase, Firebase, MongoDB, PostgreSQL
🎤 Voice Integration: Speech-to-text input and text-to-speech responses
🤖 Multi-Model AI: Intelligent switching between AI providers
🧵 Conversation Threading: Organize chats by topics
📎 Advanced File Upload: PDFs, documents, images, audio
🔒 Proxy Support & Internationalization

@aivue/image-caption

AI-powered image captioning with:

OpenAI Vision model integration
Drag & drop upload with preview
URL support for remote images
Batch processing capabilities

@aivue/analytics

Real-time insights into your AI usage:

Usage metrics and conversation analytics
Performance tracking across AI models
Customizable dashboards and reporting

@aivue/core

The foundation that powers all components:

Multi-provider support (OpenAI, Claude, Gemini, HuggingFace, Ollama, DeepSeek)
Automatic fallback when API keys aren't available
Unified API for chat, embeddings, and validation

Getting Started

# Install the components you need
npm install @aivue/core @aivue/chatbot

# Import and use in your Vue app
import { AIClient } from '@aivue/core';
import { AiChatWindow } from '@aivue/chatbot';
import '@aivue/chatbot/style.css';

// Create an AI client
const aiClient = new AIClient({
  provider: 'openai',
  apiKey: import.meta.env.VITE_OPENAI_API_KEY,
  model: 'gpt-4o'
});

Then in your Vue template:

<template>
  <AiChatWindow
    :client="aiClient"
    title="AI Assistant"
    placeholder="Ask me anything..."
    :show-avatars="true"
    theme="light"
    :streaming="true"
    :markdown="true"
    system-prompt="You are a helpful AI assistant."
  />
</template>

Vue Compatibility

AIVue works with both Vue 2 and Vue 3, automatically detecting which version you're using and providing the appropriate compatibility layer.

Try It Out

Demo: https://aivue.netlify.app/
GitHub: https://github.com/reachbrt/vueai
NPM: @aivue packages

What's Next?

We're continuously improving AIVue with new features and components. Coming soon:

Document analysis and summarization
Semantic search integration
Advanced RAG capabilities
Custom model fine-tuning support

Join us in building the future of AI-powered Vue applications!

DEV Community