Stephen ShawDec 7, 2025

Future of UX with AI & 3D 🤖

6

Future of UX with AI & 3D 🤖

Stephen Shaw

Keyframers explored the future of UX with AI on CodeTV's Web Dev Challenge. They created an app using React 3 Fiber to visualize conversations in 3D, featuring an interactive DJ robot and LLM integration.

Transcript

00:00
Welcome to the future, I'm Stephen Shaw.
00:02
The other half of Keyframers David and I were invited out to film an episode of Web Dev challenge for CodeTV.
00:10
The theme of our episode was the future of UX, especially how AI is going to change the ways that we interact with computers.
00:18
For our app, we wanted to use 3D to help users visualize the flow of conversation and enable a version of time travel, with branching paths that results in a really unique experience.
00:33
To render out 3D elements, we used a library called React3 Fiber, which integrates JSX and 3js, a, 3D rendering library letting you code out entire 3D scenes with React components.
00:47
We even built a little DJ robot to kind of give a friendly face to the whole chat aspect of the app it's all geometries and materials.
00:57
It's in the code.
00:58
It's not a 3D model.
00:59
But enough stalling.
01:01
Let's show the actual app so that you can experience the fun.
01:06
Here he is.
01:07
Here's our little DJ, waiting for us in this gorgeous 3D space.
01:13
we've got an extra like pixelated filter on top of it to kind of complement the retro futuristic vibe we were going for.
01:21
So let's chat with our little robot friend here and let me get some electronic country, please, partner.
01:30
And using David's clever Algolia integration with the LLM, our DJ gives back some relevant results that we can explore.
01:39
Town Road.
01:40
That's nice.
01:41
Classic.
01:41
Let's get in there.
01:44
Now the cool thing about React, 3 fiber is you can actually render out regular React components, HTML, all that kind of stuff within the 3D space.
01:54
So this is just a regular, HTML, and CSS styled element.
02:01
Now we can change things up a little bit, say maybe a little slower partner, And we can get some different results there to explore.
02:16
Now if you look back, you can see our timeline rendered out in this 3D space that we can jump, between to get all of those other, options.
02:30
And if we select something else from there, we actually branch off and create a new timeline.
02:38
You can see this real clearly in our timeline debug view here.
02:43
this is what kind of enables that time travel feel.
02:47
So you can change things up and ask for, more like this, And get some neat results from there.
02:57
and and got plenty of personality there from our, from our chatbot.
03:02
with 3D AI, all these API integrations, it was a lot to tackle in four hours, especially without real time travel.
03:12
But I hope our little DJ friend here has taught you a few new tricks that you can use in the future of your, your app.
03:20
Thanks so much.
Future of UX with AI & 3D 🤖 — Tella