skills.rest
BuilderIO
BuilderIOOFFICIAL
Explore all skills by this author →
WebsiteGitHub

real-time-sync

Synchronize UI state with agent and script changes via SSE and polling.

3|Updated Jun 10, 2026
Search Tags:#real-time#polling#sse#react-query#data-sync#agent-native#useDbSync
One-click install
npx skills add https://github.com/BuilderIO/builder-agent-native-starter --skill real-time-sync
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: real-time-sync
Source: https://github.com/BuilderIO/builder-agent-native-starter/tree/main/.agents/skills/real-time-sync
Command: npx skills add https://github.com/BuilderIO/builder-agent-native-starter --skill real-time-sync

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

UI often lags or requires manual refresh when agent/script changes occur across processes; Real-Time Sync keeps the browser UI updated automatically via SSE and a polling fallback.

Core Features & Use Cases

  • In-process and cross-process changes trigger immediate UI updates via useDbSync.
  • SSE streams events to the client and falls back to polling when SSE is unavailable, ensuring reliability.
  • Per-source counters integrate with query keys to minimize unnecessary refetches while staying fresh.
  • Mutating actions trigger framework-wide data refresh, keeping dashboards and editors consistent.

Quick Start

Enable real-time UI synchronization by wiring useDbSync with your React Query client and point it at the SSE endpoint /_agent-native/events with proper authentication.

Frequently Asked Questions about real-time-sync

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I keep React Query UI in sync with real-time agent changes?▼

To keep React Query UI in sync with real-time agent changes, wire the useDbSync hook to your query client and point it at the /_agent-native/events SSE endpoint for automatic invalidation.

What is the best way to handle real-time data sync across multiple processes in a dashboard?▼

Real-time data sync across multiple processes uses Server-Sent Events to stream changes and falls back to polling at /_agent-native/poll, ensuring your dashboard UI remains consistent without manual refreshes.

Does real-time data sync work when Server-Sent Events are unavailable?▼

Real-time data sync works when Server-Sent Events are unavailable by automatically falling back to a polling mechanism at /_agent-native/poll, ensuring reliable UI updates even if SSE connections drop.

How does per-source counter integration minimize unnecessary refetches during data synchronization?▼

Per-source counters integrate directly with React Query query keys during data synchronization to track specific data mutations, minimizing unnecessary refetches while keeping the UI fresh and consistent.

Why does my dashboard UI lag when scripts mutate data across different processes?▼

Your dashboard UI lags when scripts mutate data across processes because it lacks real-time synchronization; implementing useDbSync with SSE streams triggers immediate framework-wide data refresh to resolve this.

Related Skills

Explore More Software Engineering Skills→
ai-enhanced-engineerai-enhanced-engineer
3

react-streaming-sse-patterns

Enable Server-Sent Events streaming in React 18 using the fetch API and ReadableStream.

Official
Advanced
AgentiveCityAgentiveCity
2

nextjs-data-fetching-and-caching

Configure data fetching and caching in Next.js App Router applications.

Official
Intermediate
pacphipacphi
6

n8n-trigger-testing-strategies

Diagnose and validate n8n trigger behavior across webhook, schedule, polling, and event-driven triggers.

Community
Advanced
cenjiecenjie

real-time-features

Enable real-time bidirectional communication via WebSocket or SSE with room-based messaging.

Community
Advanced