How do I display all thoughts on the frontend using SSE with Laravel and Vue.js?

Question

I'm working on a project where I'm trying to implement a model context protocol server for my LLM to use called server-sequential-thinking. I have a chat area where a user can enter a prompt and the LLM I am using will use the tools from the server to give a detailed response however my frontend is only displaying the first thought then completing. I added a console.log() on the frontend and confirmed only the first thought is received.

This is my Laravel backend code:

return response()->stream(function () use ($conversation) {
            $stream = Prism::text()
                ->using(Provider::Anthropic, 'claude-3-7-sonnet-latest')
                ->withMessages($conversation)
                ->withTools([
                    ...Relay::tools('sequential-thinking'),
                ])
                ->asStream();

            foreach ($stream as $response) {
                if($response->chunkType === ChunkType::ToolCall){
                    echo "event: toolcall\n";
                    echo "data: " . json_encode($response->toolCalls, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) . "\n\n";
                }
                elseif($response->chunkType === ChunkType::ToolResult){
                    echo "event: toolresult\n";
                    echo "data: " . json_encode($response->toolResults, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) . "\n\n";
                }
                elseif($response->chunkType === ChunkType::Text){
                    echo "data: " . str_replace("\n", "\\n", $response->text) . "\n\n";     
                }
                ob_flush();
                flush();
            }

            echo "data: complete\n\n";
            ob_flush();
            flush();
        }, 200, [
            'Content-Type' => 'text/event-stream',
            'Cache-Control' => 'no-cache',
            'Connection' => 'keep-alive',
            'X-Accel-Buffering' => 'no',
        ]);

This is the frontend where I implemented an event listener:

source.addEventListener('toolresult', (e)=>{
            const toolResult = JSON.parse(e.data);         
            const [{args: {thought, thoughtNumber, totalThoughts}}] = toolResult;
            console.log(`Thought: ${thought}\nThought Number: ${thoughtNumber}\nTotal Thoughts: ${totalThoughts}`);
            prismText.value += thought;
            console.log("Tool result: ",toolResult)
        })

Here is what the browser console looks like when I ask a prompt

I am using Prism Relay to add the MCP server

How can I properly have all thoughts displayed on the frontend?

For this question please use gpt or something ,exactly the best answer is there (I checked) . I have a little confusion here(Not related to your question) .Why do you implemented a sse .Is this a one way communication only ? — Prabath Abeysinghe
– Prabath Abeysinghe, Commented Oct 19 at 18:16

Sanxofon · Accepted Answer · 2025-10-23 21:16:46Z

2

Nothing is broken in your Laravel stream—Prism could be pushing every single thought. Problem is, your JS is doing arr[0] and walking away, so the rest of the queue is just standing there like extra papad at a wedding buffet.

to fix this you just have to run through the whole array.

This kind of seems to me like a "vibe question" ;)

answered Oct 23 at 21:16

Sanxofon

99112 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How do I display all thoughts on the frontend using SSE with Laravel and Vue.js?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related