ChatbotComponent - Vue AI Chat Component

A Vue 3 component for AI-powered chat functionality that can be installed via npm and used in any Vue project.

Installation

npm install gci-chatbot-ai
# or
yarn add gci-chatbot-ai

Usage

Basic Usage

<script setup lang="ts">
import { ChatbotComponent } from 'gci-chatbot-ai'
</script>

<template>
	<div>
		<ChatbotComponent />
	</div>
</template>

Custom Configuration

You can customize the API endpoint, client ID, and token:

<script setup lang="ts">
import { ChatbotComponent } from 'gci-chatbot-ai'
</script>

<template>
	<div>
		<ChatbotComponent client-id="your-client-id" token="your-auth-token" endpoint="https://your-custom-api-endpoint.com/chat" />
	</div>
</template>

Required Parameters

The ChatbotComponent component requires the following parameters:

• client-id: Your client identification string
• endpoint: The API endpoint URL for the chat service
• token: Authentication token for the API

<script setup lang="ts">
import { ChatbotComponent } from 'gci-chatbot-ai'
</script>

<template>
	<div>
		<ChatbotComponent client-id="required-client-id" token="required-auth-token" endpoint="https://api.example.com/chat" />
	</div>
</template>

Development

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Build for Production

npm run build

Features

• Easy integration with Vue 3 projects
• Customizable AI chat functionality
• TypeScript support
• Lightweight and performant

Configuration

The component uses the following dependencies:

• Vue 3
• @ai-sdk/vue
• ai (for AI transport)

License

MIT