Learn how to build production-ready 3D AI chatbots easily with Three.js, React Three Fiber, and n8n!

In this tutorial, you'll learn:
→ How to use any LLM (OpenAI, Gemini, Claude, Ollama) and swap them with one click
→ Realtime lipsync
→ No backend coding - n8n handles everything visually


Demo 🔗
https://santa.wawasensei.dev/

Build your professional chatbot in minutes with Chatbot Kit 
https://wawasensei.dev/chatbot-kit

🚀 Learn React Three Fiber with the Ultimate Guide to 3D Web Development ✨
https://wawasensei.dev/courses/react-three-fiber/


#threejs #js #chatbot

▬▬▬▬▬▬ Useful L I N K S  🔗  ▬▬▬▬▬▬ 

Final code
https://github.com/wass08/chatbot-kit-lite

Starter code
https://github.com/wass08/r3f-vite-starter

Deploy your n8n instance with Elestio
https://elest.io/open-source/n8n

Realtime js/ts lipsync library
https://github.com/wass08/wawa-lipsync/

Three.js VFX library
https://github.com/wass08/wawa-vfx

Christmas Scene 
https://sketchfab.com/3d-models/lowp-christmas-cc0-asset-pack-debacc83c8ee421ebd222969a74aca63

React Three Postprocessing
https://github.com/pmndrs/react-postprocessing

Threejs
https://threejs.org/

React Three Fiber
https://r3f.docs.pmnd.rs/getting-started/introduction

▬▬▬▬▬▬ Support the channel 🙏   ▬▬▬▬▬▬ 

Become a member to support me:
https://www.youtube.com/channel/UCBH-5ctALmmOrm4kczL3urQ/join

▬▬▬▬▬▬ Connect with me 👋   ▬▬▬▬▬▬ 

💻 The Discord Community
https://wawasensei.dev/discord

X : 
https://x.com/wawasensei

📸 Instagram : 
https://instagram.com/wawa.sensei

🐦TikTok : 
https://www.tiktok.com/@wawasensei08


▬▬▬▬▬▬ T I M E S T A M P S ⏰  ▬▬▬▬▬▬

00:00 Introduction
01:06 React Three Fiber Starter Project
01:34 n8n installation
02:55 Character loading with animation
05:01 Lipsync, Blendshapes, and Visemes
13:02 Chatbot UI
15:32 AI Agent with n8n and any LLM
22:18 TTS Endpoint with Eleven Labs or any provider
25:18 Connecting the backend with the chatbot
27:12 Make it look great
32:15 Chatbot Kit

Wawa Sensei

Learn to build immersive 3D AI chatbots using React Three Fiber without backend code. The tutorial covers integrating multiple LLMs (OpenAI, Gemini, Claude) through n8n workflows, implementing real-time lip sync with custom audio processing, creating 3D character animations with blend shapes, and adding visual effects like snow particles and bloom. The stack uses n8n for no-code AI automation, ElevenLabs for text-to-speech, and custom libraries for lip synchronization, resulting in production-ready chatbot experiences with voice interaction and animated 3D characters.

How to Build 3D AI Chatbots (No Backend Required)

<p>Haha amazing! You’re still droppin them presents! Thanks Santa! 😌</p>
