nuxt3-ai-chatbot

nuxt3-ai-chatbot is a customizable chatbot component for Nuxt 3 applications. It provides real-time AI-powered interactions through WebSocket, allowing you to seamlessly integrate an intelligent assistant into your website. With easy-to-configure props, you can customize the chatbot's appearance, including colors, avatars, and launcher icons, to match your brand's design.

Features

• Easy to integrate: Plug-and-play Vue component for Nuxt 3 — just drop it into your page and provide a WebSocket endpoint.
• Real-time AI chat: Communicates with your backend through WebSocket for low-latency, real-time AI responses.
• Customizable UI: Customize colors, background, avatar, launcher icon, and welcome message to match your brand.

Real-time Chatbot UI Preview

Quick Setup

Installation

Install the module to your Nuxt application with one command:

npx nuxi module add nuxt3-ai-chatbot

Or manually install the module from npm and manually add nuxt3-ai-chatbot to the modules in nuxt.config.ts:

npm i nuxt3-ai-chatbot

// nuxt.config.ts
modules: [
  // ...
  'nuxt3-ai-chatbot'
]

That's it! You can now use nuxt3-ai-chatbot in your Nuxt app ✨

Usage

Note: The WebSocket endpoint (ai-websocket-endpoint) needs to be developed and provided by the developer. This module only handles the front-end integration and communication, but does not include the AI backend or WebSocket server.

<!-- Simple use -->
<nuxt3-ai-chatbot
  ai-websocket-endpoint="wss://example.com"
/>

<!-- Using with props settings -->
<nuxt3-ai-chatbot
  ai-websocket-endpoint="wss://example.com"
  welcome-message="Ask me anything"
  color="#008000"
  bg-color="#90EE9026"
  chat-avatar="/img/img-avatar.webp"
  chat-launcher-image="/img/img-launcher.webp"
/>

Props settings

| Name | Description | Default | Required | | --- | --- | --- | --- | | ai-websocket-endpoint | Websocket endpoint for ai chatbot | Undefined | Required | | welcome-message | The first message displayed when the chatbot opens | "Hello! How can I help you today?" | Optional | | color | Primary color for launcher, send icon and user's chat message background | #0073D6 | Optional | | bg-color | Background color for input and chatbot's chat message | #F2F8FD | Optional | | chat-avatar | Image URL for the chatbot's avatar | Default message icon | Optional | | chat-launcher-image | Image URL for the chatbot launcher icon | Default message icon | Optional |