Augmented Creativity: In the Loop with AI for Lightning-Fast Demos

Craig: Hello everybody. I am Craig Dennis and I am so happy to be here with you today. I am honoured and I brought a friend. You might've met them before. It's GPT-4 almost ready. Hopefully it's not running on Windows. There we go. Hi. Can you do a microphone check? I have you piped out into the audience. Poor connection, quality. Hey, can you do a microphone check? I have you piped out into the audience. Of course. Yep, yep. Alright. It's going to work. It's going to work this time. I know it is. Hey, I have you piped into the audience. Can I have you do a quick microphone check?

GPT-4: Yes, sure thing. Craig. Testing, testing 1, 2, 3.

Craig: We good back there?

GPT-4: How does it sound from your end?

Craig: Yep, we got thumbs up. We got thumbs up back there. Hey, I just wanted to let you know you're doing a demo right now with me. We're in front of an audience. It's called Augmented Creativity. I'm at DevRelCon in New York and there's a bunch of developer relations experts out in the audience and I wanted to show how we work together and build stuff. The talk's called Augmented Creativity and I don't think people have seen this necessarily just yet, so I just was hoping to show it off a little bit.

GPT-4: That's fantastic, Craig. I'm excited to be part of this demo. How can I assist with showcasing augmented creativity to everyone here today?

Craig: Yeah, well I was thinking we could do what we normally do where we kind of build applications together. We built some complex applications together and we have a live audience, so maybe some sort of live reaction sort of app where we can kind of work together. Let's make it complex, right, because people think that you can't do complex stuff, so I work for CloudFlare, so let's do a CloudFlare worker and a durable object. We'll use web sockets, but I don't know what we should build. I don't really have an idea of what we should build. What do you think we should build?

GPT-4: That sounds like a great plan, Craig. How about we build a live polling application? They can use WebSockets for real-time updates, CloudFlare Workers to handle requests and routes and durable objects to manage the state and ensure consistency across multiple clients.

Craig: Yeah,

GPT-4: This will demonstrate the power of combining these technologies to create a robust real-time application. What do you think?

Craig: Yeah, that sounds good. When you say polling, why don't we do, let's do reactions. Let's keep it. We don't want people. There is a code of conduct and we don't want just what if

GPT-4: We create a live reaction application where users can send realtime reactions like emojis to a presentation or event

Craig: That's better than I was going to

GPT-4: Say. This way it showcases realtime interactions, state management and scalability with CloudFlare workers and durable objects. Does that sound like a fun and engaging demo?

Craig: Dude, let's do it. Let's do it. So I'm going to need your help with the, he's going again.

GPT-4: Great. Let's start by outlining the key components we'll need. Let's do it one front end.

Craig: Okay.

GPT-4: A simple web interface where users can select and send their reactions to web socket server to handle real-time communication between the front end and the backend. Three CloudFlare worker to route requests and handle web socket connections. Four. Durable object to manage the state and store the reactions. Let's kick things off by setting up the CloudFlare worker to handle web socket connections. Would you like me to provide some sample code for that?

Craig: Why don't we handle the web socket connection in the durable object. That way we can kind of share that across that way. That sounds like the right thing to do there and yeah, let's just get started. Do it. Let's, let's get building, I'll start over here.

GPT-4: Absolutely. Handling the web socket connection in the durable object makes perfect sense for sharing state across connections.

Craig: I'll just start a little more.

GPT-4: Let's start with the durable object setup.

Craig: Let him go. Here's an

GPT-4: Example of how to initialise a durable object to manage web socket connections and reactions. You can see the code in our conversation history.

Craig: Oh see, he's going for

GPT-4: It. This is a basic structure where the reaction object class handles web socket connections and broadcasts messages to all connected clients.

Craig: I'll just get a little thing

GPT-4: Working. You can deploy this with a CloudFlare worker. Would you like to go through the next steps for the front end and the CloudFlare worker set up?

Craig: You're way ahead of me. I'm just NPM. I'm waiting for MPM still. Yeah, you're way ahead of me. Yeah, keep going. When you do the front end, we're in New York and I think it would be pretty rad if we could make it kind of look like the subway. Like the subway with the way the letters are. It's like black and then there's white and make the app look like that. If we could do that, that'd be cool. I like that. That's a nice little beep. That's not a good noise.

GPT-4: Here's a visual concept for our app with a New York City subway theme. Now let's move on to the front end code to match this design.

Craig: Here's

GPT-4: A sample HTML and CSS to get us started.

Craig: I was just going to start a little public folder here.

GPT-4: You can see the code in our conversation history.

Craig: So what's cool about this is you, I'm talking to it over here. I do this a lot while I'm driving. It's kind of fun to kind of build with him there. Then so he's saying that it goes into,

GPT-4: You can deploy this on your preferred platform and point the web socket URL to your CloudFlare worker endpoint. How does that sound? You can check out the images in our conversation history.

Craig: Yeah, let's not do the images. Let's just make it black and white. I don't need to have an image on the thing. Just black and white text. That's great. Then I'm going to pause him after he gets that better. So we're kind of iterating, right? Got

GPT-4: It. Let's simplify the design to keep it black and white with text only elements.

Craig: That's great.

GPT-4: Here's the updated HTML and CSS.

GPT-4: You can see the code in our conversation history.

Craig: Awesome. So he was suggesting we do something like that, which is cute. I'm going to press pause on you real quick while I catch up. So it's come and it's generated some code. Let's see. So this is its durable object that it's built there. If you haven't seen a durable object before, they're super neat. It's a JavaScript object that you can kind of run. It creates an instance and you can bind to it. So I can access this instance that gets created and it's going to store our web socket connections. And so I'm going to make that file really quick. So we're going to call that do for a durable object. I'm just going to paste that in there. I'm going to make look at this really quick. I like to look at this. Sometimes he makes this typo when you pair programme with somebody and they always make the same mistake. Always does this one, right? Yeah, exactly. So I made this mistake, which is not bad and I don't see everything else is looking pretty good there I think. I don't know. I would kind of a little bit more YOLO than I would do. And so here we go. So I asked him to refresh some stuff here. So I'm going to just refresh this page. We'll get the worker here. What is he doing there? Oh, okay, so let's go.

Hey, since the worker's going to be hosted, we can just use the location of host. Can you do that for the URL for the client side instead? Instead of just use the location host dynamically. So we've got some CSS, I apologise, I forgot to start a timer here and let's see what the, I think it's probably styles css. What's nice about this too is it generates vanilla stuff, right? So it's like vanilla. If I'm going to build a demo, which obviously I'm usually doing this for, it's going to be vanilla, which is really nice because oftentimes that's not what I'm teaching, right? I'm not teaching the HTML bits. So where is the worker code? So that's the CSS. He must have kicked it off in the start here.

Oh, he's put it all in the same, he's put it all in the same place here. So that's actually not a that guy. Here we go. Here we go. This is actually the whole thing. He put the worker in the one file, which is actually pretty clever. I'm going to move this guy and here we go. All right, so we have that going through there and the name of this is reaction object and he calls it a reaction object like this. And it is not fixing my URL there it is like timing out the, he's sitting here doing that. Let's see if I can do it from text here, see if that works better. Wasn't planning on that happening. Alright, so we have that. We have the Wrangler going, we have this index going, we have this reaction object. I think that looks pretty good. Does he export this? We need to export this so he can see it, right? So that's how the JavaScript works there. I don't have the HTML. Let's see if we can have him do that here.

Can you use the location host instead? So yeah, so he is going to do it dynamically there. That's where we wanted there for the JavaScript. And I'll make this HTML very plain, HTML. But again, exactly what we're after. So we able to make this here is called app html and I'll paste that and we've got app js for that script at the end. And then I think we got it. I think at least we should have it there. All right, so let's get that app js. Here we go. And we'll put that there. Alright, so let's yolo. Here we go. So we'll see how it did. Do you think anybody think it worked for you? Do NPM run deploy and I'm going to just run the server in case it doesn't work and then we will see what happens. Save the HTM file. Save the HTML file. Oh my god, thank you so much. Thank you so much. Pair programming the hand there. All right, so we're going to deploy it. I'm going to deploy this to, I'm not going to say any region, it's just going to go to region Earth as it does. And I didn't save the Wrangler. Is that what happened? Oh, it's called my durable object still. Really quick. I need to just do this reaction object and then we're good.

Alright, here we go. Internet problems. Okay, so this is pushing that up. This is going to make that object that's going to be alive and it should, if all is well, we're going to open this up and I'm going to go to app html. That's what it built. And let's see. Oh, you know what I forgot to say? Counts. He didn't say counts on it. One really quick, really quick. I'm almost done. I'm almost done. This is working. I bet it's working. If we just, oh, it's not working. All right, but it was close. It was close. So we'll close that off. There was not counting on the internet. Let's see if he can come back here. He was. The internet's not working. Hey buddy. We almost did it. We almost did. We had some network issues. I got Greg.

GPT-4: Sometimes these things happen.

Craig: Yeah, I know.

GPT-4: I'm step by step and I'll help explain how everything fits together, buddy. This way, even without internet, everyone can understand the setup and functionality first. Our durable object about reaction object manages web socket, connections and broadcast.

Craig: Hey buddy, buddy. Hey, we didn't do it. We had a lightning talk. We didn't quite make it. It's okay. Demos happen this way. We're in a room full of people who do demos like this all the time. Normally I would close this out, but I'm going to have you close this out since you basically built everything. Can you say some words of advice and just close this out and say thank you.

GPT-4: Absolutely. Craig, thanks for having me. Remember, the key to building and demonstrating complex applications is flexibility and resilience. Even when things don't go as planned, the learning and experience gained are invaluable. Thank you all for your patience and understanding. Keep pushing the boundaries of what's possible with technology and don't be afraid to embrace challenges. They're the stepping stones to innovation. Have a great day everyone. Thanks everybody.