React hooks

@agentoria/react is headless: hooks that manage the SSE transport and reduce the AgentEvent stream into state. They render nothing, so you own the UI. Prefer a batteries-included component? See <ChatPanel/>.

useAgentChat

POSTs { message, attachments, history } to your streaming endpoint and reduces the reply into messages:

'use client';
import { useAgentChat } from '@agentoria/react';

function Chat() {
  const { messages, isStreaming, send, stop, regenerate, reset } = useAgentChat({
    endpoint: '/api/agent',
    initialHistory: [{ role: 'assistant', content: 'Hi! Ask me anything.' }],
  });

  return (
    <>
      {messages.map((m, i) => <p key={i} data-role={m.role}>{m.content as string}</p>)}
      <button disabled={isStreaming} onClick={() => send('What can you do?')}>Send</button>
      {isStreaming && <button onClick={stop}>Stop</button>}
    </>
  );
}

Options include initialHistory, request headers, and an injectable fetch (for tests or a scripted demo). The result exposes messages, events (the raw stream), isStreaming, send, stop, regenerate, reset, and act (for generative-UI actions).

useToolCalls

Derive tidy tool-call rows (name, status, duration, mutates) from the event stream — for a live tool trace:

import { useToolCalls } from '@agentoria/react';

const rows = useToolCalls(events);
// [{ id, name, status: 'running' | 'ok' | 'error', ms?, mutates }]

Attachments & voice

useAgentChat accepts image/document attachments on send, and useVoiceInput wraps the browser SpeechRecognition API for push-to-talk — both surfaced in the rich composer that ships with <ChatPanel/>.