Streaming
Stream content in real-time for AI responses, progress updates, and live content.
Basic Usage
Component
public function generateResponse()
{
foreach ($this->aiStream() as $chunk) {
$this->stream(
to: 'response',
content: $chunk
);
}
}
Template
<button v-click:generateResponse>
Generate
</button>
<div v-stream="response">
<!-- Content streams here -->
</div>Stream Methods
// Append content
$this->stream('response', 'New content');
// Replace content
$this->stream('response', 'Replaced content', replace: true);
// Clear target
$this->stream('response', '', replace: true);v-stream Directive
<!-- Basic stream target -->
<div v-stream="myTarget"></div>
<!-- Multiple targets -->
<div v-stream="header"></div>
<div v-stream="content"></div>
<div v-stream="footer"></div>AI Integration Example
use OpenAI\Laravel\Facades\OpenAI;
public function askAI()
{
$stream = OpenAI::chat()->createStreamed([
'model' => 'gpt-4',
'messages' => [
['role' => 'user', 'content' => $this->question]
],
]);
foreach ($stream as $response) {
$text = $response->choices[0]->delta->content ?? '';
$this->stream('answer', $text);
}
}JavaScript API
// Listen for stream events
livue.stream('response', (content) => {
console.log('Received:', content);
});