trigger-realtime — Claude Code skill: subscribe to task runs in real time
A skill to subscribe to Trigger.dev task runs from the browser, render progress and data streams in React, and fire tasks with scoped tokens. Use it to wire live status badges, progress bars, or approval forms into your UI.
npx skills add triggerdotdev/skills --skill trigger-realtime -a claude-codeWhat trigger-realtime does
trigger-realtime is the frontend layer of Trigger.dev. It provides React hooks to subscribe to a running task's status, read data streams (text, AI responses), send data back into a task, and fire tasks from the browser. The primary hook, useRealtimeRun, subscribes to a task by ID and returns its status, metadata, and errors. Additional hooks cover firing tasks from a button (useTaskTrigger), combining trigger and subscribe in one (useRealtimeTaskTrigger), and reading streams separately (useRealtimeStream).
All hooks come from @trigger.dev/react-hooks and work with Next.js, Remix, and plain React. Before using them, mint a scoped token on the backend with auth.createPublicToken (read-only) or auth.createTriggerPublicToken (for firing), pass it to the frontend, and pass it to the hook as accessToken. Tokens expire after 15 minutes by default.
This skill is for the frontend only; defining tasks and streams (streams.define, metadata.set) is trigger-tasks territory. If you only need the status without the payload, skip columns with skipColumns: ["payload", "output"] to reduce bandwidth.
What it helps with
- display live task progress in your UI without polling
- render a status badge or progress bar that updates in real time
- trigger a task from a browser button
- consume and display a text or AI stream in a React component
- send user input back into a running task
Example prompts for the agent
- Show the progress of task run_1234 with accessToken in a status component
- Create a button that fires task my-task from the browser with parameters { foo: "bar" }
- Render the stream from key ai-output into a component with task ID runId and accessToken
How to install trigger-realtime
1Skills CLI (Vercel)
npx skills add triggerdotdev/skills --skill trigger-realtime -a claude-code2Manually: put the files in place
~/.claude/skills/trigger-realtime/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/trigger-realtime/
1Skills CLI (Vercel)
npx skills add triggerdotdev/skills --skill trigger-realtime -a codex2Manually: put the files in place
.agents/skills/trigger-realtime/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add triggerdotdev/skills --skill trigger-realtime -a cursor2Manually: put the files in place
.cursor/skills/trigger-realtime/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install triggerdotdev/skills trigger-realtime2Manually: put the files in place
.github/skills/trigger-realtime/SKILL.md1Skills CLI (Vercel)
npx skills add triggerdotdev/skills --skill trigger-realtime -a gemini-cli2Platform CLI
gemini skills install https://github.com/triggerdotdev/skills --path trigger-realtimeManually: put the files in place
.devin/skills/trigger-realtime/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add triggerdotdev/skills --skill trigger-realtime -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about trigger-realtime
How do I install trigger-realtime in Claude Code?
Run npx skills add triggerdotdev/skills --skill trigger-realtime -a claude-code in the terminal. The skill loads into ~/.claude/skills/trigger-realtime/SKILL.md.
What does trigger-realtime do?
It gives you React hooks to subscribe to Trigger.dev task runs from your frontend, read real-time streams, and fire tasks from the browser. Without it, you'd write WebSocket listeners and auth logic yourself.
Do I use a Public Access Token or a Trigger Token?
For subscribing to a task (useRealtimeRun, useRealtimeStream), use a Public Access Token from auth.createPublicToken. For firing a task from the browser (useTaskTrigger), use a Trigger Token from auth.createTriggerPublicToken.
