Web Chat for in-app agent conversations

Web Chat is now available in open beta on Novu Connect. It gives your agent an in-app channel, so users can start and continue a conversation inside your product instead of moving to Slack, Microsoft Teams, WhatsApp, Telegram, or email.

The React client is headless. You build the message list, composer, and layout that fit your product. Novu manages the live connection, conversation history, agent-run state, tool approvals, and activity visible in the Dashboard.

Build the interface your product needs

Install @novu/react, place NovuProvider above your chat, and call useWebChat with the agent's public identifier:

import { useWebChat } from '@novu/react';

const {
  messages,
  sendMessage,
  isRunning,
  isLoading,
  typing,
  error,
} = useWebChat({
  agentId: 'support-bot',
});

There is no prebuilt Web Chat component. Render the conversation with your own React components, or connect the hook to a chat UI library. An official assistant-ui recipe is available if you want a component-based starting point.

useWebChat exposes the ordered message timeline and the state needed to build the experience around it. Disable the composer while history loads or the agent is running, show failures in the interface, and let subscribers retry messages that did not send.

Show each turn as it happens

Web Chat delivers updates over a live socket connection. While the agent works, you can show its current typing status and render thinking parts as they arrive instead of leaving the user at an indefinite loading state.

The conversation persists beyond the current page view. You can resume an existing conversation by its ID, load older messages, reconnect after an interruption, and retry a failed message through the same client.

Keep approvals, tools, and Cards in the conversation

Agent interactions work inside Web Chat as part of the message timeline:

• Render tool calls and their results.
• Ask the subscriber to approve or deny a gated tool call, then resume the agent turn with the decision.
• Open an authorization flow when an MCP server needs to be connected.
• Render Cards and send button actions back to the conversation.
• Display custom interfaces from data emitted by a custom code agent.

The hook exposes each interaction as structured data, so you decide how it looks while Novu maintains the underlying conversation state.

Use one agent across in-app and external channels

Web Chat uses the same Novu Connect agent as your other agent channels. The agent's behavior, tools, and conversation logic do not need a separate in-app implementation. Connect the channels your users prefer, then give them a product-native option when they are already inside your application.

Each Web Chat conversation is also visible in Agent Conversations in the Novu Dashboard, where your team can inspect its state, message history, metadata, and channel activity.

Before releasing Web Chat to your users, enable HMAC authentication for the subscriber and agent identifiers. This prevents someone from impersonating another subscriber or connecting to an agent they should not access.

Follow the Web Chat quickstart, or run the following command to scaffold a complete example with messages, Cards, approvals, and a conversation sidebar:

npx novu connect --channel web-chat