Client SDK

A simple React library for chat functionality with built-in AI SDK integration.

Installation

npm install @ensembleapp/client-sdk

Usage

Option 1: Use the pre-built ChatWidget

import { ChatWidget } from '@ensembleapp/client-sdk'

function App() {
  return (
    <ChatWidget
      api={{
        baseUrl: '/api',
        token: 'your-jwt-token',
      }}
      threadId="user-123"
      agentId="agent-234"
      onMessage={(message) => console.log('New message:', message)}
      onError={(error) => console.error('Chat error:', error)}
      placeholder="Ask me anything..."
      welcomeMessage="Hello! How can I help you today?"
    />
  )
}

Option 2: Build your own UI with the useChat hook

import { useChat } from '@ensembleapp/client-sdk'

function CustomChat() {
  const { messages, isLoading, sendMessage } = useChat({
    api: {
      baseUrl: '/api',
      token: 'your-jwt-token',
    },
    threadId: 'user-123',
    agentId="agent-234",
  })

  return (
    <div>
      {messages.map(message => (
        <div key={message.id}>
          <strong>{message.role}:</strong> {message.content}
        </div>
      ))}
      <button onClick={() => sendMessage({ text: 'Hello!' })}>
        Send Message
      </button>
    </div>
  )
}

API Reference

ChatWidget Props

• api ({ baseUrl: string; token: string; headers? }): Base URL for the chat API, required auth token (sent as Authorization: Bearer <token>), and optional extra headers
• threadId (string): Thread/session ID (required)
• onMessage? (function): Callback when a new message is received
• onError? (function): Callback when an error occurs
• onFinish? (function): Callback when a conversation finishes
• className? (string): Additional CSS classes
• placeholder? (string): Input placeholder text
• welcomeMessage? (string): Initial welcome message

useChat Hook

const {
  messages,      // Array of chat messages
  isLoading,     // Boolean indicating if request is in progress
  isError,       // Boolean indicating if there's an error
  sendMessage,   // Function to send a message
  stop,          // Function to stop current request
  setMessages,   // Function to manually set messages
} = useChat(config)