@agentic-fullstack/react

React hooks and components for real-time agent interaction. Connects to the SSE stream from @agentic-fullstack/server and maintains a live, overlay-merged view of agent state — persisted messages merged with in-progress stream output, and entity data with live patches applied on top.

Installation

npm install @agentic-fullstack/react

Usage

import {
  useAgentic,
  AgenticMessages,
  AssistantMessage,
} from "@agentic-fullstack/react";

const { messages, events, entity, streaming, connecting } = useAgentic(url);

Point url at your SSE stream endpoint (e.g. /api/agents/[id]/stream). The hook manages the connection, event reduction, and overlay lifecycle automatically.

What's exported

• useAgentic — core hook; returns messages, events, entity, streaming, connecting, error, and raw state
• AgenticMessages — groups messages by timeline event and calls a developer-provided renderGroup function for each
• AssistantMessage — renders the parts of a single message with streaming animation derived automatically from context
• useTextAnimation — progressive text reveal via requestAnimationFrame; used internally by AssistantMessage but exported for custom renderers

See src/index.ts for the full export list and type signatures.

Related Packages

• @agentic-fullstack/core — shared types (AgentState, Message, Chunk, etc.)
• @agentic-fullstack/server — the SSE server this hook connects to

License

MIT