Build the Web Chat UI

npm install @novu/react

'use client';

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

function Chat() {
  const { messages, sendMessage, isRunning, isLoading, error } = useWebChat({
    agentId: 'YOUR_AGENT_IDENTIFIER',
  });

  return (
    <div>
      {error ? <p>{error.message}</p> : null}
      <ul>
        {messages.map((message) => (
          <li key={message.id}>
            <strong>{message.role}</strong>{' '}
            {message.parts.map((part, index) =>
              part.type === 'text' ? <span key={index}>{part.text}</span> : null
            )}
          </li>
        ))}
      </ul>
      <form
        onSubmit={(event) => {
          event.preventDefault();
          const form = event.currentTarget;
          const input = form.elements.namedItem('text') as HTMLInputElement;
          void sendMessage(input.value);
          form.reset();
        }}
      >
        <input name="text" disabled={isRunning || isLoading} />
        <button type="submit" disabled={isRunning || isLoading}>
          Send
        </button>
      </form>
    </div>
  );
}

export default function App() {
  return (
    <NovuProvider
      applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
      subscriber="YOUR_SUBSCRIBER_ID"
    >
      <Chat />
    </NovuProvider>
  );
}