Call the Laravel AI SDK from a Vue page

You want an AI-drafted reply on a page you already have, without leaking the provider key or building a chat app. The Laravel AI SDK does it in one agent class, one controller action and one Inertia form, and Pest can fake it.

People searching “Laravel AI SDK” and “Laravel AI Vue” want a reply on a page they already have. The Laravel AI SDK is the official package for that. It talks to OpenAI, Anthropic, Gemini, and the other supported providers through one PHP API. The Vue page only sends the note and renders the text that comes back.

Install the SDK#

composer require laravel/ai
php artisan vendor:publish --provider="Laravel\Ai\AiServiceProvider"
php artisan migrate

Publishing writes config/ai.php and the conversation migrations. The migrate step creates agent_conversations and agent_conversation_messages. You need those tables only when an agent stores a thread. A one-shot reply does not.

Set one provider key. The SDK reads it from the environment:

ANTHROPIC_API_KEY=
OPENAI_API_KEY=
GEMINI_API_KEY=

Leave the keys you do not use empty. Do not copy a key into resources/js.

One agent, one job#

php artisan make:agent DraftReply creates app/Ai/Agents/DraftReply.php. Keep the first agent small. This one rewrites a note. It does not browse, store a thread, or pick a model per request.

<?php

namespace App\Ai\Agents;

use Laravel\Ai\Contracts\Agent;
use Laravel\Ai\Promptable;

class DraftReply implements Agent
{
    use Promptable;

    public function instructions(): string
    {
        return 'Rewrite the note as one short reply. Do not add facts that are not in the note.';
    }
}

Prompt it from a controller that already belongs to the page. Validate the note. Cast the response to a string, which the docs do for a text agent. Send the visitor back to the form with that string in the session.

public function create(): Response
{
    return Inertia::render('replies/Create', [
        'draft' => session('draft'),
    ]);
}

public function store(Request $request): RedirectResponse
{
    $validated = $request->validate([
        'note' => ['required', 'string', 'max:2000'],
    ]);

    $draft = (new DraftReply)->prompt($validated['note']);

    return to_route('replies.create')->with('draft', (string) $draft);
}

prompt() accepts a provider and a model when you need to override the default:

use Laravel\Ai\Enums\Lab;

$draft = (new DraftReply)->prompt(
    $validated['note'],
    provider: Lab::Anthropic, 
    timeout: 120,
);

Show it on the Vue page#

The page is a normal Inertia form. useForm posts the note. The draft arrives as a prop after the redirect. Validation errors land on form.errors.note because the controller used $request->validate().

<script setup>
import { useForm } from "@inertiajs/vue3";

defineProps({
  draft: { type: String, default: "" },
});

const form = useForm({ note: "" });

function submit() {
  form.post("/replies");
}
</script>

<template>
  <form @submit.prevent="submit">
    <textarea v-model="form.note" name="note" maxlength="2000" />
    <p v-if="form.errors.note">{{ form.errors.note }}</p>
    <button type="submit" :disabled="form.processing">Draft a reply</button>
    <p v-if="draft">{{ draft }}</p>
  </form>
</template>

Fake the agent in a test#

use App\Ai\Agents\DraftReply;
use App\Models\User;

it('shows the drafted reply', function () {
    DraftReply::fake(['The invoice is three days late.']);

    $this->actingAs(User::factory()->create())
        ->post('/replies', ['note' => 'Invoice late by 3 days'])
        ->assertRedirect()
        ->assertSessionHas('draft', 'The invoice is three days late.');

    DraftReply::assertPrompted('Invoice late by 3 days');
});

A closure receives the AgentPrompt when the reply depends on the note. preventStrayPrompts() fails the test if something prompts an agent you did not fake.

What to leave out#

Do not add tools, structured output, or a second provider on the first page. A structured agent implements HasStructuredOutput and a schema() method, then the response is read like an array. That is the next change, after this page returns a string.

The stack choice for the page itself is still the one in Laravel and Vue in 2026. The form posts like the CRUD guide. The test style matches Test a Laravel and Vue app.

Recap#

• Key in .env, agent in PHP, reply as a prop.
• Validate and authenticate before you prompt.
• Pass only the validated note to prompt().
• Fake every agent in tests; add tools, threads and streams later.

FAQ#

Next steps#

• Stream an AI SDK reply without an Inertia visit
• Continue an AI SDK conversation you own
• Return a structured score from the AI SDK
• Fake an AI agent in a Pest test

Sources#

• Laravel 13: AI SDK
• Inertia v3: Forms