Give Your AI a Face: React Chat Screen + Laravel Controller | AI Booking App Ep 4
Our AI agent works — now let's talk to it. In Episode 4 we build the chat screen: a Laravel controller that runs the agent and returns JSON, two routes, and a React chat page with message bubbles, auto-scroll, and a "thinking…" state. We use raw fetch instead of an Inertia form (and I explain exactly why), then deliberately trigger the classic 419 CSRF error so you'll recognize it forever.
In this episode:
✅ Call an AI agent from a controller → JSON
✅ Keep the conversation in memory across messages
✅ Build a React chat UI with live message state
✅ Why fetch (not useForm) — and how to pass the CSRF token
✅ Break it on purpose: the 419 "Page Expired" error
🧰 Stack: Laravel 13 · React 19 · Inertia.js 3 · TypeScript · Tailwind 4 · Laravel AI SDK · Gemini
▶️ Full playlist: • Build an AI Appointment Assistant — Larave...
💻 Source code: https://github.com/shadrackjm/ai-doct...
🔔 Subscribe for more Laravel + AI builds:
Editor used: Cursor (VS Code also works)
Local dev: Laravel Herd (https://herd.laravel.com)
AI key: Google AI Studio (free tier)
#Laravel #ReactJS #AI #InertiaJS #LaravelAI #TypeScript #FullStack #WebDevelopment