How to do streaming with next-safe-action

[nikitavoloboev]

Was told above and want to implement this in next-safe-action.

Discussion in Discord.

Docs: https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations#forms

onChange={async (e: React.ChangeEvent<HTMLInputElement>) => {
	e.stopPropagation()
	if (e.target.files && e.target.files[0]) {
		try {
			local.aiDescriptionLoading.set(true)
			const uploadedFile = e.target.files[0]
			local.uploadedImage.set(uploadedFile)
			const base64Image = await fileToBase64(uploadedFile)
			const resp = await describeImageAction({
				imageAsBase64: base64Image,
			})
			if (resp.data) {
				// @ts-ignore
				local.aiDescription.set(resp.data)
			}
			console.log(resp.data, "resp")
			local.aiDescriptionLoading.set(false)
		} catch (err) {
			local.aiDescriptionLoading.set(false)
			console.log(err)
		}
	}
}}

My code now for input. await describeImageAction is the action. That looks like:

const describeImageSchema = z.object({
	imageAsBase64: z.string(),
})
export const describeImageAction = actionClient
	.schema(describeImageSchema)
	.action(async ({ parsedInput: { imageAsBase64 } }) => {
		try {
			// const response = await openai.chat.completions.create({
			// 	model: "gpt-4o",
			// 	messages: [
			// 		{
			// 			role: "user",
			// 			content: [
			// 				{ type: "text", text: "What’s in this image?" },
			// 				{
			// 					type: "image_url",
			// 					image_url: {
			// 						url: imageAsBase64,
			// 					},
			// 				},
			// 			],
			// 		},
			// 	],
			// })
			// return response.choices[0]
			await new Promise((resolve) => setTimeout(resolve, 3000))
			return "The image shows a serving of French toast topped with banana slices, blueberries, and a drizzle of syrup, likely maple syrup. The dish appears to be garnished with a light dusting of powdered sugar and is presented on a dark plate. The layers of the toast and the toppings look visually appealing and appetizing."
		} catch (err) {
			return { failure: "Describe image error:", errorDetails: err.message }
		}
	})

I want to store the image that gets passed and save it in my db but I want to do it using this streaming approach.

How can I do this? Thanks.

[TheEdoRan]

Do Next.js/React docs talk about streaming in Server Actions? next-safe-action is simply a library built around them so there's not much it can do to change the internal framework behavior.

Apparently there's a function called experimental_StreamingReactResponse() that enables streaming responses, but I'm not familiar with it.

[nikitavoloboev]

I do above now and I think that's enough to achieve streaming with next.js. If its in FormData.