AI Solutions | Expert AI & Full-Stack Development

Features

Easy Integration: Drop-in component for React or plain HTML.
Real-time Streaming: Built-in support for streaming AI responses.
Markdown Support: Renders Markdown content with syntax highlighting.
Responsive Design: Works seamlessly on desktop and mobile configurations.

Customizable: Extensive options to match your brand's look and feel.
Interactive: Notifications, sound effects, and smooth animations.
Voice Input: Integrated speech-to-text for hands-free messaging.
Smart Controls: Stop generation and feedback system.

Supported Frameworks & Platforms

@dmanikanta17/chat-ui works in any environment that can install npm packages or load JavaScript & CSS files.

Plain HTML (No Framework)

Integration via <script> + <link>

Static HTMLVanilla JSWordPressShopifyWebflowWixSquarespaceJoomlaDrupalMagentoBigCommerceGhostBubbleFramerWeeblyCarrdKajabi

JavaScript UI Frameworks

Install via npm i @dmanikanta17/chat-ui

ViteReactAngularVue.jsSvelteSolidJSPreactLitAlpine.jsStencilcheckInfernoAureliaEmber.jsBackbone.jsKnockout.jsMithril.jsRiot.jsPolymerStimulusMarkoQuasarHyperapp

Meta / SSR & Static

Server, Static & Hybrid Frameworks

Next.jsNuxt.jsSvelteKitRemixGatsbyAstroSolidStartRedwoodJSBlitz.jsQwikMeteorGridsomeScullyAnalogFreshElder.jsUmiJSModern.js

Mobile & Desktop

JavaScript-based Native Platforms

Mobile (WebView/Embedded)

React NativeExpoIonicNativeScriptCordovaCapacitor

Desktop

ElectronTauriNW.jsNeutralinojsWailsFlutter (WebView)MAUI (WebView)

Integration Guide

npm Package Integration

1. Install Package

bash

npm i @dmanikanta17/chat-ui

Note: If you encounter dependency conflicts, try running: npm i @dmanikanta17/chat-ui --legacy-peer-deps

2. Import & Usage

Import the component and CSS in your layout or page.

tsx

"use client";
import { ChatUI } from "@dmanikanta17/chat-ui";
import "@dmanikanta17/chat-ui/styles.css";

export function Rag(){
  return (
      <ChatUI 
        endpoint="https://your-api-domain.com/api/chat"
        title="Support Bot"
        welcomeMessage="Hi there! Need help?"
        description="Ask me anything about our products."
        inputPlaceholder="Type your question..."
        logoSrc="/assets/bot-avatar.png"
        theme="light"
      />
  )
}

Props & Customization

Prop	Type	Default	Description
endpoint	string	Required	Your backend API URL
title	string	"AI Assistant"	Header title
logoSrc	string	DEFAULT_LOGO	Chatbot avatar URL
welcomeMessage	string	"Welcome..."	Initial greeting bubble
description	string	"I'm here..."	Subtitle text below welcome message
footerText	ReactNode	Default Footer	Footer text or component
inputPlaceholder	string	"Message..."	Input placeholder text
soundSrc	string	DEFAULT_SOUND	Notification sound URL
theme	"light" \| "dark" \| "auto"	"light"	The color theme of the chat UI. Use "auto" for dynamic system theme detection.
position	"right" \| "left"	"right"	Position of the chat widget on screen.

Plug & Play Chatbot Integration