Streaming

Si indicas streaming: true en SessionConfig, recibirás las respuestas de Copilot como streaming. De base, tanto el modo stdio como el TCP ya se comportan como streaming. La diferencia es que empezarás a recibir ASSISTANT_MESSAGE_DELTA.

use Revolution\Copilot\Contracts\CopilotSession;
use Revolution\Copilot\Facades\Copilot;
use Revolution\Copilot\Types\SessionEvent;

$config = new SessionConfig(
    streaming: true,
);

Copilot::start(function (CopilotSession $session) {
    $session->on(function (SessionEvent $event): void {
        if ($event->isAssistantMessageDelta()) {
            // Con delta, el mensaje llega troceado. Sirve para mostrar el progreso. También puedes usar solo esto para completar la salida y conseguir una visualización fluida.
            echo $event->deltaContent();
        } elseif ($event->isAssistantMessage()) {
            // Cuando terminan los envíos troceados en delta, llega un ASSISTANT_MESSAGE con el mensaje completo.
            // Si hay un mensaje siguiente, vuelve a llegar con delta.
            // Para un único prompt pueden llegar varios mensajes, así que en modo streaming se van repitiendo varios deltas y un mensaje completo.
        } elseif ($event->isAssistantReasoningDelta()) {
            // El reasoning delta también llega troceado.
            echo $event->deltaContent();
        }
    });

    $session->sendAndWait(prompt: 'Tell me something about Laravel.');
}, config: $config);

Para conseguir una visualización fluida, muestra tal cual sin añadir saltos de línea.
No lo combines con spin() de Laravel Prompts porque rompe la visualización.

Patrones de uso concretos

Comando Artisan

Como arriba, escribe directamente con echo o con $this->output->write(). La visualización es igual que usando Copilot CLI directamente, por lo que resulta intuitivo. Con stream() de Laravel Prompts también puedes mostrarlo con efecto de fade-in.

use function Laravel\Prompts\stream;

Artisan::command('copilot:streaming {--resume=}', function () {
    $config = new SessionConfig(
        streaming: true,
    );

    Copilot::start(function (CopilotSession $session) {
        info('Starting Copilot with streaming: '.$session->id());

        $stream = stream();

        $session->on(function (SessionEvent $event) use ($stream) {
            if ($event->isAssistantMessageDelta()) {
                // Llega el mensaje troceado en delta. Se muestra de forma fluida con efecto de fade-in con stream() de Laravel Prompts.
                $stream->append($event->deltaContent());
            } elseif ($event->isIdle()) {
                // Cuando llega a idle, se cierra. Aunque envíes varios prompts en la misma sesión, funciona correctamente sin necesidad de volver a hacer `$stream = stream()`.
                $stream->close();
            }
        });

        while (true) {
            $prompt = text(
                label: 'Enter your prompt',
                placeholder: 'Ask me anything...',
                required: true,
                hint: 'Ctrl+C to exit',
            );

            $session->sendAndWait($prompt);
        }
    }, config: $config, resume: $this->option('resume'));
})->purpose('Copilot streaming');

Entrega como Server-Sent Events (SSE) en una página web

Forma con `response()->eventStream()`

response()->eventStream() se añadió justo antes del lanzamiento de Laravel 12. Este paquete solo soporta Laravel 12+, así que puedes usarlo.

Route::get('/copilot/sse', function () {
    return response()->eventStream(function () {
        yield from Copilot::stream(function (CopilotSession $session) {
            foreach ($session->sendAndStream('Tell me something about Laravel.') as $event) {
                if ($event->isAssistantMessageDelta()) {
                    yield $event->deltaContent();
                }
            }
        }, config: new SessionConfig(streaming: true));
    });
});

Route::get('/copilot', function () {
    return view('copilot');
});

Forma con `response()->stream()`

Route::get('/copilot/sse', function () {
    return response()->stream(function () {
        Copilot::start(function (CopilotSession $session) {
            $session->on(function (SessionEvent $event) {
                if ($event->isAssistantMessageDelta()) {
                    echo "event: update\n";
                    echo 'data: '.$event->deltaContent()."\n\n";
                    ob_flush();
                    flush();
                }
            });

            $session->sendAndWait('Tell me something about Laravel.');
        }, config: new SessionConfig(streaming: true));

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

Route::get('/copilot', function () {
    return view('copilot');
});

Ejemplo de código en el frontend

copilot.blade.php es solo para comprobar la visualización de forma sencilla. Para producción, si usas React o Vue, se recomienda usar el paquete npm oficial de Laravel: @laravel/stream-react o @laravel/stream-vue.

<html>
<body>

<script>
    const source = new EventSource('/copilot/sse');

    source.addEventListener('update', (event) => {
        if (event.data === '</stream>') {
            source.close();

            return;
        }

        console.log(event.data);
        document.getElementById("output").innerHTML += event.data;
    });
</script>

<h1>Copilot SSE Test</h1>
<div id="output"></div>
</body>
</html>

Entrega por WebSocket

Combinando las funciones de notificaciones y broadcasting de Laravel con Reverb, también puedes entregar los delta por WebSocket.

`wire:stream` de Livewire

Con Livewire también puedes mostrar streaming usando la directiva wire:stream.

<?php

use Livewire\Attributes\Layout;
use Livewire\Component;
use Revolution\Copilot\Contracts\CopilotSession;
use Revolution\Copilot\Enums\SessionEventType;
use Revolution\Copilot\Facades\Copilot;
use Revolution\Copilot\Types\SessionEvent;

new class extends Component
{
    public string $prompt = 'Tell me about Laravel Livewire.';
    public string $question = '';
    public string $answer = '';
    public ?string $sessionId = null;

    function submitPrompt(): void
    {
        $this->question = $this->prompt;

        $this->prompt = '';

        $this->answer = '';

        $this->js('$wire.copilot()');
    }

    public function copilot(): void
    {
        Copilot::start(function (CopilotSession $session) {
            $this->sessionId = $session->id();

            $session->on(SessionEventType::ASSISTANT_MESSAGE_DELTA, function (SessionEvent $event): void {

                $this->stream(
                    content: $event->deltaContent(),
                    to: 'answer',
                );
                $this->answer = $event->deltaContent();
            });

            $response = $session->sendAndWait(prompt: $this->question);
            $this->answer = $response->content();
        }, config: ['streaming' => true], resume: $this->sessionId);
    }
};
?>

<div>
    <div class="border border-gray-200 rounded-lg p-4 mb-6">
        @if ($question)
            <h3 class="font-extrabold mb-3">{{ $question }}</h3>

            <div wire:stream="answer">{{ $answer }}</div>
        @endif
    </div>

    <flux:input.group>
        <flux:input wire:model="prompt" placeholder="Ask Copilot"/>
        <flux:button wire:click="submitPrompt" icon="paper-airplane" icon:variant="outline"></flux:button>
    </flux:input.group>
</div>

Consulta la información más reciente en el repositorio de GitHub.

​Streaming

​Patrones de uso concretos

​Comando Artisan

​Entrega como Server-Sent Events (SSE) en una página web

​Forma con response()->eventStream()

​Forma con response()->stream()

​Ejemplo de código en el frontend

​Entrega por WebSocket

​wire:stream de Livewire

Streaming

Patrones de uso concretos

Comando Artisan

Entrega como Server-Sent Events (SSE) en una página web

Forma con `response()->eventStream()`

Forma con `response()->stream()`

Ejemplo de código en el frontend

Entrega por WebSocket

`wire:stream` de Livewire