@suturatech/chat-vue

@suturatech/chat-vue

Vue 3 SDK for Sutura Chat — the AI assistant that answers your customers from your own documents, and only from them.

A composable exposing the conversation state, so you can build the chat interface your way. Answers are streamed in real time, with their cited sources.

Installation

npm install @suturatech/chat-vue

Requires Vue 3.4 or later.

Usage

<script setup>
import { ref } from "vue";
import { useSuturaChat } from "@suturatech/chat-vue";

const { etat, envoyer, reessayer } = useSuturaChat({
  publicKey: "pk_live_ab12cd34ef56",
  botId: "bot_01J8ZK7QW3",
});

const question = ref("");
const poser = () => {
  envoyer(question.value);
  question.value = "";
};
</script>

<template>
  <p v-for="m in etat.messages" :key="m.id">{{ m.content }}</p>

  <form @submit.prevent="poser">
    <input v-model="question" :disabled="etat.isStreaming" />
    <button>Send</button>
  </form>

  <button v-if="etat.error" @click="reessayer">Try again</button>
</template>

Your public key and bot ID are shown in the Sutura Chat console, under API keys.

API

useSuturaChat(options) returns:

The client is released automatically when the component's scope is disposed. The composable can also be used outside a component, for example in a Pinia store.

Main options: publicKey, botId, locale, context, persistSession, consentRequired, and the onMessage, onError, onEscalate, onLead callbacks.

Allowed domains

Each public key only works on the domains listed for it in the console. Add localhost while developing.

Documentation

Full documentation: https://chat.suturatechnology.com/documentation