Embed the Chat Widget

Drop the @bytechef/chat React widget into your own app and point it at a chat-enabled workflow.

When a chat-enabled workflow runs in Embedded Chat mode, you bring your own UI. The @bytechef/chat React package is that UI — a ready-made chat widget that speaks the New Chat Request webhook contract, including streamed replies and voice.

Install

npm install @bytechef/chat

Point the widget at your workflow's chat webhook URL:

import {AutomationChat} from '@bytechef/chat';

export function SupportChat() {
    return (
        <AutomationChat
            config={{
                description: 'Ask anything about your account.',
                suggestions: [
                    {label: 'Track an order', prompt: 'Where is my order?', title: 'Where is my order?'},
                    {label: 'Manage billing', prompt: 'Cancel my subscription', title: 'Cancel my subscription'},
                ],
                title: 'Support Assistant',
                webhookUrl: 'https://<your-host>/webhooks/<webhook-id>',
            }}
        />
    );
}

Three components are exported:

Export	What it renders
`AutomationChat`	The full chat surface, inline in your page.
`AutomationChatModal`	A floating launcher button that opens the chat in a modal (`position` defaults to `bottom-right`).
`AutomationChatProvider`	The context provider underneath both — exported for fully custom layouts, together with building blocks like `Thread` and the `useSSE` hook.

The widget sends { message, conversationId, attachments } to the webhook and renders the reply; when the webhook URL ends in /sse, replies stream token by token.

Embed the Chat Widget

Install

Drop in the widget

On this page