Vue AI Extension

A Vue.js extension for AI chat applications with enhanced features like tool authorization and cloud synchronization.

Features

• Enhanced Chat: Extends @ai-sdk/vue's useChat with additional functionality
• Tool Authorization: Manages tool calls requiring user approval
• Cloud Sync: Synchronizes conversations, tools and model configurations with a backend service
• Type Safety: Fully typed with TypeScript

Installation

npm install vue-ai-extension
# or
yarn add vue-ai-extension
# or
pnpm add vue-ai-extension

Peer Dependencies

This package requires the following peer dependencies:

{
  "@ai-sdk/ui-utils": "^1.2.1",
  "@ai-sdk/vue": "^1.2.0",
  "vue": "^3.5.13",
  "typescript": "^5"
}

Usage

Enhanced Chat

<script setup lang="ts">
import { useEnhancedChat } from 'vue-ai-extension'

const {
  messages,
  input,
  handleSubmit,
  pendingAuthorizations,
  hasPendingAuthorizations,
  approveTool,
  rejectTool
} = useEnhancedChat({
  api: '/api/chat',
  autoExecuteServerTools: false, // require user approval for server tools
  authorizationTimeout: 30000 // 30 seconds
})
</script>

Tool Authorization

<script setup lang="ts">
import { useToolAuthorization } from 'vue-ai-extension'

const {
  authorizationModalOpen,
  currentAuthorization,
  showAuthorizationModal,
  closeAuthorizationModal
} = useToolAuthorization()
</script>

<template>
  <div v-if="authorizationModalOpen && currentAuthorization">
    <h3>Authorize Tool: {{ currentAuthorization.toolName }}</h3>
    <pre>{{ currentAuthorization.args }}</pre>
    <button @click="approveTool(currentAuthorization.toolCallId, {})">Approve</button>
    <button @click="rejectTool(currentAuthorization.toolCallId)">Reject</button>
  </div>
</template>

Cloud Sync

<script setup lang="ts">
import { useCloudSync } from 'vue-ai-extension'

const { state, syncData } = useCloudSync({
  syncConversations: true,
  syncTools: true,
  syncModelConfigs: true,
  syncInterval: 60000 // 1 minute
})
</script>

API Reference

useEnhancedChat(options: EnhancedChatOptions)

Extends the standard useChat with tool authorization features.

Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | autoExecuteServerTools | boolean | true | Whether to automatically execute server-side tools without user authorization | | authorizationTimeout | number | 30000 | Timeout in milliseconds for pending tool authorizations | | cloudSync | object | - | Cloud sync configuration |

Return Value

Extends UseChatHelpers with:

• pendingAuthorizations: Ref<ToolAuthorizationState[]> - List of pending tool authorizations
• hasPendingAuthorizations: ComputedRef<boolean> - Whether there are pending authorizations
• approveTool(toolCallId: string, result: any) - Approve a tool call
• rejectTool(toolCallId: string) - Reject a tool call

useToolAuthorization()

Manages tool authorization UI state.

Return Value

• authorizationModalOpen: Ref<boolean> - Whether the authorization modal is open
• currentAuthorization: Ref<ToolAuthorizationState | null> - Current authorization being processed
• showAuthorizationModal(authState: ToolAuthorizationState) - Show the authorization modal
• closeAuthorizationModal() - Close the authorization modal

useCloudSync(options)

Manages synchronization of chat data with a backend.

Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | syncConversations | boolean | true | Whether to sync conversations | | syncTools | boolean | true | Whether to sync tools | | syncModelConfigs | boolean | true | Whether to sync model configurations | | syncInterval | number | 60000 | Sync interval in milliseconds |

Return Value

• state: Ref<CloudSyncState> - Current sync state containing conversations, tools and model configs
• syncData() - Manually trigger a sync

Types

All types are exported from the package:

import type {
  ToolAuthorizationState,
  EnhancedChatOptions,
  CloudSyncState,
  ToolCall,
  EnhancedChatReturn,
  User,
  Session,
  ModelConfig,
  Conversation,
  Message,
  Tool,
  ConversationTool
} from 'vue-ai-extension'