skills.rest
paramcodes
paramcodesCOMMUNITY
Explore all skills by this author →
Website𝕏@Your_PARAMGitHub

trigger-realtime-and-frontend

Subscribe to Trigger.dev runs and stream live updates into React frontends.

Updated Sep 19, 2026
Search Tags:#Next.js#streaming#realtime#react hooks#trigger.dev#public token#run subscription
One-click install
npx skills add https://github.com/paramcodes/autobro --skill trigger-realtime-and-frontend-paramcodes
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: trigger-realtime-and-frontend
Source: https://github.com/paramcodes/autobro/tree/main/.cursor/skills/trigger-realtime-and-frontend
Command: npx skills add https://github.com/paramcodes/autobro --skill trigger-realtime-and-frontend-paramcodes

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @trigger.dev/sdk, @trigger.dev/react-hooks.

What problem does it solve? Building live progress UIs for background tasks usually means hand-rolling WebSockets or polling loops. This Skill shows how to consume Trigger.dev's realtime API from React/Next.js/Remix so run status, metadata, and AI token streams appear in the browser without polling infrastructure. ## Core Features & Use Cases - Realtime run subscriptions: Use runs.subscribeToRun or the useRealtimeRun hook from @trigger.dev/react-hooks to track live run state, with skipColumns to avoid shipping unused payload/output fields. - Stream consumption: Render AI/text streams in React with useRealtimeStream for token-by-token output. - Browser-side triggering: Trigger tasks with useTaskTrigger or useRealtimeTaskTrigger using single-use tokens minted via auth.createTriggerPublicToken, and scope read access with auth.createPublicToken. - Use Case: A Next.js app shows a status badge and live LLM token stream for a document-processing task: the backend mints a scoped public token, the client component subscribes with useRealtimeRun, and a trigger button starts new runs. ## Quick Start Ask the AI to wire a Next.js client component that subscribes to a Trigger.dev run with useRealtimeRun and renders a live status badge using a scoped public token.

Frequently Asked Questions about trigger-realtime-and-frontend

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

FAQPage Schema
How do I show live Trigger.dev run progress in React?▼

Use the useRealtimeRun hook from @trigger.dev/react-hooks with a scoped access token. It subscribes over the realtime API without polling or manual WebSocket setup, and skipColumns can exclude payload and output fields you do not render.

How to trigger a Trigger.dev task from the browser?▼

Mint a single-use trigger token on the backend with auth.createTriggerPublicToken("my-task") and pass it to useTaskTrigger or useRealtimeTaskTrigger. A read token from createPublicToken cannot trigger tasks and will fail.

useRealtimeRun vs useRun in Trigger.dev, which should I use?▼

useRealtimeRun is the realtime subscription hook for live state, while useRun is an SWR-based management-API hook that polls. For live progress use useRealtimeRun; if you use useRun, set refreshInterval to 0 to disable polling.

Why do Trigger.dev realtime subscriptions return 403 errors?▼

A scopeless token authorizes nothing, so every subscribe request is rejected. Create the token with explicit scopes, for example auth.createPublicToken({ scopes: { read: { runs: ["run_1234"] } } }).

Can I use Trigger.dev realtime hooks in Next.js server components?▼

No. Realtime and trigger hooks must run in client components. Add "use client" at the top of any component using useRealtimeRun, useRealtimeStream, or useTaskTrigger in the Next.js App Router.

When should I not use the Trigger.dev realtime frontend hooks?▼

Do not use them to author the backend task itself; streams.define and metadata.set belong to task authoring. Also avoid subscribing before a run handle exists—guard with enabled: !!handle so the subscription starts only after triggering returns a handle.

Related Skills

Explore More Software Engineering Skills→
trycompaitrycompai
1.8k

trigger-realtime

Subscribe to Trigger.dev run status, metadata, and stream data in real time.

Official
Advanced
DangJinDangJin
2

bi-builder

Generate BI dashboards from Prisma schemas using Next.js and Recharts.

Community
Advanced
inventashifinventashif

trigger-agents

Implements durable AI agent workflows on Trigger.dev using chat agents, sessions, and orchestration patterns.

Community
Advanced
trycompaitrycompai
1.9k

trigger-realtime

Implements real-time run subscriptions and streaming for Trigger.dev tasks in backend and React frontends.

Official
Intermediate