The Complete Production SOP: How to Deploy and Run Livewire 3 Dynamic Frontend Interfaces in Blade in Autonomous AI Agents

---
name: "laravel-livewire-3-reactive-components"
description: "Build reactive, dynamic user interfaces without writing JavaScript using Laravel Livewire 3."
metadata:
  author: "Caleb Porzio"
  version: "1.0.0"
  runtime_compatibility:
    - "codex"
    - "claude-code"
    - "cursor"
    - "windsurf"
triggers:
  - "create livewire 3 component"
  - "wire:model live livewire"
  - "lazy load component livewire"
permissions:
  fs_read: true
  fs_write: "workspace"
  shell_exec: false
  net_access: false
---

<?php

return [
    'class_namespace' => 'App\\Livewire',
    'view_path' => resource_path('views/livewire'),
    'layout' => 'components.layouts.app',
    'lazy_back_end' => true,
];

<?php

namespace App\Livewire;

use Livewire\Component;
use Livewire\Attributes\Lazy;
use App\Models\User;
use Illuminate\Contracts\View\View;

#[Lazy]
class UserDirectory extends Component
{
    public string $search = '';

    public function placeholder(): View
    {
        return view('livewire.placeholders.skeleton');
    }

    public function render(): View
    {
        return view('livewire.user-directory', [
            'users' => User::query()
                ->when($this->search, fn ($q) => $q->where('name', 'like', "%{$this->search}%"))
                ->paginate(10),
        ]);
    }
}

<?php

use App\Livewire\UserDirectory;
use App\Models\User;
use Livewire\Livewire;

it('filters users reactively via search property', function () {
    User::factory()->create(['name' => 'Taylor Otwell']);
    User::factory()->create(['name' => 'Caleb Porzio']);

    Livewire::test(UserDirectory::class)
        ->set('search', 'Caleb')
        ->assertSee('Caleb Porzio')
        ->assertDontSee('Taylor Otwell');
});