triggerdotdev/trigger-realtime-and-frontend
> (runs.subscribeToRun and the @trigger.dev/react-hooks hook useRealtimeRun), consume metadata and AI/text streams in React (useRealtimeStream), trigger tasks from the browser (useTaskTrigger, useRealtimeTaskTrigger), and mint scoped frontend credentials with auth.createPublicToken / auth.createTriggerPublicToken. Load when wiring a frontend (React/Next.js/Remix) or backend-for-frontend to show live run progress, status badges, token streams, trigger buttons, or wait-token approval UIs. NOT for writing the backend task itself (streams.define / metadata.set is trigger-authoring-tasks territory); this is the consumer side.
npx skills add https://github.com/triggerdotdev/trigger.dev --skill trigger-realtime-and-frontend
The full, version-pinned reference ships inside your installed @trigger.dev/sdk. Read it before writing code — it always matches the SDK version in this project, so it never drifts:
node_modules/@trigger.dev/sdk/skills/trigger-realtime-and-frontend/SKILL.md — run subscriptions, @trigger.dev/react-hooks, streams, frontend triggering, and scoped tokens.node_modules/@trigger.dev/sdk/docs/realtime/; the skill above lists the exact pages it draws from in its sources: frontmatter. Grep for a hook, e.g. grep -rl "useRealtimeRun" node_modules/@trigger.dev/sdk/docs/.If those paths don't exist, @trigger.dev/sdk isn't installed yet — install it first. In a non-hoisted layout, resolve the package with node -p "require.resolve('@trigger.dev/sdk/package.json')" and read skills/ + docs/ beside it.
read token from createPublicToken cannot trigger tasks.
useTaskTrigger("my-task", { accessToken: publicAccessTokenFromCreatePublicToken })auth.createTriggerPublicToken("my-task") and pass that.await auth.createPublicToken()await auth.createPublicToken({ scopes: { read: { runs: ["run_1234"] } } })useRun/SWR for live updates. useRun is the SWR-basedmanagement-API hook (not recommended for live state); set refreshInterval: 0
to stop polling if you do use it.
useRun(runId, { refreshInterval: 1000 }) to track progressuseRealtimeRun(runId, { accessToken }) (no polling, no WebSocket setup)"use client". Realtime/trigger hooks cannot run in a server component.useRealtimeRun"use client"; at the top of any component using these hooks.payload/output you do not render.useRealtimeRun(runId, { accessToken }) for a status badge (large payloads over the wire)useRealtimeRun(runId, { accessToken, skipColumns: ["payload", "output"] })useRealtimeRun(handle, { accessToken: handle?.publicAccessToken }) with no guardenabled: !!handle so it subscribes only once the trigger returns a handle.Sibling skills: trigger-authoring-tasks (the task side: streams.define(), metadata.set(), wait.createToken), trigger-authoring-chat-agent and trigger-chat-agent-advanced (chat agents build on these realtime streams).
Take triggerdotdev/trigger-realtime-and-frontend from the repository into ~/.claude/skills for personal
use, or into .claude/skills inside a project.
The agent identifies a skill by the name field in its header. Two skills with the
same name cannot sit side by side — one of them will be ignored.