A configurable AI chat interface component library for Vue
npm install @termix-it/vue-toolbeforeCallApiFunc hook for intercepting and modifying API requests
bash
npm install @termix-it/vue-tool
or
yarn add @termix-it/vue-tool
or
pnpm add @termix-it/vue-tool
`
After installation, you'll have access to:
- ✅ ChatInterface component with AI chat capabilities
- ✅ ChatWidget component for floating chat button
- ✅ PaymentApprovalModal component for AP2 payments
- ✅ Built-in styles (import separately)
- ✅ TypeScript support with full type definitions
- ✅ Automatic knowledge base integration
- ✅ Function calling (REST APIs & smart contracts)
- ✅ Real-time streaming support
- ✅ AP2 Payment composable
Peer Dependencies
This library requires the following peer dependencies to be installed in your project:
`bash
npm install vue ethers
or
yarn add vue ethers
or
pnpm add vue ethers
`
Required peer dependencies:
`json
{
"vue": "^3.3.0",
"ethers": "^5.7.0 || ^6.15.0"
}
`
$3
This library supports both ethers v5 and ethers v6 through an internal compatibility layer. You can use either version in your project:
- ethers v5: npm install ethers@^5.7.0
- ethers v6: npm install ethers@^6.15.0
The library will automatically detect which version you have installed and adapt accordingly. All Web3-related functionality (smart contract calls, wallet connections, etc.) works seamlessly with both versions.
Quick Start
$3
The absolute minimum code needed to get started:
`vue
project-id="your-project-id"
ai-config-id="your-ai-config-id"
/>
`
$3
`vue
project-id="your-project-id"
ai-config-id="your-ai-config-id"
authorization="Bearer your-jwt-token"
:enable-streaming-mode="true"
:show-header="false"
placeholder="Type your message..."
@message-sent="handleMessageSent"
@response-received="handleResponseReceived"
@error="handleError"
/>
`
Note:
- You need to import styles separately: import '@termix-it/vue-tool/style.css'
- All styles are scoped with .termix- prefix to prevent conflicts
- The API base URL is built into the SDK and defaults to https://dashboard.termix.ai
Chat Widget Component
The ChatWidget component provides a floating chat button with a popup dialog, perfect for customer service or help functionality. The widget includes its own header, so you typically don't need to enable showHeader on the ChatInterface inside it.
$3
`vue
Your application content
title="AI Assistant"
:default-open="false"
@open-change="handleWidgetOpenChange"
>
project-id="your-project-id"
ai-config-id="your-ai-config-id"
authorization="your-token"
:enable-streaming-mode="true"
:show-header="false"
/>
`
$3
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| buttonIcon | string | undefined | Custom button icon URL |
| title | string | "AI Assistant" | Dialog header title |
| class | string | "" | CSS classes for the widget container |
| style | Record | undefined | Inline styles for the widget container |
| buttonClassName | string | "" | CSS classes for the chat button |
| buttonStyle | Record | undefined | Inline styles for the chat button |
| dialogClassName | string | "" | CSS classes for the dialog |
| dialogStyle | Record | undefined | Inline styles for the dialog |
| defaultOpen | boolean | false | Whether dialog is open by default |
$3
| Event | Payload | Description |
|-------|---------|-------------|
| openChange | boolean | Emitted when dialog open state changes |
Configuration
$3
The ChatInterface component includes an optional header that displays the AI model name and personality. Control it with the showHeader prop:
`vue
:show-header="true"
personality-name="AI Assistant"
:show-usage-info="true"
...
/>
`
The header features:
- Blue gradient background with white text
- Model and personality name display
- Optional usage cost display (when showUsageInfo is true)
- Automatically hidden by default for cleaner integration
$3
| Prop | Type | Description |
|------|------|-------------|
| projectId | string | Your Termix project identifier |
| aiConfigId | string | AI configuration identifier |
$3
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| authorization | string | undefined | Authorization header value (e.g., 'Bearer token') |
| apiHeaders | Record | {} | Additional headers for API requests |
| restExecuteHeader | Record | undefined | Custom headers object for REST execution (deprecated) |
| restExecuteHeaders | DomainHeaderConfig[] | undefined | Domain-specific headers for REST execute requests |
| proxyMode | boolean | false | Enable proxy mode to route third-party REST API requests through backend proxy |
$3
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| placeholder | string | "Type your message..." | Input placeholder text |
| personalityName | string | undefined | Optional override for personality name (overrides API config value) |
$3
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| enableStreamingMode | boolean | false | Enable real-time streaming responses via SSE |
| showHeader | boolean | false | Show/hide the chat header with title and model info |
| showUsageInfo | boolean | false | Show token usage and cost information |
| showTimestamp | boolean | false | Show message timestamps |
| maxKnowledgeResults | number | 3 | Maximum knowledge base results to show |
Note: The following features are now always enabled and cannot be disabled:
- Knowledge base integration
- Function calls (REST API and smart contracts)
- ReAct pattern (reasoning and acting)
- Knowledge references display
$3
| Prop | Type | Description |
|------|------|-------------|
| className | string | Additional CSS classes for the main container |
| style | CSSProperties | Inline styles for the main container |
| messagesClassName | string | CSS classes for the messages area |
| messagesStyle | CSSProperties | Inline styles for the messages area |
| inputClassName | string | CSS classes for the input field |
| inputStyle | CSSProperties | Inline styles for the input field |
$3
| Event | Payload | Description |
|-------|---------|-------------|
| messageSent | Message | Emitted when user sends a message |
| responseReceived | Message | Emitted when AI responds |
| functionExecuted | FunctionCall, ExecutionResult | Emitted when a function is executed |
| error | any | Emitted when an error occurs |
| messagesChange | Message[] | Emitted when messages array changes (for controlled mode) |
$3
| Prop | Type | Description |
|------|------|-------------|
| beforeCallApiFunc | (request: ApiRequest) => Promise | Optional async hook called before API executor makes a request. Allows modification of the request object. |
Controlled Messages Mode
You can use v-model:messages to control the messages state externally:
`vue
project-id="your-project-id"
ai-config-id="your-ai-config-id"
v-model:messages="messages"
/>
`
Streaming Mode
The ChatInterface supports real-time streaming responses using Server-Sent Events (SSE). When enabled, messages appear character by character as they are received from the server.
$3
`vue
project-id="your-project-id"
ai-config-id="your-ai-config-id"
authorization="your-token"
:enable-streaming-mode="true"
/>
`
$3
| Feature | Regular Mode | Streaming Mode |
|---------|-------------|----------------|
| Endpoint | /chat | /chat/stream |
| Response | Complete message | Character-by-character |
| Usage Info | Available | Limited (cost not tracked) |
| Visual Feedback | Loading spinner | Real-time typing |
| Network | Single request | SSE connection |
Advanced Usage
$3
`vue
project-id="your-project-id"
ai-config-id="your-ai-config-id"
authorization="your-token"
:rest-execute-header="customHeaders"
/>
`
$3
For more granular control, use restExecuteHeaders to specify different headers for different domains:
`vue
project-id="your-project-id"
ai-config-id="your-ai-config-id"
:rest-execute-headers="domainHeaders"
/>
`
$3
The beforeCallApiFunc hook allows you to intercept and modify API requests before they are sent:
`vue
project-id="your-project-id"
ai-config-id="your-ai-config-id"
:before-call-api-func="handleBeforeApiCall"
/>
`
$3
`vue
project-id="your-project-id"
ai-config-id="your-ai-config-id"
@function-executed="handleFunctionExecuted"
/>
`
AP2 Payment Integration
The library includes built-in support for AP2 payments with the useAP2Payment composable and PaymentApprovalModal component.
$3
`vue
v-if="isPaymentModalOpen && pendingPayment"
:mandate="pendingPayment"
@approve="approvePayment"
@reject="rejectPayment"
@close="clearPayment"
/>
`
TypeScript Support
Full TypeScript support with exported types:
`typescript
import type {
Message,
ToolCall,
KnowledgeContext,
FunctionCall,
ExecutionResult,
ChatInterfaceProps,
APIConfig,
ApiRequest,
BeforeCallApiFunc,
HmacAlgorithm,
WalletState,
UseAP2PaymentReturn,
UseAP2PaymentOptions,
PaymentMandate
} from '@termix-it/vue-tool';
`
$3
`typescript
interface Message {
id: string;
role: 'user' | 'assistant' | 'system';
content: string;
timestamp: Date;
usage?: {
promptTokens?: number;
completionTokens?: number;
totalTokens?: number;
cost: number;
};
knowledgeContext?: KnowledgeContext[];
toolCalls?: ToolCall[];
}
interface FunctionCall {
name: string;
parameters: Record;
metadata?: {
type?: 'api' | 'contract' | 'fiat' | 'ap2' | 'unknown';
description?: string;
method?: string;
path?: string;
baseUrl?: string;
contractName?: string;
contractAddress?: string;
chainName?: string;
};
}
interface ExecutionResult {
success: boolean;
type: 'api' | 'contract' | 'fiat' | 'ap2' | 'payment' | 'wallet' | 'error';
data?: any;
error?: string;
metadata?: Record;
}
`
Exported Components and Utilities
`typescript
// Main components
export { ChatInterface } from './components/ChatInterface.vue';
export { ChatWidget } from './components/ChatWidget.vue';
export { PaymentApprovalModal } from './components/PaymentApprovalModal.vue';
// Composables
export { useAP2Payment } from './composables/useAP2Payment';
// Utilities
export { hmacSign, hmacVerify, hmacSignBase64 } from './lib/utils';
`
HMAC Utilities
The SDK provides built-in HMAC utilities for secure API request signing:
`typescript
import { hmacSign, hmacVerify, hmacSignBase64 } from '@termix-it/vue-tool';
// Generate hex signature
const signature = await hmacSign('your-secret-key', 'message to sign');
// Returns: "a1b2c3d4e5..." (hex string)
// Generate base64 signature
const base64Sig = await hmacSignBase64('your-secret-key', 'message to sign');
// Returns: "oWLDMtRT..." (base64 string)
// Verify signature
const isValid = await hmacVerify('your-secret-key', 'message', 'a1b2c3...');
// Returns: true or false
// With custom algorithm (SHA-256, SHA-384, SHA-512)
const sha512Sig = await hmacSign('secret', 'message', 'SHA-512');
`
Styling
$3
You must import styles separately:
`typescript
import '@termix-it/vue-tool/style.css';
`
$3
Both ChatInterface and ChatWidget support inline styles:
`vue
project-id="your-project-id"
ai-config-id="your-ai-config-id"
:style="{
height: '600px',
borderRadius: '12px',
boxShadow: '0 4px 6px rgba(0,0,0,0.1)'
}"
:messages-style="{ backgroundColor: '#f9f9f9' }"
:input-style="{ fontSize: '16px', padding: '12px 16px' }"
/>
`
Development
$3
A test application with interactive control panel is included for development and testing:
`bash
From the vue-tool directory
npm run example
or
pnpm example
`
This will start a Vite dev server with hot reload.
Features:
- Control Panel - Real-time property adjustment for all component props
- Live Preview - Test both ChatInterface and ChatWidget components
- Hot Reload - Changes to source code are reflected immediately
- No Code Editing - Configure everything through the UI
$3
`bash
Build for production
npm run build
Build for development (with dev API URL)
npm run build:dev
Watch mode - rebuild on changes
npm run dev
npm run dev:local
`
$3
`bash
npm run type-check
`
License
MIT
Support
For issues and questions, please use the GitHub issue tracker.
Publishing
`bash
Publish the package
npm publish --access public
Update version
npm version patch # 1.0.0 -> 1.0.1
npm version minor # 1.0.0 -> 1.1.0
npm version major # 1.0.0 -> 2.0.0
``