Frontend'de "Streaming" Yanıt Özelliği

Kullanıcıların yapay zekadan uzun yanıtlar alırken dakikalarca beklemesi yerine, yanıtın üretildiği anda ekrana "akmasını" sağlamak modern bir standarttır. Bunu sağlamak için genellikle Server-Sent Events (SSE) veya ReadableStream kullanılır.

React ile Uygulama Örneği

Aşağıdaki örnekte fetch API'sinin stream özelliğini kullanarak veriyi parçalı olarak alıyoruz.

const [response, setResponse] = useState("");

const handleAskAI = async () => {
    const res = await fetch("/api/generate", {
        method: "POST",
        body: JSON.stringify({ prompt: "Merhaba!" })
    });

    const reader = res.body.getReader();
    const decoder = new TextDecoder();

    while (true) {
        const { done, value } = await reader.read();
        if (done) break;
        
        const chunk = decoder.decode(value);
        setResponse((prev) => prev + chunk);
    }
};

Vue 3 (Composition API) Örneği

Vue tarafında ref kullanarak gelen veri parçalarını anlık olarak DOM'a yansıtabiliriz.

<script setup>
import { ref } from 'vue';

const aiText = ref("");

async function fetchStream() {
  const response = await fetch('/api/ai-stream');
  const reader = response.body.getReader();
  const decoder = new TextDecoder();

  while (true) {
    const { done, value } = await reader.read();
    if (done) break;
    aiText.value += decoder.decode(value, { stream: true });
  }
}
</script>