How do I apply html tags and css to API response in realtime

this may be a dumb question. But I am currently streaming Claudes API response to the front end on one of my applications, and I was wondering the best way to apply styling to the text in real time without the user seeing any html tags being typed out?

I am currently working with inertia/vue/tailwindcss, this is my current html

      <div v-if="formSubmitted" class="relative w-1/2 mx-auto mt-4">
        <div id="chat-content" ref="chatContent" class="flex-1 overflow-y-auto">
          <div v-html="allMessages" class="chat-messages"></div>
          <div class="edit-icon absolute top-0 -right-14 mt-2 mx-2 p-2 hover:bg-gray-100 rounded-xl cursor-pointer">
            <font-awesome-icon :icon="['fal', 'pen-to-square']" class="h-6 w-6" />
          </div>
          <div class="download-icon absolute top-10 -right-14 mt-2 mx-2 p-2 hover:bg-gray-100 rounded-xl cursor-pointer">
            <font-awesome-icon :icon="['fasl', 'download']" class="h-6 w-6" />
          </div>
        </div>
      </div>

and my relevant script

const allMessages = ref('');
function triggerStreaming(url) {
  stillWriting.value = true;
  allMessages.value = '';
  eventSource.value = new EventSource(url);

  eventSource.value.addEventListener("update", (event) => {
    if (event.data === "<END_STREAMING_SSE>") {
      eventSource.value.close();
      stillWriting.value = false;
      return;
    }

    const data = JSON.parse(event.data);
    if (data.text) {
      addMessage(data.text);
    }
  });

  eventSource.value.addEventListener("error", (event) => {
    addMessage('An error occurred. Try again later.');
    if (eventSource.value) {
      eventSource.value.close();
    }
  });
}

onBeforeUnmount(() => {
  if (eventSource.value) {
    eventSource.value.close();
  }
});

not sure if this should be handled better in the prompt, backend, or front end. The problem I am facing is it is sent in chunks.