Agent Builder Chat Widget

A customizable chat widget for Agent Builder - easily embed AI chat functionality into your React/Next.js applications.

Installation

npm install agent-builder-chat
# or
yarn add agent-builder-chat
# or
pnpm add agent-builder-chat

Quick Start

Next.js / React

'use client'; // Required for Next.js App Router

import { ChatWidget } from 'agent-builder-chat';

export default function App() {
  return (
    <div>
      <h1>My Application</h1>

      <ChatWidget
        agentId="your-agent-id"
        apiKey="your-api-key"
        baseUrl="http://localhost:3000"
      />
    </div>
  );
}

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | agentId | string | Yes | - | The ID of your Agent Builder agent | | apiKey | string | Yes | - | Your Agent Builder public API key | | baseUrl | string | No | http://localhost:3000 | The base URL of your Agent Builder backend | | position | 'bottom-right' \| 'bottom-left' | No | 'bottom-right' | Position of the chat button | | primaryColor | string | No | '#6366f1' | Primary color for the widget (hex) | | title | string | No | 'Chat with us' | Title shown in the chat header | | placeholder | string | No | 'Type a message...' | Input placeholder text | | welcomeMessage | string | No | - | Initial message from the assistant |

Advanced Usage

Using the Hook Directly

If you want more control over the chat functionality, you can use the useChatWidget hook:

'use client';

import { useChatWidget } from 'agent-builder-chat';

export default function CustomChat() {
  const {
    messages,
    isLoading,
    error,
    isOpen,
    sendMessage,
    toggleOpen,
    clearChat,
  } = useChatWidget({
    agentId: 'your-agent-id',
    apiKey: 'your-api-key',
    baseUrl: 'http://localhost:3000',
    welcomeMessage: 'Hello! How can I help you today?',
  });

  return (
    <div>
      {/* Build your custom UI */}
    </div>
  );
}

Using the API Directly

For even more control, you can use the sendMessage function directly:

import { sendMessage } from 'agent-builder-chat';

async function chat() {
  const response = await sendMessage(
    {
      agentId: 'your-agent-id',
      apiKey: 'your-api-key',
      message: 'Hello!',
      conversationId: undefined, // First message
    },
    'http://localhost:3000'
  );

  console.log(response.reply);
  console.log(response.conversationId); // Use this for subsequent messages
}

Customization

Custom Colors

<ChatWidget
  agentId="your-agent-id"
  apiKey="your-api-key"
  primaryColor="#10b981" // Emerald green
/>

Custom Position

<ChatWidget
  agentId="your-agent-id"
  apiKey="your-api-key"
  position="bottom-left"
/>

Welcome Message

<ChatWidget
  agentId="your-agent-id"
  apiKey="your-api-key"
  welcomeMessage="Hi there! I'm here to help you with any questions."
/>

API Response

The chat API returns:

interface ChatResponse {
  reply: string;        // The assistant's response
  conversationId: string; // ID to continue the conversation
  leadId: string;       // ID of the lead record
  isComplete: boolean;  // True when all required data fields are captured
}

TypeScript Support

This package is written in TypeScript and includes full type definitions:

import type {
  ChatWidgetConfig,
  ChatWidgetProps,
  Message,
  ChatResponse,
  ChatRequest,
  ChatState,
} from 'agent-builder-chat';

License

MIT