vue-ai-chatbot
v0.5.3
Published
Vue AI ChatBot using chatlas.ai service
Downloads
12
Readme
Vue AI ChatBot
Simple Vue AI Chatbot based on GPT-3 or GPT-4 OpenAI models to chat with your data. This component provides composables for chatbot interaction - sending and receiving messages. UI Styling is completely up to you!
Chatlas.ai is used to set discussion context and settings!
It's recommended to have your own Open AI Api Key to use Vue AI ChatBot! You can get your key here.
Install
npm install vue-ai-chatbot
or
yarn add vue-ai-chatbot
Usage instructions:
Register or login at OpenAI platform and set your API Key here.
Singup at chatlas.ai and add your OpenAI Key.
Start discussion either from documents or webpages.
Enable discussion sharing (at right top side). Copy discussion endpoint.
Example implementation (update <your_discussion_endpoint> accordingly):
main.ts
import { createApp } from 'vue';
import App from './ChatComponent.vue';
import { chatBot } from 'vue-ai-chatbot';
const app = createApp(App);
app.use(chatBot, {endpoint: '<your_discussion_endpoint>'});
app.mount('#app');
ChatComponent.vue
<script setup lang="ts">
import { ref } from 'vue';
import { useChatBot, usePending } from 'vue-ai-chatbot';
const { sendMessage, messages } = useChatBot();
const { pending } = usePending();
const userInput = ref<string>('');
function sendMessageHandler():void {
sendMessage(userInput.value);
userInput.value = '';
}
</script>
<template>
<div>
<h1>Chatbot</h1>
<div v-for="(message, index) in messages" :key="index">
{{ message.type }}: {{ message.message }}
</div>
<div v-show="!!pending">bot: {{ pending }}</div>
<input type="text" v-model="userInput" />
<button @click="sendMessageHandler">Send</button>
</div>
</template>
Documentation
useChatBot
- messages: <[{type: 'bot' | 'user', message: string}]> - Discussion messages are stored in this array
- sendMessage: <(message: string)> - function used to send message
- isLoading: boolean - true while ai generates the message
- isError: boolean - when error occurs
- error: string - error message
- clearMessages() - clear all chat messages
- setEndpoint(endpoint:string) - set chat endpoint. Can be used to switch to a different chat
usePending
- pending: string - use to get message on-the-fly while it's being generated, chatgpt style.