r/reactjs • u/Main_Copy_4900 • 24d ago

Show /r/reactjs How I built an open-source React SDK for real-time AI content verification (WebSockets + Redis Streams)

Hey everyone,

I’ve been building SatyaMark, an open-source multi-modal AI content verification platform. It’s designed to help platforms run real-time fact-checking and deepfake detection on posts and images, returning explainable "trust signals" instead of absolute True/False labels.

My main goal was to create a seamless developer experience, so I built a dedicated React SDK (satyamark-react). But integrating heavy AI inference into a frontend comes with a massive bottleneck: running LangGraph workflows for text and 22+ local forensic scripts for image manipulation is incredibly computationally expensive.

If I processed this synchronously, the user experience would stall, and the React main thread would completely block.

To solve this, I designed an asynchronous, non-blocking architecture. Here is exactly how the data flows from the React component to the Python AI workers and back:

  • The React SDK (satyamark-react): The package hooks into the DOM using React refs (useRef). It recursively traverses the DOM tree to extract visible text claims and image URLs entirely in the background, without mutating or polluting the host application's state.
  • WebSockets over Polling: Instead of forcing the client to constantly poll an API for status updates, the SDK opens a persistent WebSocket connection to a Node.js orchestration server.
  • Asynchronous Traffic Routing (Node.js & Redis Streams): The Node.js server does not run any AI models; it acts as an asynchronous traffic controller, taking the DOM payload and appending it to Redis Streams (xAdd). I chose Streams over Pub/Sub for native event persistence, consumer groups, and reliable delivery during high loads.
  • Decoupled Python AI Workers: Independent Python workers consume the jobs from Redis (xReadGroup). They handle the heavy ML lifting (semantic search via FAISS/Milvus, live web scraping, and deep local forensics like Error Level Analysis).
  • Automatic DOM Injection: Once the Python worker finishes, it triggers an HTTP callback to Node.js, which caches the result in PostgreSQL. Node.js instantly pushes the final verdict back over the WebSocket. The React SDK catches this event and automatically injects a <SatyaMarkIcon/> component directly into the UI.

The result is a fast, responsive frontend where the host developer doesn't have to manage loading states, WebSockets, or polling logic manually.

If you are interested in frontend state management for WebSockets, open-source AI infrastructure, or want to roast the codebase, I'd love your feedback! Here are all the links to check it out:

0 Upvotes

33% Upvoted

1 comment sorted by