real-time-sync

Synchronizes UI with agent database writes via polling and React Query invalidation.

Updated May 13, 2026
One-click install
npx skills add https://github.com/fred07diamond/Call-Copilot --skill real-time-sync-fred07diamond
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: real-time-sync
Source: https://github.com/fred07diamond/Call-Copilot/tree/main/apps/forms/.agents/skills/real-time-sync
Command: npx skills add https://github.com/fred07diamond/Call-Copilot --skill real-time-sync-fred07diamond

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @agent-native/core.

What problem does it solve? When an agent writes directly to the database, the browser UI has no way to know the data changed, leaving users staring at stale content. This Skill explains how database polling bridges that gap so agent writes appear in the UI automatically without manual refreshes. ## Core Features & Use Cases - Polling-Based Sync: Uses the useDbSync() hook and the /_agent-native/poll endpoint to detect database version changes and invalidate React Query caches. - Event-Based Query Filtering: Maps poll events to specific query keys via the onEvent callback, avoiding unnecessary refetches in apps with multiple data models. - Jitter Prevention: Tags writes with request sources and uses the ignoreSource option so a tab ignores its own writes while still reacting to agent, script, and other-tab changes. - Use Case: You add a new data model to your app and the UI stops updating after agent writes; use this Skill to wire useDbSync with the correct query keys, staleTime, and event filtering. ## Quick Start Ask the agent to wire up useDbSync so the items list updates automatically whenever the agent writes to the database.

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 the UI in sync with agent database writes?▼

Use the useDbSync hook from @agent-native/core with your queryClient and the query keys to invalidate. It polls the /_agent-native/poll endpoint every 2 seconds and refetches affected queries when the database version increments.

How do I prevent unnecessary refetches with multiple data models?▼

Pass an empty queryKeys array and use the onEvent callback to invalidate only the queries matching the event source. Adding staleTime to your queries also prevents cache thrashing during rapid agent writes.

Why is my UI not updating after the agent writes to the database?▼

Check that useDbSync is called with the correct queryClient and that its queryKeys match your useQuery keys. Also verify the /_agent-native/poll endpoint is accessible and the server is running.

How do I stop polling from overwriting active user edits?▼

Generate a per-tab ID and pass it as the ignoreSource option to useDbSync, while sending the same ID in the X-Request-Source header on writes. The tab then ignores its own events but still reacts to agent and other-tab changes.

Should I write my own polling loop instead of useDbSync?▼

No. useDbSync already polls every 2 seconds by default and handles version tracking. For custom behavior, use its onEvent callback rather than creating a parallel fetch-based polling loop.