Introduction

Well, hello, everybody. There is a ton of people in this room that I didn't expect to see. This is massive.

And I'm not going to lie, my demo for the day was actually going to be completely different to what I'm going to present now, but I am going to risk it for a chocolate biscuit and see if I can give you a decent demo that is going to balance the technical and non-technical.

So what I'm going to try and do is balance some technical sides, using AI to build and using AI to code, as well as some non-technical side, so that you can see how you can get through this if you're like me, the Forrest Gump of technology, a chaos monkey completely, that you can actually build your dreams using AI. My first slide here is literally a Pokemon GIF. I made this using cursor in two hours.

So this just shows you someone who's not technical at all can actually walk away with something fully coded without actually having any technical knowledge whatsoever.

Demo Setup

So let's start up.

So today I'm gonna use Cursor. So a lot of you have probably used Cursor before, probably know about it, but the people who don't, you literally just go to cursor.com and here it is.

You can download it. It gives you a lot of runway and a lot of tokens that you can use. So you can try it out as much as you like.

So yeah, that's what we're gonna use today.

Choosing the Project

And what I'd like to do today is build a dashboard. So I've literally just gone to Pinterest and found a dashboard that I think looks kinda nice, so that's just what I'm gonna build today.

So what we're going to do is just fire up cursor. And here it is.

So there is nothing scarier than a completely empty program. But hopefully we'll get through.

Getting Started with Cursor

So we're going to fire up the terminal.

For the non-technical people in this room, do not be afraid of the terminal. Do not shy away from it. It is your friend.

And I'm going to go here, and I'm going to open up this command K. Command K is just like a little mini AI that you can ask questions all the way through your development process. So I'm literally going to put in here, I want to install Next.js into this folder. How do I start? Submit.

And in the terminal, it will give you the code, so it will basically put Next.js into that folder with a dot. I don't even really know what the dot means. Yeah? I don't know if I can. It's okay. That dot, I don't even know what that means.

Half of you in this room do know what it means. But you don't need to. The only thing you need to do is press enter.

Enter is the magic button and all you need to do from there is press enter again and again and again and again and again and again and again and look how much hard work we have done. Right now, these little jiggly dots are going to be installing all of those dependencies, all of those bits and bobs that we need to kind of build out this app. So here we go. We've already got a lot of the groundwork done.

Building the Dashboard

So because I want to build a dashboard, what I'm going to do is probably the most technical thing I'm gonna go here to ShadCN. A lot of you will know ShadCN.

It's basically like a component library-ish type thing where you can essentially copy and paste components. So if you go in here, you can kind of see they're very, very basic looking components, but they're really, really usable, really customizable, and it's definitely a good place to start.

So if you're not technical, all you need to go to is, this is the most technical thing you'll do, and it's what developers do all day, is go to the documentation. All you have to do is press copy and then paste that in.

Here we go. And then we press the magic button, enter, enter, enter, enter. And here we go, success.

Now my project has been initialized. You don't even need to know what that means. As long as it's there, it's great.

If you really want to get into the nitty gritty of it, I would say at this point go into Git and make a commit. But you don't have to do that if you don't want. You could risk it for a chocolate biscuit like I'm doing now and just see how far you get until, yeah, it can't roll back basically.

Setting Up the Environment

So what we're gonna do now is we're gonna set up essentially like a system prompt for the AI that we're gonna use. So we're gonna add a new file and call it cursor rules. And what we're going to do is we're going to set up this prompt that will always be dropped into the conversation whenever I have a talk with the AI agent.

So next, we're just going to go to Notepad. And what we're going to do, same thing.

I'm going to go to my cheat sheet. And it's literally we're in design mode.

This is just so I keep my sanity while I'm doing the demo and it doesn't go off the rails and build out a big backend that I'm going to have to try and debug later. So literally we're in design mode. We're not going to be building any backend functionality.

Well, let's put that wrong. We're just going to use dummy JSON in order to mock up the prototype of the application.

And we're just going to call this like, let's just say design rules. Design rules. Yeah, fine.

Configuring AI Assistance

And this is when we get to the good bit. So we press command L and this will fire up the AI that's going to help us build this.

So right now, we're in the chat tab, and the chat tab is actually really, really good if you wanna make some very small and very targeted changes. It's basically what I used to make the Pokemon application way back in the day, but now we have something that's way more comprehensive and complicated and way better to use, especially if you're not technologically or code-fluent like I am.

I am not saying I am code-fluent, I am saying I am not code-fluent. What we are going to do is head over to the Composer, and we are going to hit Agent. You can change this LLM if you want to, but I actually really like the Claude 3.5 Sonnet. I think that it does just a really, really great job.

This little plus button will let you add different things. I am going to add my cursor rules doc and the design rules doc. So all we're going to do is literally go to here. We're going to copy it, and then we're going to paste it.

And this is, I'm going to teach you a technique that's really, really good for your AIs and your prompt engineering. And it's called reflection. So I want the AI to consider what it's going to build before it builds it.

And this is also really good if you have a spouse that's grumpy, but you have a plan for the day. So you want to get it so that the other person knows or the other person comes up with the idea and you just follow along. So what I'm going to ask you to do is

Executing the Plan

I want to build a dashboard. How would you do it? Do it. Darling, please make a plan. and then we're just gonna let it come up with a plan.

So always, as well, be very nice to your AIs because we're gonna hit the singularity very soon and they'll probably pick favorites. So there you go, it's come up with this beautiful plan. I'm not even gonna read it. All I need to know is that it has my cat icon from my cursor rules doc. So I know that it's actually come up with, it's actually considered the document that I've uploaded.

So I'm gonna act like Mary, I'm gonna paste this back in, and I'm gonna say, let's go. Let's go. And just let it do its thing. So it's gonna start generating.

and asking me to run commands. So this is sometimes where it picks up, but it's fine. I also have an artifact style. Here's one I've done earlier, so hopefully we won't run into any problems. I'm going to go here, just force that. So literally all I'm doing is just clicking and pressing yes, clicking, pressing yes, clicking, pressing yes. No technical knowledge needed.

Monitoring Progress

For the non-technical people out there, if anything is green or blue, you're golden. If anything is red, you're not. So if anything is red, you're going to have a problem. It's not going to start up properly, but we'll do a little bit of bug squishing before I launch this.

So for technical people out there, you can actually scroll through the code and you can see what it's doing. If you like what it's making, if you don't like what it's making, and you can actually go in and edit this stuff. You guys know a million times more than me what it's doing.

Also, sometimes something to watch out for is if it starts to make lots and lots and lots of different files, that's usually a bad sign. That's usually like it's getting a little bit carried away with itself. But anything over 10 files, I would say it's time to just worry a little bit.

But yeah, hold on. Hopefully we'll get to where we need to be. So, I'm nervous.

It's like, there's too many people in here. I'm trying to imagine everybody in their underpants, but it makes it worse.

Alrighty, so we're gonna accept all, and because I know we already have some problems, I'm literally just gonna come in here and copy that, and then I'm just gonna paste it in here, and just scream at it, fix, fix this, please, there we go. So hopefully you'll know. There we go.

Handling Issues

Cat, I see the issue. So this issue can come up a lot when you install dependencies. So sometimes it'll ask you to reinstall them. It's not a problem. It takes two seconds.

Let's see, this is not one I've seen before. Come on, live demo gods. Oh, that's definitely, that's quite worrying, but okay, fine.

Okay, let's go. Hold on, let's do one more rodeo. If not, I will do my art attack.

Here's one I presented earlier, so let's see. Okay, so it's just gonna go through the files. And the best thing about the Composer is that it builds things holistically. So it actually looks at every single file and sees if it can find something that's wrong and how that communicates with the other files too.

We don't have any linter errors, which is good, I imagine. This is the point where you can go and get a cup of tea and come back. I don't know why, but it's coming up with problems every time.

Let's just see. Actually, it's not finished. I shouldn't touch it.

So it is worrying because things are still red. But let's see. If I can't get this to work, then while everyone else is doing the other talks, I'll get it to work and then I can chat with you about it afterwards. It's just I'm not spending all the time trying to debug.

Okay, so it's actually made four problems now, so we'll see. We'll risk it. I told you it was risky from the beginning.

Final Steps

Right. Terminal.

So I'm going to see if it will run with these problems. It's very likely it won't, but just for the sake of not holding everybody up.

So I'm going to press Command K, and I'm going to say, how do I see my website? And it says npm rubdev. So I'm just going to do that.

And let's go to local host and see it explode. Well, there you go.

So if this had gone very well, which I have done like eight versions of this and none of them had the same problem, it can make things like this just right off the bat. So immediately you get brand-new like almost more not identical, but very very similar to the design Right just from cursor within about 10-15 minutes.

So even though this didn't go very well if you've got more time just to go through and just Kill bugs then you can definitely make this stuff work for you But in this case it didn't work, but that's you know the the nature of live demos.

Conclusion

So yeah, I Anyway, that's all I wanted to talk about today. And I hope that you guys learned something on both sides.