Add ai-streaming-ndjson example#1488
Open
guuszz wants to merge 1 commit into
Open
Conversation
This example demonstrates progressive token-by-token streaming from a
Next.js Route Handler to the browser using NDJSON (newline-delimited JSON)
over a ReadableStream — a simpler alternative to Server-Sent Events when
you need POST with a body.
What's included:
- app/api/stream/route.ts: ReadableStream writing one JSON event per line
with custom types (meta, chunk, done, error). Edge-compatible.
- app/page.tsx: client component that reads the stream via getReader() +
TextDecoder, parses NDJSON line-by-line, and renders chunks progressively
with a live progress bar and typing cursor effect.
- README.md: explains the why (EventSource doesn't accept POST + body),
the protocol, server/client snippets, when to use vs WebSockets/SSE,
and X-Accel-Buffering header notes.
The endpoint accepts { prompt } and echoes it back word-by-word with a
40ms delay to simulate token generation — in a real app, replace the loop
with your LLM SDK's stream iterator (OpenAI/Anthropic/Gemini all have this).
Why this matters: many AI integrations need a POST with a long prompt or
context document, but EventSource is GET-only. Most tutorials show SSE
demos that conveniently fit in a query string. This example fills the
gap with a production-tested pattern.
guuszz
requested review from
dominiksipowicz,
goncy,
lfades,
lpalmes and
okbel
as code owners
Contributor
|
@guuszz is attempting to deploy a commit to the Vercel Examples Team on Vercel. A member of the Team first needs to authorize it. |
Contributor
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
|
Deployment failed with the following error: Learn More: https://vercel.com/docs/concepts/projects/project-configuration |
![vercel[bot]](https://avatars.githubusercontent.com/in/8329?s=60&v=4){kind=small}
| const tokens = prompt | ||
| .split(/(\s+)/) | ||
| .filter((t) => t.length > 0) | ||
| .map((t, i, arr) => (i < arr.length - 1 && !arr[i + 1].match(/^\s/) ? t + ' ' : t)) |
Contributor
There was a problem hiding this comment.
Suggested change
| .map((t, i, arr) => (i < arr.length - 1 && !arr[i + 1].match(/^\s/) ? t + ' ' : t)) |
Tokenization logic corrupts whitespace by doubling all spaces in the streamed output.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What is this?
A new example under
solutions/ai-streaming-ndjsonthat demonstrates progressive token-by-token streaming from a Next.js Route Handler to the browser using NDJSON (newline-delimited JSON) over aReadableStream.It fills a gap: most streaming examples use Server-Sent Events, but
EventSourceisGET-only and locked totext/event-stream. For many real-world cases (AI completions with long prompts, long-running ops with progress, multi-event responses) you want aPOSTwith a body — and NDJSON delivers the same UX with less ceremony.What's included
app/api/stream/route.ts—ReadableStreamwriting one JSON event per line with typed events (meta,chunk,done,error). Edge-compatible.app/page.tsx— client component that reads viagetReader()+TextDecoder, parses NDJSON line-by-line, and renders chunks progressively with a live progress bar and typing cursor.README.md— explains the why (EventSource limitations), the protocol, server/client snippets, when to use vs WebSockets/SSE, and theX-Accel-Bufferingheader.How to test
pnpm installpnpm devand open http://localhost:3000