Vercel AI SDK & Prism | How to connect the pieces

[JorgeRui]

Hello!

I really love the package for the back-end, but in the front-end I would LOVE to utilise Vercel AI SDK package, which comes with a preset of already-tested / build hooks and components.

But I don't know how to face an issue. With Vercel AI SDK package, the useMessage hook sends a JSON that looks like:

{
	"id": "CuwuIFH0vQiuEepW",
	"messages": [
		{
			"role": "user",
			"parts": [
				{
					"type": "text",
					"text": "Hello!"
				}
			],
			"id": "wxTWpMq5yiBXEhPO"
		}
	],
	"trigger": "submit-message"
}

And the parts keep expanding with new items as the conversation goes on. If I were to build like a simple /chat endpoint, what's the best way to integrate the best of both worlds?

[sixlive]

Have you reviewed this section of the docs? https://prismphp.com/core-concepts/streaming-output.html#vercel-ai-sdk-integration

[JorgeRui]

Hey @sixlive ! Yes, thanks for your reply!!

I did reviewed it, and I'm unsure if it's not up-to-date with V6, as now they require the "DefaultChatTransport"

Some things I needed to do to make the front-end talk with the back-end was:

1. Add the DefaultChatTransport
2. Add also the XSRF header (to prevent 401s from Laravel)

    const { messages, sendMessage, status, error } = useChat({
        transport: new DefaultChatTransport({ api: chat.url(), headers: xsrf_header }),
    });

What I'm unsure now how to do, is connecting it to a Laravel back-end controller, as the useChat hook sends the following payload, which is dynamic on every message, and the messages array is really the key part.

So for example:

1. How to get the last message
2. How to handle the different 'parts'

I'm unsure if there's like a Laravel Prism request that I could utilise for validating this, or some helpers for getting it!

{
	"id": "CuwuIFH0vQiuEepW",
	"messages": [
		{
			"role": "user",
			"parts": [
				{
					"type": "text",
					"text": "Hello!"
				}
			],
			"id": "wxTWpMq5yiBXEhPO"
		}
	],
	"trigger": "submit-message"
}

Again thanks for the help, and amazing library!!

[sixlive]

Hey @JorgeRui - I'm running this exact stack in production (Prism + Vercel AI SDK v6 + Laravel + Inertia/React), so hopefully this helps clear things up.

The Key Insight

Prism's asDataStreamResponse() speaks the exact same data stream protocol that the Vercel AI SDK expects. So the wiring is actually straightforward once you know the pieces.

Backend: The Controller

The AI SDK sends a messages array where each message has a role and parts array. You don't need to process the full message history on every request — just extract what you need from the latest message:

class StreamChatController extends Controller
{
    public function __construct(
        protected Iris $iris,
        protected MessagePartsParser $messagePartsParser,
    ) {}

    public function __invoke(ChatRequest $request): StreamedResponse
    {
        $messages = $request->validated('messages');
        $lastMessage = end($messages);

        // Extract text and images from the parts array
        $textContent = $this->messagePartsParser->extractText($lastMessage['parts'] ?? []);
        $images = $this->messagePartsParser->extractImages($lastMessage['parts'] ?? []);

        /** @var User $user */
        $user = $request->user();

        return $this->iris->streamResponse($user->id, $textContent, $images);
    }
}

Validating the Payload

Use a Form Request to validate the AI SDK's message structure:

class ChatRequest extends FormRequest
{
    public function rules(): array
    {
        return [
            'messages' => ['required', 'array'],
            'messages.*.role' => ['required', 'string', Rule::in(['user', 'assistant'])],
            'messages.*.parts' => ['required', 'array'],
        ];
    }
}

Parsing the Parts

The parts array can contain different types (text, file, tool-invocation, etc.). A simple parser handles extracting what you need:

class MessagePartsParser
{
    public function extractText(array $parts): string
    {
        $textParts = [];

        foreach ($parts as $part) {
            if (($part['type'] ?? '') === 'text' && isset($part['text'])) {
                $textParts[] = $part['text'];
            }
        }

        return implode("\n", $textParts);
    }

    public function extractImages(array $parts): array
    {
        $images = [];

        foreach ($parts as $part) {
            if (($part['type'] ?? '') !== 'file') {
                continue;
            }

            $mediaType = $part['mediaType'] ?? $part['mimeType'] ?? '';
            if (! str_starts_with($mediaType, 'image/')) {
                continue;
            }

            $url = $part['url'] ?? '';
            if (str_starts_with($url, 'data:')) {
                // Extract base64 from data URL
                if (preg_match('/^data:[^;]+;base64,(.+)$/', $url, $matches)) {
                    $images[] = [
                        'base64' => $matches[1],
                        'mimeType' => $mediaType,
                    ];
                }
            }
        }

        return $images;
    }
}

The Streaming Glue (Prism Side)

This is where asDataStreamResponse() does the heavy lifting. It streams Prism's response in the exact format the AI SDK expects:

public function streamResponse(int $userId, string $userMessage, array $images = []): StreamedResponse
{
    $context = $this->prepareRequestContext($userId, $userMessage, $images);

    return Prism::text()
        ->using(Provider::Anthropic, 'claude-sonnet-4-20250514')
        ->withSystemPrompts($context['systemPrompts'])
        ->withMessages($context['conversationHistory'])
        ->withTools($this->toolRegistry->getTools())
        ->withMaxSteps(10)
        ->withMaxTokens(64000)
        ->asDataStreamResponse(function ($pendingRequest, $events) use ($userId) {
            // This callback fires after streaming completes —
            // use it to persist the response to your database
            $response = $this->streamAggregator->aggregate($events);
            $this->conversationRecorder->record($userId, $response);
        });
}

Frontend: Vercel AI SDK v6

On the React side, use useChat with DefaultChatTransport. The critical parts are:

1. Setting credentials: 'include' so Laravel's session/auth cookies are sent
2. Passing the CSRF token in the headers (since this is a Laravel app)

import { useChat } from '@ai-sdk/react';
import { DefaultChatTransport } from 'ai';

export default function ChatContainer() {
    const { messages, sendMessage, status, stop } = useChat({
        transport: new DefaultChatTransport({
            api: '/api/chat',
            credentials: 'include',
            headers: () => ({
                'X-XSRF-TOKEN': getCsrfToken(),
                'Accept': 'text/event-stream',
            }),
        }),
    });

    // sendMessage handles building the parts array for you
    const handleSend = (message: { text?: string; files?: FileList }) => {
        sendMessage({
            text: message.text || '',
            files: message.files,
        });
    };

    // ... render messages, input, etc.
}

Route Setup

// routes/api.php
Route::middleware(['web', 'auth'])->group(function (): void {
    Route::post('/chat', StreamChatController::class);
});

Note: use the web middleware group so you get session/CSRF support, which the DefaultChatTransport relies on with credentials: 'include'.

Summary

The flow is:

1. useChat + DefaultChatTransport sends messages (with parts) to /api/chat
2. Your Form Request validates the payload structure
3. Controller extracts text/images from the latest message's parts array
4. Prism builds the request and calls asDataStreamResponse() — this streams back in the data stream protocol format
5. The AI SDK automatically parses the stream and updates React state

You don't need to manually serialize or deserialize the stream protocol — asDataStreamResponse() and DefaultChatTransport handle that on both ends.