Implementation:Ucbepic Docetl WebSocketContext

Knowledge Sources	Ucbepic_Docetl
Domains	Frontend, React_UI
Last Updated	2026-02-08 00:00 GMT

Overview

Concrete tool for the WebSocket context provider that manages real-time communication with the DocETL backend.

Description

The WebSocketContext module provides a React context for managing a WebSocket connection to the DocETL backend pipeline execution endpoint. The WebSocketProvider component handles connection lifecycle (connect, disconnect, error handling), message parsing for different message types (output, result, error, optimizer_progress), and exposes the connection state and messaging functions. It constructs the WebSocket URL from environment variables and the user's namespace.

Usage

Wraps the playground components to enable real-time communication with the backend during pipeline execution, optimization, and decomposition tasks.

Code Reference

Source Location

• Repository: Ucbepic_Docetl
• File: website/src/contexts/WebSocketContext.tsx
• Lines: 1-138

Signature

interface WebSocketMessage {
  type: "output" | "result" | "error" | "optimizer_progress";
  data?: any;
  message?: string;
  status?: string;
  progress?: number;
  should_optimize?: boolean;
  rationale?: string;
  validator_prompt?: string;
}

interface WebSocketContextType {
  lastMessage: WebSocketMessage | null;
  readyState: number;
  connect: () => Promise<void>;
  disconnect: () => void;
  sendMessage: (message: string | Record<string, unknown>) => void;
}

export const WebSocketProvider: React.FC<{
  children: React.ReactNode;
  namespace: string;
}>

export const useWebSocket: () => WebSocketContextType

Import

import { WebSocketProvider, useWebSocket } from "@/contexts/WebSocketContext";

I/O Contract

Inputs (Props)

Name	Type	Required	Description
children	React.ReactNode	Yes	Child components to provide WebSocket context to
namespace	string	Yes	User namespace for WebSocket URL construction

Outputs

Name	Type	Description
context	WebSocketContextType	WebSocket state, connection methods, and message data

Usage Examples

// Provider setup:
<WebSocketProvider namespace="my-namespace">
  <PipelineEditor />
</WebSocketProvider>

// In a component:
const { connect, sendMessage, lastMessage, readyState } = useWebSocket();
await connect();
sendMessage({ yaml_config: config, operation_name: "run" });

Related Pages

• Environment:Ucbepic_Docetl_Frontend_Node_Environment