@chativa/vue

Chativa

Chativa is an open-source, framework-agnostic chat widget built on Web Components. Drop one <script> tag into any page — React, Vue, Angular, plain HTML — and you have a fully functional, themeable chat interface. Connect to any backend via pluggable connectors, render rich message types, stream Generative UI inline, and extend the pipeline with middleware.

Docs: https://chativa.aimtune.dev · Live demo: https://chativa.aimtune.dev/sandbox/

Quick start

<script src="https://cdn.jsdelivr.net/npm/@chativa/ui/dist/chativa.global.js"></script>

<chat-bot-button></chat-bot-button>
<chat-iva></chat-iva>

That's it — the default dummy connector echoes whatever you type. Wire to your backend:

import { ConnectorRegistry, chatStore } from "@chativa/core";
import { DirectLineConnector } from "@chativa/connector-directline";

ConnectorRegistry.register(new DirectLineConnector({ token: "YOUR_TOKEN" }));
chatStore.getState().setConnector("directline");

Or set everything declaratively before the script tag:

<script>
  window.chativaSettings = {
    connector: "directline",
    theme: { colors: { primary: "#1B1464" }, windowMode: "popup" },
    locale: "tr",
  };
</script>

Full guide → docs/getting-started.md.

What's in the box

Documentation

Repository layout

packages/
  core/                  @chativa/core            Domain + Application layers
  ui/                    @chativa/ui              LitElement chat widget
  genui/                 @chativa/genui           Generative UI streaming
  connector-dummy/       @chativa/connector-dummy
  connector-websocket/   @chativa/connector-websocket
  connector-signalr/     @chativa/connector-signalr
  connector-directline/  @chativa/connector-directline
  connector-mekik/      @chativa/connector-mekik
  connector-converger/   @chativa/connector-converger  Converger hub (extends connector-mekik)
  connector-sse/         @chativa/connector-sse
  connector-http/        @chativa/connector-http
  react/                 @chativa/react           React / Next.js wrapper
  svelte/                @chativa/svelte          Svelte 5 / SvelteKit wrapper
  rn-webview/            @chativa/rn-webview      React Native WebView bridge
  vue/                   @chativa/vue             Vue 3 / Nuxt 3 wrapper
  vue2/                  @chativa/vue2            Vue 2.7 / Nuxt 2 wrapper (maintenance mode)
  angular/               @chativa/angular         Angular wrapper components (ng-packagr)

apps/
  sandbox/               Live demo (https://chativa.aimtune.dev/sandbox/)
  chrome-extension/      Theme-preview Chrome extension

docs/                    Documentation hub (you are here)
schemas/                 JSON Schemas for every JSON-serialisable contract

Development

pnpm install          # install everything
pnpm dev              # serve the sandbox at http://localhost:5173
pnpm build            # build all packages
pnpm test             # run all tests
pnpm test:coverage    # all tests with coverage; fails below per-package thresholds
pnpm --filter @chativa/ui test:coverage   # coverage for the UI components only
pnpm typecheck        # strict type-check across the workspace

Coverage thresholds, reports and what CI enforces are described in Testing & coverage.

The schema-drift test (packages/core/src/domain/value-objects/__tests__/schema-drift.test.ts) guards the contract between schemas/theme.schema.json and the ThemeConfig TypeScript type. Add a field to one without the other and CI fails. See AGENTS.md → Schema sync.

Contributing

Conventions, architecture rules, and PR checklists are in AGENTS.md. Open an issue first for big changes.

License

MIT — © Hamza Agar