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