@happiest-team/ai-chat

The official React Web SDK for Happiest Chat. Easily integrate intelligent, context-aware AI agents directly into your React and Next.js applications with our fully customizable headless hooks and premium UI components.

🚀 Features

• Plug & Play UI: Drop-in <ChatPanel /> with sleek, modern, "PhD-level" responsive styling out of the box.
• Headless Hooks: Build your own bespoke UI using the useHappiestChat() hook for total architectural freedom.
• Zero Configuration: Minimal setup with the <HappiestProvider />.
• First-Class TypeScript: Strict type definitions for an incredible developer experience and IDE autocompletion.
• Edge Compatible: Works perfectly with Next.js App Router, SSR, and Edge runtimes.

📦 Installation

npm install @happiest-team/ai-chat @happiest-team/ai-chat-core

(Yarn and pnpm are also supported)

🛠 Quick Start

1. Setup the Provider

Wrap your application's root (or specific feature tree) with the HappiestProvider.

import { HappiestProvider } from '@happiest-team/ai-chat';

export default function App({ children }) {
  return (
    <HappiestProvider 
      clubId="YOUR_CLUB_ID"
      config={{
        publishableKey: "pk_live_your_key",
        gatewayUrl: "https://api.happiest.com/api" // Optional custom gateway
      }}
    >
      {children}
    </HappiestProvider>
  );
}

2. Render the Chat Widget

Render the built-in ChatPanel anywhere inside the provider. It is pre-styled with optimized dimensions, z-indexing, and interactive typing animations.

import { ChatPanel } from '@happiest-team/ai-chat';

export function AgentWidget() {
  return (
    <div className="fixed bottom-4 right-4 z-50">
      <ChatPanel />
    </div>
  );
}

🧠 Advanced: Headless Usage

Don't want our UI? Build your own widget by extracting the raw data logic using useHappiestChat.

import { useHappiestChat } from '@happiest-team/ai-chat';

export function CustomChat() {
  const { messages, isTyping, sendMessage } = useHappiestChat();

  return (
    <div>
      {messages.map(msg => (
        <p key={msg.id} style={{ color: msg.isUser ? 'blue' : 'gray' }}>
          {msg.text}
        </p>
      ))}
      {isTyping && <p>Agent is typing...</p>}
      
      <button onClick={() => sendMessage("Hello AI!")}>
        Send
      </button>
    </div>
  );
}

📄 License

MIT © Happiest