Agent Web UI

Browser React component library for monitoring a running agent-cli session over WebSocket. Provides a connection hook, conversation view, and a self-contained monitor widget.

Installation

npm install @robota-sdk/agent-web-ui

This package is browser-only. It requires React 18+.

Quick Start

import { SessionMonitor } from '@robota-sdk/agent-web-ui';

function App() {
  return <SessionMonitor url="ws://localhost:3001" className="my-monitor" />;
}

SessionMonitor connects to the CLI sidecar's WebSocket endpoint, replays history, and renders the conversation in real time.

Components

SessionMonitor

Self-contained widget. Renders connection status, conversation history, and a prompt input.

<SessionMonitor url="ws://localhost:3001" />

ConversationView

Pure rendering component for conversation messages. Use this when you manage WebSocket state yourself.

import { ConversationView } from '@robota-sdk/agent-web-ui';

<ConversationView
  messages={messages}
  activeTools={activeTools}
  streamingText={streamingText}
  isThinking={isThinking}
/>;

Hook

useWsSession

React hook that manages the WebSocket connection and reconstructs conversation state from server events.

import { useWsSession } from '@robota-sdk/agent-web-ui';

const { status, messages, activeTools, streamingText, isThinking, send } = useWsSession(url);

| Field | Type | Description | | --------------- | ------------------------ | -------------------------------------------------- | | status | TConnectionStatus | disconnected \| connecting \| connected \| error | | messages | IConversationMessage[] | Reconstructed conversation history | | activeTools | IActiveTool[] | Currently running tool calls | | streamingText | string | Partial streaming assistant text | | isThinking | boolean | Whether the agent is processing | | send | (msg) => void | Send a prompt to the agent |

Architecture

This package is a pure browser UI library. It does not own session lifecycle or agent runtime state.

agent-web-ui (browser components)
  └── useWsSession(url)
        └── createWsSessionClient  ← reconnects on disconnect
              └── agent-transport/ws  ← TServerMessage / TClientMessage types

Dependencies

• react ^18 (peer)
• @robota-sdk/agent-transport (for WebSocket message types)

Links

• npm
• GitHub