Streamed response rendering out of order

[chand1012]

Description

I'm using the latest ai and @ai-sdk/openai versions. I use openai, streamText, and createStreamableValue from the packages to generate a response based on user query. I copied the example from here and while it does work, most of the time I get some out of order responses, which also messes up my markdown formatter. Here is what a bad response looks like.

Code example

// server side code
'use server';
import { openai } from '@ai-sdk/openai';
import { streamText, type CoreMessage } from 'ai';
import { createStreamableValue } from 'ai/rsc';

import type { SearchResponse } from '@/lib/search';
import { read } from '@/lib/jina';

const systemPrompt = `REDACTED\n\n`;

const generate = async (query: string, content: string) => {
  'use server';

  const stream = createStreamableValue('');

  const messages = [
    { role: 'system', content: systemPrompt + content },
    {
      role: 'user',
      content: query,
    },
  ] as CoreMessage[];

  (async () => {
    const { textStream } = await streamText({
      messages,
      model: openai('gpt-4o'),
    });

    for await (const text of textStream) {
      stream.update(text);
    }

    stream.done();
  })();

  return stream.value;
};

export default generate;

// client side code
'use client';
import { useState } from 'react';
import useAsyncEffect from 'use-async-effect';
import { remark } from 'remark';
import html from 'remark-html';

import { Spoiler } from '@/components/spoiler';
import generate from '@/lib/generate';
import type { SearchResponse } from '@/lib/search';
import { readStreamableValue } from 'ai/rsc';

type AIResultsProps = {
  query: string;
  content: string;
};

export default function AIResults({ query, content }: AIResultsProps) {
  const [content, setContent] = useState('');
  const [aiResponse, setAiResponse] = useState('');

  useAsyncEffect(async () => {
    const output = await generate(query, content);
    for await (const delta of readStreamableValue(output)) {
      setContent((prev) => prev + delta);
    }
  }, []);

  useAsyncEffect(async () => {
    const result = await remark().use(html).process(content);
    setAiResponse(result.toString());
  }, [content]);

  return (
    <Spoiler
      dangerouslySetInnerHTML={
        aiResponse.length > 0 ? { __html: aiResponse } : undefined
      }
    />
  );
}

Additional context

It also seems to make duplicate requests according the logs but I'm not sure if that's related or not.