💬 iDEVconn AI Chat - Universal Frontend Widget

@idevconn/ai-chat-client is a beautifully designed, universal frontend widget for the iDEVconn AI Chat platform.

It provides a highly responsive, visual chat interface that connects seamlessly to your backend. The widget is completely framework-agnostic—drop it in as a React component, a universal custom Web Component, or a plain HTML script tag!

✨ Key Features

• Zero-Config Integration: Drop it in as a React component, a custom Web Component, or a plain HTML script tag.
• Rich Markdown Rendering: Natively parses and styles Markdown output (bullets, numbered lists, bold text, headers, code blocks, and GFM tables) in real-time as it streams from your backend.
• Tailwind Typography Styled: Leverages @tailwindcss/typography to ensure that standard Markdown structures align with your custom styling out-of-the-box.

🔌 Integration Options

Option A: React / Next.js (Recommended)

Import the React component and the default stylesheet into your application:

npm install @idevconn/ai-chat-client

import { AiChat } from '@idevconn/ai-chat-client/react';
import '@idevconn/ai-chat-client/styles.css';

function App() {
  return (
    <AiChat
      endpoint="http://localhost:3000/api/v1/chat"
      apiKey="your_secure_shared_widget_secret"
    />
  );
}

export default App;

Option B: HTML / WordPress / Webflow

Don't have a build step? No problem. Simply reference the standalone module script. No compilation or bundling required!

<!-- 1. Include the stylesheet -->
<link rel="stylesheet" href="https://unpkg.com/@idevconn/ai-chat-client/dist/styles.css" />

<!-- 2. Mount the widget script as a module -->
<script
  src="https://unpkg.com/@idevconn/ai-chat-client/dist/standalone/index.mjs"
  type="module"
></script>

<!-- 3. Place the custom element anywhere in your body -->
<ai-chat endpoint="http://localhost:3000/api/v1/chat" api-key="your_secure_shared_widget_secret">
</ai-chat>

🎨 Theme Customization

The widget is highly customizable, allowing you to seamlessly align it with your brand's existing design system:

Theme Configuration Object

export interface ThemeConfig {
  primaryColor?: string; // Primary brand color (default: '#6366f1')
  borderRadius?: string; // Rounded corners of chat panel (default: '12px')
  fontFamily?: string; // Font stack of chat widget
  darkMode?: boolean; // Enables dark mode toggle
  position?: 'bottom-right' | 'bottom-left'; // Floating corner location
  width?: string; // Width of chat panel (default: '380px')
  height?: string; // Height of chat panel (default: '560px')
  zIndex?: number; // Layer overlay depth (default: 9999)
}

Advanced Styling Example (React)

<AiChat
  endpoint="http://localhost:3000/api/v1/chat"
  apiKey="your_secure_shared_widget_secret"
  theme={{
    primaryColor: '#5c67f2', // Premium custom indigo/blue
    borderRadius: '16px', // Smooth rounded panels
    position: 'bottom-right',
    width: '400px',
    height: '600px',
  }}
  welcomeMessage="Hello! How can I help you today?"
  botName="iDEVconn Assistant"
  botAvatar="🤖"
/>

🛠️ API Reference

Component Props / HTML Attributes

| Prop (React) | Attribute (HTML) | Description | Required | | :--------------- | :---------------- | :------------------------------------------------- | :------- | | endpoint | endpoint | The URL of your @idevconn/ai-chat-be backend | Yes | | apiKey | api-key | The shared secret to authenticate with the backend | Yes | | welcomeMessage | welcome-message | Initial greeting displayed to the user | No | | botName | bot-name | Display name for the AI | No | | botAvatar | bot-avatar | Emoji or image URL for the AI avatar | No | | theme | (N/A for HTML) | Theme configuration object | No |

🔗 Pair with the Backend Module

This widget is designed to be powered by our Zero-DB RAG NestJS backend module. Check out @idevconn/ai-chat-be to complete the integration!