You're publishing

agent_status

JSON via

publish_data

from the backend — to receive it in a Next.js frontend, listen for

RoomEvent.DataReceived

, decode the payload, parse JSON, and filter by

type === "agent_status"

. Example component using

@livekit/components-react

and `livekit-client`:

import { useRoom } from "@livekit/components-react";
import { RoomEvent } from "livekit-client";
import { useEffect, useState } from "react";

export default function AgentStatusListener() {
  const room = useRoom();
  const [agentState, setAgentState] = useState<string | null>(null);

  useEffect(() => {
    if (!room) return;

    const handleData = (payload: Uint8Array) => {
      try {
        const json = JSON.parse(new TextDecoder().decode(payload));
        if (json.type === "agent_status") {
          setAgentState(json.state);
        }
      } catch (err) {
        console.error("Failed to parse data message", err);
      }
    };

    room.on(RoomEvent.DataReceived, handleData);
    return () => room.off(RoomEvent.DataReceived, handleData);
  }, [room]);

  return <div>Agent State: {agentState ?? "None"}</div>;
}

If you use the raw

livekit-client

Room instance (not the React hooks), the same

room.on(RoomEvent.DataReceived, ...)

pattern applies. Would you like an example that scopes messages to a specific participant or handles lossy vs reliable streams? Sources: Data packets | LiveKit docs