Real-Time UI with Zero Effort: Mastering usePoll in Inertia 3.x

AI agents don't always respond instantly. Complex reasoning takes time. In a standard web app, this creates a bottleneck. Users stare at static screens waiting for a response.

Laravel and Inertia 3.x solve this. The new usePoll hook allows you to build real-time interfaces without manual state management. It is a game-changer for AI-powered features.

The Problem with Async AI

Most AI tasks are long-running. You send a prompt to an LLM or an agent. The server starts the process. In a traditional php web framework, you might use WebSockets or polling.

WebSockets are powerful but require extra infrastructure. Polling is often simpler. Until now, polling in Inertia required manual setInterval calls and router reloads. It was messy.

Inertia 3.x changes that. It introduces a dedicated usePoll hook. It handles the timing, the background throttling, and the state updates for you.

Understanding usePoll

The usePoll hook re-requests page props on a specific interval. It keeps your data fresh.

import { usePoll } from '@inertiajs/vue3'

usePoll(2000, { only: ['status'] })

This one line does a lot. Every two seconds, Inertia fetches the status prop from your controller. It skips all other data. This keeps the request small and fast.

Intelligent Throttling

Browsers are smart about resource usage. Inertia 3.x is too. If a user switches tabs, usePoll automatically slows down. It reduces the request frequency by 90%.

This saves server resources. You can override this with keepAlive: true if the task is critical. Most AI progress bars don't need it.

Integrating with Laravel AI SDK

The Laravel AI SDK is the perfect companion for this. It provides a unified way to interact with providers like OpenAI and Anthropic.

When you start an AI task, you usually dispatch a job. You need to know when that job finishes.

The Controller Logic

First, define your routes. You need an endpoint to build rest api with php that returns the task status.

public function status(string $taskId)
{
    $task = AI::task()->find($taskId);

    return Inertia::render('AI/Monitor', [
        'status' => $task->status, // 'running', 'completed', 'failed'
        'output' => $task->output,
    ]);
}

The AI SDK makes it easy to track these tasks. You don't need to write custom database logic for every prompt.

The Frontend Implementation

On the frontend, you use the status prop to control the polling.

const props = defineProps({
    status: String,
    output: Object
})

const { stop } = usePoll(3000, { 
    only: ['status', 'output'] 
})

// Stop once the AI is done
watch(() => props.status, (val) => {
    if (val === 'completed') stop()
})

This creates a seamless flow. The user triggers an AI action. The page starts polling. The UI updates as the AI thinks. The polling stops once the result is ready.

Advanced Control: The Request Modes

Inertia 3.x offers three concurrency modes for usePoll. Choosing the right one is vital for performance.

• overlap: The default. It fires the next request even if the last one hasn't finished.
• cancel: Aborts the current request if a new one starts.
• rest: Waits for the previous request to finish before starting the interval timer.

For AI status updates, use rest. If your AI agent is slow, you don't want to stack five pending requests. rest ensures your server only handles one status check at a time per user.

Optimizing with Laravel Boost

Performance matters when you're polling. If you have thousands of users checking AI status, your server load can spike.

Laravel Boost helps here. It optimizes your internal application logic. Combined with php developer tools like Octane, your polling endpoints become incredibly light.

Using only in your Inertia request is the first step. Laravel Boost ensures the backend processing for those specific props is as fast as possible. It avoids re-running heavy database queries or auth checks that aren't needed for a simple status update.

Real-World AI Workflows

Think about a document summarizer.

1. The user uploads a 50-page PDF.
2. The Laravel AI SDK starts a background agent.
3. The Inertia page uses usePoll to check the progress.
4. The UI shows "Analyzing page 12 of 50...".
5. The AI finishes. Polling stops. The summary appears.

This feels like a real-time app. But it uses standard HTTP requests. No WebSockets. No complex server-side events. Just clean, declarative code.

Summary of Changes

If you are upgrading from Inertia 2.x, keep these changes in mind:

• Added: The usePoll hook.
• Added: Concurrency modes (overlap, cancel, rest).
• Improved: Automatic background tab throttling.
• Fixed: Race conditions in manual polling implementations.

Inertia 3.x and the Laravel AI SDK represent the next wave of developer productivity. They remove the friction between complex backend logic and reactive frontend UI.

We'd love to hear how you're using these tools. Building an AI-powered chatbot? A content generator? Your story belongs here.