DEV Community

Cover image for Making your CV talk 🤖 How to read text stream on client using Next JS?
Nikola Mitic
Nikola Mitic

Posted on

Making your CV talk 🤖 How to read text stream on client using Next JS?

I have wrote a function which takes answer and callbacks to which UI can listen to and react as it finds fit.

Nothing about this is Next JS related, this is pure React JS TS solution, so you can use it in your React JS code base as well.

Here are the steps:

  1. Make request to fetch stream - code here: https://github.com/nmitic/nikola.mitic.dev/blob/745b103829874d0bb7b19d1668d793b99e23653b/components/InterviewerAI/InterviewerAI.func.ts#L15-L34
  2. Get stream reader - code here:https://github.com/nmitic/nikola.mitic.dev/blob/745b103829874d0bb7b19d1668d793b99e23653b/components/InterviewerAI/InterviewerAI.func.ts#L52-L58
  3. Iterate over he stream and call a function on each iteration so UI can listen and react to it - code here: https://github.com/nmitic/nikola.mitic.dev/blob/745b103829874d0bb7b19d1668d793b99e23653b/components/InterviewerAI/InterviewerAI.func.ts#L64-L76

Full implementation of answerQuestionWithStream:



export const answerQuestionWithStream = async ({
  onStreamStart,
  onStream,
  onStreamDone,
  onError,
  question,
}: {
  onStreamStart: () => void;
  onStream: (chunk: string) => void;
  onStreamDone: (answer: string) => void;
  onError: () => void;
  question: string;
}) => {
  try {
    const demo = process.env.NEXT_PUBLIC_AI_DEMO === "true";

    const reader = await getStreamReader(demo, question);

    if (!reader) {
      console.error("Stream reader undefined");

      return;
    }

    const textDecoder = new TextDecoder();

    onStreamStart();

    // Keeps track of streamed answer and will evaluate to full once streaming is done
    let fullDecodedAnswer = "";

    while (true) {
      const { done, value } = await reader.read();
      if (done) {
        break;
      }
      const decodedText = textDecoder.decode(value);

      fullDecodedAnswer = fullDecodedAnswer + decodedText;
      onStream(decodedText);
    }
    onStreamDone(fullDecodedAnswer);
  } catch (error) {
    console.error(error);
    // indicated to the user the error has happen
    onError();
  }
};

---

❤️If you would like to stay it touch please feel free to connect❤️

1. [X](https://x.com/mitic_dev)
2. [Linkedin](https://www.linkedin.com/in/nikola-mitic-6a5b11119/)
3. nikola.mitic.dev@gmail.com

---
Enter fullscreen mode Exit fullscreen mode

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

Top comments (0)

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up