A React hook wrapper for Agent Handler Chat.
npm install @mergeapi/react-agent-handler-chatA React hook wrapper for Agent Handler Chat widget. For the core module and the main documentation, see agent-handler-chat.
This package is usually only updated when there are breaking changes to the function contract, such as new arguments or return types. Otherwise, the package should remain stable.
1. Make the change
2. Bump the package version in package.json
3. Run npm publish (Will need to setup credentials through npm login or github token)
- Don't forget to update the package version in the frontend as well
``tsx
import React from 'react';
import { useAgentHandlerChat } from '@mergeapi/react-agent-handler-chat';
function App() {
const { openChat, closeChat, isReady, error } = useAgentHandlerChat({
authToken: 'your-auth-token',
useDummyResponse: true,
parentContainerID: 'chat-container',
onSuccess: (message) => {
console.log('Message sent:', message);
},
onValidationError: (error) => {
console.error('Validation error:', error);
},
onReady: () => {
console.log('Chat widget is ready!');
},
});
if (error) {
return
return (
export default App;
`
`tsx
import React from 'react';
import { useAgentHandlerChat } from '@mergeapi/react-agent-handler-chat';
function App() {
const { openChat, closeChat, isReady } = useAgentHandlerChat({
authToken: 'your-auth-token',
parentContainerID: 'chat-container',
customization: {
title: 'Customer Support',
blankState: {
heading: 'How can we help you today?',
subtitle: 'Ask us anything about our products and services'
},
promptSuggestions: [
'What are your business hours?',
'How do I reset my password?',
'Tell me about pricing'
]
},
onReady: () => console.log('Chat ready'),
});
return (
Configuration Options
$3
- authToken (string): Authentication token for backend API calls$3
- tenantConfig (object): Configuration for custom API base URL
- apiBaseUrl (string): Override the default API base URL
- useDummyResponse (boolean): If true, always returns "You're absolutely right" (default: false)
- parentContainerID (string): ID of the DOM element to mount the chat widget in
- onReady (function): Callback when widget is ready
- onSuccess (function): Callback when a message is successfully sent
- onValidationError (function): Callback when validation errors occur
- customization (object): Customize the appearance and behavior of the chat widget
- title (string): Title displayed in the header (default: "Playground")
- blankState (object): Customize the empty state when no messages exist
- icon (React.ReactNode): Custom icon to display (default: Send icon)
- heading (string): Main heading text (default: "Start a Conversation")
- subtitle (string): Subtitle text (default: "Test your tool packs in a sandbox environment. Type a message below to begin.")
- promptSuggestions (string[]): Array of suggested prompts to display as clickable buttons in the blank state
``