@aseity/agent-chat-react

Headless React runtime for agent chat UI streams.

This package owns transport adaptation, SSE parsing, optimistic user messages, agent event reduction, and React subscription hooks. It intentionally does not ship visual chat components.

Current Runtime Tradeoffs

• SSE reconnects are bounded only for failures that happen before the stream opens. If a connection opens and then drops immediately while a turn is still active, the retry counter is reset and the client can continue reconnecting. This is an accepted product tradeoff for the current single-user/single-backend deployment shape; do not treat it as a bug unless the deployment model changes or reconnect loops become user-visible.

'use client';

import { useAgentChat } from '@aseity/agent-chat-react';
import { createKyAgentTransport } from '@aseity/agent-chat-react/transport/ky';
import { apiClient } from './http';

const transport = createKyAgentTransport(apiClient);

export function Chat() {
  const chat = useAgentChat({
    transport,
    autoCreate: true,
    throttleMs: 50,
  });

  return (
    <form
      onSubmit={event => {
        event.preventDefault();
        const data = new FormData(event.currentTarget);
        void chat.sendMessage(String(data.get('message') ?? ''));
        event.currentTarget.reset();
      }}
    >
      {chat.messages.map(message => (
        <div key={message.id}>{message.type === 'user' ? message.text : message.status}</div>
      ))}
      <input name="message" disabled={!chat.canSend} />
      <button disabled={!chat.canSend}>Send</button>
    </form>
  );
}

For long conversations, render chat.messageIds and subscribe per row with useAgentMessage(chat.store, id).