@aichatbot-saas/vue

Native in-page Vue 3 chat UI component for the AIChatbot SaaS.

Unlike the drop-in chatbot.js floating bubble, this is a real Vue component that renders native DOM inline in your page and talks to the REST API directly. It is a thin, themeable binding over the headless @aichatbot-saas/core — the core owns all behavior (config loading, greeting, suggestions, send flow, conversation persistence, feedback, error handling); this package just renders its state.

• Composition API, strict TypeScript, ships compiled ESM + CJS + .d.ts.
• Written with a render function (no .vue SFC) — no template compiler required.
• Inline styles only — no global CSS, no UI dependency. Every color and radius comes from the resolved ChatTheme.
• SSR-safe (Nuxt friendly): browser globals are only touched inside lifecycle hooks, so importing the component on the server does not crash.

Install

npm install @aichatbot-saas/vue
# pulls in @aichatbot-saas/core automatically (declared dependency)
# vue >=3.2 is a peer dependency you already have in a Vue app

Usage

The component fills its container, so render it inside a sized element.

<script setup lang="ts">
import { AIChatbot } from '@aichatbot-saas/vue';
</script>

<template>
  <div style="width: 380px; height: 560px;">
    <AIChatbot api-key="pk_live_xxx" api-url="https://api.you.com" />
  </div>
</template>

Or register it globally:

import { createApp } from 'vue';
import { AIChatbot } from '@aichatbot-saas/vue';

const app = createApp(App);
app.component('AIChatbot', AIChatbot);

Only apiKey is required — bot name, greeting, suggestions, languages and theme are fetched from your backend on mount.

Props

| Prop | Attribute (kebab) | Type | Required | Description | |-------------|-------------------|-----------------------|----------|-------------| | apiKey | api-key | string | yes | Publishable API key (pk_live_...). | | apiUrl | api-url | string | no | Backend base URL. Defaults to same-origin. | | language | language | string | no | Force a language. Otherwise config.languages[0] → "en". | | theme | :theme | Partial<ChatTheme> | no | Local theme overrides (highest precedence). | | sessionId | session-id | string | no | Stable device/session id forwarded to the backend for threading. |

Theming

Theme precedence is client override → backend config → built-in default. Pass a partial ChatTheme to force any token locally even if the backend says otherwise:

<script setup lang="ts">
import { AIChatbot, type ChatTheme } from '@aichatbot-saas/vue';

const theme: Partial<ChatTheme> = {
  primaryColor: '#7c3aed',
  bubbleRadius: 18,
  fontFamily: 'Inter, system-ui, sans-serif',
};
</script>

<template>
  <div style="width: 100%; height: 600px;">
    <AIChatbot api-key="pk_live_xxx" api-url="https://api.you.com" :theme="theme" />
  </div>
</template>

Available tokens: primaryColor, secondaryColor, onPrimaryColor, backgroundColor, surfaceColor, botBubbleColor, botBubbleTextColor, botBubbleBorderColor, userBubbleColor, userBubbleTextColor, mutedTextColor, bubbleRadius (px), inputRadius (px), fontFamily.

Inline & embeddable

The component renders a flex column that fills width: 100%; height: 100% of its parent — drop it into a sidebar, a modal, a support page, or a fixed-position panel. There is no floating launcher; you control placement.

SSR / Nuxt

Safe to import and render on the server. All network and DOM work happens in onMounted / onBeforeUnmount, and styling is fully inline, so there is no hydration mismatch and no window/document access during SSR. In Nuxt you can use it directly in a page or wrap it in <ClientOnly> if you prefer to skip server render entirely.

Advanced: headless client

For custom UIs you can use the REST client directly (re-exported from the core):

import { AIChatbotClient } from '@aichatbot-saas/vue';

const client = new AIChatbotClient({ apiKey: 'pk_live_xxx', apiUrl: 'https://api.you.com' });
const config = await client.fetchConfig();
const reply = await client.sendMessage({ text: 'hi', conversationId: null, language: 'en' });

License

MIT © 2026 AIChatbot