Laravel's Official AI SDK: Build Your First Chatbot | Laravel 13
In this tutorial, we build a fully functional AI chatbot using the official Laravel AI SDK and Livewire 4 — complete with custom AI instructions, full conversation memory, and a polished zinc-colored UI.
You'll learn how to install and configure the Laravel AI SDK, how to create an Agent class with custom system instructions, how to use the RemembersConversations trait for automatic database-backed conversation history, and how to connect it all to a Livewire 4 component with a clean, modern UI.
⏱ Timestamps:
00:00 — Introduction & demo
02:24 — Project setup (Laravel 13 + Livewire starter kit)
04:36 — Installing Laravel AI SDK & configuration
08:17 — Creating the LaravelAssistant agent with system instructions
10:43 — Building the Livewire Chatbot component
17:30 — Building the zinc UI (Blade view, suggestion chips, thinking indicator)
18:55 — Routes & navigation link
27:43 — Live demo with conversation memory test
28:34 — AI Response formatting
33:56 — Wrap up
🛠 Stack Used:
→ Laravel 13
→ Livewire 4 starter kit
→ Laravel AI SDK (official, laravel/ai)
→ Gemini AI (swappable to OpenAI/Anthropic Claude)
→ Tailwind CSS (zinc palette)
→ Alpine.js (auto-resize textarea, smart scroll)
📂 Source code:
https://github.com/shadrackjm/ai-chatbot
━━━━━━━━━━━━━━━━━━━━━━
🔔 Subscribe for weekly Laravel tutorials
👍 Like if this helped you
💬 Comment what chatbot you're building!
━━━━━━━━━━━━━━━━━━━━━━
#Laravel #Livewire #LaravelAI #Chatbot #PHP #LaravelTutorial #AI #Claude #Anthropic #Laravel13 #Livewire4