inngest-realtime

Stream live updates from Inngest v4 durable functions to React UIs via typed channels.

Updated Feb 27, 2026
One-click install
npx skills add https://github.com/firstaxel/neon --skill inngest-realtime-firstaxel
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: inngest-realtime
Source: https://github.com/firstaxel/neon/tree/main/.agents/skills/inngest-realtime
Command: npx skills add https://github.com/firstaxel/neon --skill inngest-realtime-firstaxel

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires inngest, zod.

What problem does it solve? Durable Inngest workflows run in the background with no built-in way to show progress in the UI. This Skill implements Inngest v4 native realtime so users can watch order statuses animate, AI agents stream tokens, logs tail live, and human-in-the-loop approvals publish prompts and wait for replies. ## Core Features & Use Cases - Typed Channels and Topics: Define zod-validated channels (static or parametric) shared between server and client for type-safe publish/subscribe. - Durable Publishing: Use step.realtime.publish outside steps for retry-safe, deduplicated publishes, and inngest.realtime.publish inside step.run for mid-step streaming. - React Subscription: Mint subscription tokens via Next.js Server Actions and consume streams with the useRealtime hook, or use the lower-level subscribe() API and SSE route handlers for custom transports. - Use Case: Build a live order status page where each fulfill-order step publishes progress to a per-order channel, and a React client subscribes with a token to render step updates as they happen. ## Quick Start Set up an Inngest v4 realtime channel for my order workflow, publish step progress from the function, and subscribe to it from a React component using the useRealtime hook.

Frequently Asked Questions about inngest-realtime

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

FAQPage Schema
How do I stream Inngest function progress to a React UI?▼

Define a typed channel with channel() from inngest/realtime, publish updates with step.realtime.publish from your function, mint a subscription token in a Next.js Server Action with getClientSubscriptionToken, and consume the stream with the useRealtime hook from inngest/react.

Should I use @inngest/realtime or inngest/realtime with Inngest v4?▼

Use the inngest/realtime SDK subpath with Inngest v4. The standalone @inngest/realtime package is v3-only and causes TypeError: Cls is not a constructor, 401 token errors, and middleware type failures when mixed with inngest@4.x.

What is the difference between step.realtime.publish and inngest.realtime.publish?▼

Use step.realtime.publish outside steps so the publish is wrapped in its own durable, retry-safe step. Inside a step.run callback, use inngest.realtime.publish since you are already inside a memoized step and wrapping would create a step within a step.

Why does my Inngest realtime subscription return 401 in local development?▼

Local realtime requires INNGEST_DEV=1 in .env.local; without it the SDK assumes cloud mode and demands signing keys, causing 401s on token requests. Restart the dev server after editing .env.local since Next.js does not hot-reload environment changes.

Why can't I return getSubscriptionToken directly from a Next.js server action?▼

getSubscriptionToken returns a ChannelInstance containing zod schema methods, and Next.js cannot serialize class instances across the server-action boundary. Strip it to primitives (channel name, topics, key, apiBaseUrl), or use getClientSubscriptionToken from inngest/react which returns a serialization-safe shape.

How do I build a human-in-the-loop approval flow with Inngest realtime?▼

Publish a prompt containing a unique confirmationId via step.realtime.publish, then call step.waitForEvent with a timeout and a match expression on that confirmationId. The client renders the approval UI and sends the matching event back to resume the workflow.