@smartfront/vue

@smartfront/vue

Vue 3.5+ plugin and headless chat composables. Supports reactive state and Pinia through selected current-state getters.

Build your own design with useSmartChat(): a reactive state ref, typed subscribeEvents() and bound send/cancel/confirm/form/context handlers. SmartChat is only an unstyled textarea, with v-model, native attributes/classes/styles and send/event emissions. The complete interface is an explicit SmartChatPanel opt-in, used below. Custom UI and input examples.

Recommended: app.use(Smartfront, defineSmartfront({ endpoint, modules })) with modules declared in new integration files. Install Pinia first. A module factory runs within the app's injection context, so resolve useStore() or Vue inject() there instead of at import time. Getters read selected current state; cleanup runs on app unmount. Modules, Pinia factories and SSR. Component-local composables remain supported below.

import { createApp } from 'vue';
import { Smartfront } from '@smartfront/vue';
createApp(App).use(Smartfront, { endpoint: '/v1/chat', persist: 'local' }).mount('#app');

<script setup lang="ts">
import { ref } from 'vue';
import { SmartChatPanel, useSmartContext, useSmartOperation } from '@smartfront/vue';
const count = ref(0);
useSmartContext('counter', () => ({ count: count.value }));
useSmartOperation('increment', ({ amount }) => { count.value += amount; }, {
  description: 'Increase counter', params: { amount: { type: 'integer' } },
});
</script>
<template><SmartChatPanel voice /></template>

Subscriptions/registrations clean up on scope disposal. The plugin disposes owned clients on app unmount; { client } stays caller-owned. Create an app/client per SSR request. State composables return shallow refs. Standalone chats accept an endpoint. Core confirmations, voice and validation are shared with the other adapters.

Use <SmartChatPanel :showDebug="true" /> with backend diagnostics enabled (SMARTFRONT_DEBUG=true in the example backend). Click the diagnostic controls under replies or operation chips to inspect Router · Jev, LLM and Response tabs, each conversation round, message history, retries and full requests/responses. Sections expand and copy individually. suggestions overrides starter prompts; by default the chat uses registered operation examples.

Workspace build/test: npm run build -w @smartfront/vue, npm run test -w @smartfront/vue after building core/UI.