How do I create a stream from scratch?

[umstek]

We know we can use APIs such as streamObject() and streamText() to stream an object or text from backend and consume them from the frontend with React using experimental_useObject() or useCompletion().

I want to create a stream from scratch in the backend, stream that, and consume that using the same React APIs from the frontend. Please note that this is different from sending additional data with the stream, although I might need to do that as well.

Few example use cases:

1. Generating a text/an array of objects -- possibly infinite -- partially, and storing that, to resume it later. This will be done using multiple messages in the backend in reality, but easier to be consumed with the useObject/useCompletion APIs.
2. Having an intermerdiate component that does some (post) processing (function, server, etc.)
3. Testing: deterministic testing of edge cases, and testing without a cost
4. Stream something other than the output from an LLM

I feel like something like that should already be available/or the streams are pretty close to NodeJS streams? But haven't figured it out yet. Any help/sample code/references is appreciated.

P.S.: Not using NextJS; assume express/react.

[lgrammel]

This might be close to what you want (but is intended for testing): https://sdk.vercel.ai/docs/ai-sdk-core/testing#simulate-data-stream-protocol-responses

[umstek]

Thanks.

While going through the source code, I found this file stream-text.ts, and looking at the contents I think together with the above, @ai-sdk/ui-utils helps. For example, formatDataStreamPart can be used to get serialize the chunks in the above example in some cases.

import { formatDataStreamPart } from "@ai-sdk/ui-utils";

const test = formatDataStreamPart("text", "Hello, world!");
console.log(test);

I also found out that something like this works (bun/express -- had to try this approach because bun failed to work with ai/test):

app.post("/api/readable-stream", async (req, res) => {
	res.setHeader("X-Vercel-AI-Data-Stream", "v1");
	res.setHeader("Content-Type", "text/plain; charset=utf-8");

	const chunks = [
		`0:"This"\n`,
		`0:" is an"\n`,
		`0:" example."\n`,
		`e:{"finishReason":"stop","usage":{"promptTokens":20,"completionTokens":50},"isContinued":false}\n`,
		`d:{"finishReason":"stop","usage":{"promptTokens":20,"completionTokens":50}}\n`,
	];

	for (const chunk of chunks) {
		await setTimeout(1000);
		res.write(chunk);
	}
	res.end();
});

I'll dig a bit deeper I guess.