How do I install the Trigger Realtime And Frontend skill?

Run npx skillmds@latest add gabrielmoreira/trigger-realtime-and-frontend in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Trigger Realtime And Frontend safe to use?

This skill has not completed SkillMD's automated safety review yet. Capability flags: makes network calls, reads secrets. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Trigger Realtime And Frontend?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Trigger Realtime And Frontend free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Trigger Realtime And Frontend?

gabrielmoreira (@gabrielmoreira) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Trigger Realtime And Frontend by gabrielmoreira

Name: Trigger Realtime And Frontend
Rating: 4.5 (4 reviews)
Author: gabrielmoreira

Trigger Realtime And Frontend

Trigger.dev client/frontend surface: subscribe to runs in realtime (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.

gabrielmoreira Updated Sep 9, 2026 17 repo stars

File contents

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:

Skill: node_modules/@trigger.dev/sdk/skills/trigger-realtime-and-frontend/SKILL.md — run subscriptions, @trigger.dev/react-hooks, streams, frontend triggering, and scoped tokens.
Docs: the full, version-pinned docs ship bundled at 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.

Common mistakes

CRITICAL: Triggering from the browser with a Public Access Token. The read token from createPublicToken cannot trigger tasks.
- Wrong: useTaskTrigger("my-task", { accessToken: publicAccessTokenFromCreatePublicToken })
- Correct: mint a single-use Trigger Token with auth.createTriggerPublicToken("my-task") and pass that.
Token with no scopes. A scopeless token authorizes nothing, so every subscribe 403s.
- Wrong: await auth.createPublicToken()
- Correct: await auth.createPublicToken({ scopes: { read: { runs: ["run_1234"] } } })
Polling with useRun/SWR for live updates. useRun is the SWR-based management-API hook (not recommended for live state); set refreshInterval: 0 to stop polling if you do use it.
- Wrong: useRun(runId, { refreshInterval: 1000 }) to track progress
- Correct: useRealtimeRun(runId, { accessToken }) (no polling, no WebSocket setup)
Forgetting "use client". Realtime/trigger hooks cannot run in a server component.
- Wrong: a Next.js App Router server component using useRealtimeRun
- Correct: put "use client"; at the top of any component using these hooks.
Shipping payload/output you do not render.
- Wrong: useRealtimeRun(runId, { accessToken }) for a status badge (large payloads over the wire)
- Correct: useRealtimeRun(runId, { accessToken, skipColumns: ["payload", "output"] })
Subscribing before the handle exists.
- Wrong: useRealtimeRun(handle, { accessToken: handle?.publicAccessToken }) with no guard
- Correct: add enabled: !!handle so it subscribes only once the trigger returns a handle.

References

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).

---name: trigger-realtime-and-frontenddescription: Trigger.dev client/frontend surface: subscribe to runs in realtime (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.--- # 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: - **Skill:** `node_modules/@trigger.dev/sdk/skills/trigger-realtime-and-frontend/SKILL.md` — run subscriptions, `@trigger.dev/react-hooks`, streams, frontend triggering, and scoped tokens. - **Docs:** the full, version-pinned docs ship bundled at `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. ## Common mistakes 1. **CRITICAL: Triggering from the browser with a Public Access Token.** The read token from `createPublicToken` cannot trigger tasks. - Wrong: `useTaskTrigger("my-task", { accessToken: publicAccessTokenFromCreatePublicToken })` - Correct: mint a single-use Trigger Token with `auth.createTriggerPublicToken("my-task")` and pass that. 2. **Token with no scopes.** A scopeless token authorizes nothing, so every subscribe 403s. - Wrong: `await auth.createPublicToken()` - Correct: `await auth.createPublicToken({ scopes: { read: { runs: ["run_1234"] } } })` 3. **Polling with `useRun`/SWR for live updates.** `useRun` is the SWR-based management-API hook (not recommended for live state); set `refreshInterval: 0` to stop polling if you do use it. - Wrong: `useRun(runId, { refreshInterval: 1000 })` to track progress - Correct: `useRealtimeRun(runId, { accessToken })` (no polling, no WebSocket setup) 4. **Forgetting `"use client"`.** Realtime/trigger hooks cannot run in a server component. - Wrong: a Next.js App Router server component using `useRealtimeRun` - Correct: put `"use client";` at the top of any component using these hooks. 5. **Shipping `payload`/`output` you do not render.** - Wrong: `useRealtimeRun(runId, { accessToken })` for a status badge (large payloads over the wire) - Correct: `useRealtimeRun(runId, { accessToken, skipColumns: ["payload", "output"] })` 6. **Subscribing before the handle exists.** - Wrong: `useRealtimeRun(handle, { accessToken: handle?.publicAccessToken })` with no guard - Correct: add `enabled: !!handle` so it subscribes only once the trigger returns a handle. ## References 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).

Frequently asked questions