A modular AI-powered Vue.js component suite that enhances your applications with intelligent capabilities:
 @aivue/chatbot Multi-provider AI chat widget |  @aivue/autosuggest Smart autosuggest with semantic ranking |  @aivue/smartform AI-enhanced forms with dynamic validation |  @aivue/image-caption AI-powered image captioning with OpenAI Vision |  @aivue/core Core AI functionality for Vue.js components |
# Install the core package npm install @aivue/core # Install component packages as needed npm install @aivue/chatbot npm install @aivue/autosuggest npm install @aivue/smartform npm install @aivue/image-caption npm install @aivue/analytics # Or install all packages at once npm install @aivue/core @aivue/chatbot @aivue/autosuggest @aivue/smartform @aivue/image-caption @aivue/analytics | Key Benefits:
|
- Create a
.envfile in your project root (this file will be automatically excluded from Git) - Add your API keys for the providers you want to use:
# OpenAI API Key VITE_OPENAI_API_KEY=your_openai_api_key_here # Claude API Key (optional) VITE_CLAUDE_API_KEY=your_claude_api_key_here # Gemini API Key (optional) VITE_GEMINI_API_KEY=your_gemini_api_key_here # HuggingFace API Key (optional) VITE_HUGGINGFACE_API_KEY=your_huggingface_api_key_here # DeepSeek API Key (optional) VITE_DEEPSEEK_API_KEY=your_deepseek_api_key_hereNote: If you don't have API keys, the components will still work using the fallback provider which simulates AI responses.
vueai/ ├── packages/ │ ├── core/ # @aivue/core │ │ ├── src/ │ │ │ ├── index.ts │ │ │ └── providers/ │ │ │ ├── openai.ts │ │ │ ├── claude.ts │ │ │ ├── gemini.ts │ │ │ ├── huggingface.ts │ │ │ ├── ollama.ts │ │ │ ├── deepseek.ts │ │ │ └── fallback.ts │ ├── chatbot/ # @aivue/chatbot │ ├── autosuggest/ # @aivue/autosuggest │ ├── smartform/ # @aivue/smartform │ ├── image-caption/ # @aivue/image-caption │ └── analytics/ # @aivue/analytics └── package.json # Root package.json with workspace configuration 
- ✅ Multi-provider support (OpenAI, Claude, Gemini, HuggingFace, Ollama, DeepSeek)
- ✅ Automatic fallback when API keys aren't available
- ✅ Streaming responses with Markdown support
- ✅ File upload, PDF parsing, history tracking
- ✅ "Fix with AI" feature for automatic corrections
<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> <script setup> import { AIClient } from '@aivue/core'; import { AiChatWindow } from '@aivue/chatbot'; import '@aivue/chatbot/style.css'; const aiClient = new AIClient({ provider: 'openai', apiKey: import.meta.env.VITE_OPENAI_API_KEY, model: 'gpt-4o' }); </script>
- ✅ AI-powered results with semantic sort
- ✅ Multi-provider support with automatic fallback
- ✅ Contextual suggestions based on domain
- ✅ Customizable UI and behavior
<template> <AiAutosuggest :client="aiClient" v-model="query" placeholder="Search..." :debounce="300" :context="'Vue.js components and libraries'" @select="handleSelect" /> </template> <script setup> import { ref } from 'vue'; import { AIClient } from '@aivue/core'; import { AiAutosuggest } from '@aivue/autosuggest'; const query = ref(''); const aiClient = new AIClient({ provider: 'openai', apiKey: import.meta.env.VITE_OPENAI_API_KEY, model: 'gpt-4o' }); function handleSelect(suggestion) { console.log('Selected:', suggestion); } </script>
- ✅ AI-powered validation + dynamic healing
- ✅ Multi-provider support with automatic fallback
- ✅ Intelligent form field suggestions
- ✅ "Fix with AI" feature for automatic corrections
<template> <AiSmartForm :client="aiClient" :schema="formSchema" validation="ai" @submit="handleSubmit" /> </template> <script setup> import { ref } from 'vue'; import { AIClient } from '@aivue/core'; import { AiSmartForm } from '@aivue/smartform'; const aiClient = new AIClient({ provider: 'openai', apiKey: import.meta.env.VITE_OPENAI_API_KEY }); const formSchema = ref({ fields: [ { name: 'email', label: 'Email', type: 'email', required: true }, { name: 'description', label: 'Description', type: 'textarea', required: true, minLength: 50 } ] }); function handleSubmit(data) { console.log('Form submitted:', data); } </script>
- ✅ OpenAI Vision models (GPT-4o, GPT-4o Mini, GPT-4 Turbo)
- ✅ Drag & drop image upload with preview
- ✅ URL support for remote images
- ✅ Batch processing for multiple images
- ✅ History tracking and export functionality
<template> <AiImageCaption :api-key="apiKey" :model="'gpt-4o'" @caption-generated="handleCaption" @caption-error="handleError" /> </template> <script setup> import { AiImageCaption } from '@aivue/image-caption'; import '@aivue/image-caption/dist/image-caption.css'; const apiKey = import.meta.env.VITE_OPENAI_API_KEY; function handleCaption(result) { console.log('Generated caption:', result.caption); } function handleError(error) { console.error('Caption error:', error); } </script>
- ✅ Real-time analytics and insights dashboard
- ✅ AI-powered conversation analysis
- ✅ Performance monitoring and error tracking
- ✅ Beautiful charts and visualizations
- ✅ Privacy-first with local storage by default
<template> <div> <!-- Analytics Dashboard --> <AiAnalyticsDashboard :ai-client="aiClient" :show-conversation-analytics="true" /> <!-- Track interactions automatically --> <button v-analytics="{ component: 'my-app', action: 'click' }"> Click me </button> </div> </template> <script setup> import { AiAnalyticsDashboard, useAnalytics, vAnalytics } from '@aivue/analytics'; import { AIClient } from '@aivue/core'; const aiClient = new AIClient({ provider: 'openai', apiKey: import.meta.env.VITE_OPENAI_API_KEY }); // Set up analytics const analytics = useAnalytics({ config: { enabled: true, trackInteractions: true }, aiClient }); </script>Our core package provides a unified interface for working with multiple AI providers, complete with an automatic fallback mechanism that ensures your components work even without API keys.
- ✅ Multi-provider support (OpenAI, Claude, Gemini, HuggingFace, Ollama, DeepSeek)
- ✅ Bearer token authentication for remote Ollama instances
- ✅ Automatic fallback when API keys aren't available
- ✅ Unified API for chat, embeddings, and validation
- ✅ TypeScript support with comprehensive type definitions
import { AIClient } from '@aivue/core'; // Create a client with your preferred provider const client = new AIClient({ provider: 'openai', // or 'claude', 'gemini', 'huggingface', 'ollama', 'deepseek' apiKey: import.meta.env.VITE_OPENAI_API_KEY, // Optional - falls back to simulation if missing model: 'gpt-4o' // Optional - uses provider's default if missing }); // Chat functionality const response = await client.chat([ { role: 'user', content: 'Hello, can you help me with Vue.js?' } ]); // Embeddings for semantic search const embeddings = await client.embeddings('How do I create a component?'); // Form field validation const validation = await client.validateFormField( 'email', 'user@example', ['email', 'required'] ); // Complete text (for autosuggest) const completion = await client.complete('How do I install Vue', { maxTokens: 100 });All VueAI components include an intelligent fallback system when API keys aren't available:
<ul class="feature-list"> <li>🔍 Automatically detects missing API keys</li> <li>🤖 Provides simulated responses that match the expected shape</li> <li>💡 Generates semantically reasonable suggestions</li> <li>🚀 Delivers smooth user experience during development</li> <li>🔄 Works with all supported providers seamlessly</li> </ul> Testing Setup
npm install vitest @vue/test-utils --save-dev// chatbot/tests/AiChatWindow.spec.ts test('sends messages', async () => { const wrapper = mount(AiChatWindow); await wrapper.find('input').setValue('Hi'); await wrapper.find('input').trigger('keyup.enter'); expect(wrapper.emitted()).toHaveProperty('send'); });Build & Publish
# Build all packages npm run build:packages # Publish packages npm publish --access public --workspace @aivue/core npm publish --access public --workspace @aivue/chatbot npm publish --access public --workspace @aivue/autosuggest npm publish --access public --workspace @aivue/smartform npm publish --access public --workspace @aivue/image-caption npm publish --access public --workspace @aivue/analytics # Or use the publish script npm run publish:packagesMIT © 2025 Bharatkumar Subramanian