Stephen's workspace

Stephen ShawDec 7, 2025

Future of UX with AI & 3D 🤖

4views

Future of UX with AI & 3D 🤖

Stephen Shaw·Dec 7, 2025

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