Conversational AI Characters for Web Browser With Convai Web SDK, Claude Code and React Three Fiber
Watch a Convai-powered 3D AI character running directly in the browser: speaking with the user, responding in real time, and acting like a conversational virtual guide inside a lightweight web experience. In this tutorial, we show how to build a browser-based AI character using the Convai Web SDK, Claude Code, Vite, TypeScript, React Three Fiber, and a custom 3D avatar. You’ll start by using Claude Code to generate the project setup from the Convai Web SDK documentation, then connect your Convai character using an API key and Character ID, render a 3D avatar, add the Convai widget, and enable real-time conversation. We also cover how to bring your own GLB avatar into the project, inspect blendshapes in a GLTF viewer, update avatar and animation paths, and enable lip sync using blendshape data from the Convai Web SDK. This workflow is useful for building browser-based AI companions, virtual guides, real estate walkthroughs, lightweight 3D experiences, interactive web apps, and conversational AI avatars powered by Convai. Timestamps: 00:00 - Browser AI character demo 00:43 - What we’re building 01:18 - Create the React project 01:41 - Convai Web SDK setup 02:16 - Generate the project with Claude Code 02:50 - Add API key and Character ID 04:26 - Add your own 3D avatar 05:29 - Enable lip sync and blendshapes 07:25 - Final refined demo 07:44 - Recap and next steps Helpful links: Convai Web SDK Documentation: https://docs.convai.com/api-docs/plugins-and-integrations/web-plugins/convai-web-sdk Convai Web SDK Lip Sync and Blendshape Documentation: https://docs.convai.com/api-docs/plugins-and-integrations/web-plugins/convai-web-sdk/lipsync-and-blendshape Sign up at https://convai.com to create AI characters and integrate them into web apps, browser-based 3D experiences, games, simulations, virtual worlds, training applications, and interactive AI avatar experiences. Have questions or need assistance? Visit the Convai Developer Forum for setup questions, bug reports, and technical support. Convai Developer Forum: https://forum.convai.com Follow Convai: LinkedIn: https://www.linkedin.com/company/convaitech/ Reddit: https://www.reddit.com/r/convai/ Twitter: https://twitter.com/convaitech Instagram: https://www.instagram.com/conv.ai/ Facebook: https://www.facebook.com/ConvaiOfficial TikTok: https://www.tiktok.com/@conv.ai ArtStation: https://www.artstation.com/convai #convai #websdk #reactthreefiber #threejs #vite #claudecode #aicharacters #aiavatars #conversationalai #webdevelopment #3dweb #gamedev