Introduction

what I'd like to try and get to.

Brainstorming the App

So we're going to first brainstorm an app together. In this case, I'm going to try and restrict it. It can't be too complicated. We're looking at 30 minutes.

So let's say a daily journal, whatever that would be. We're then going to take that and we're going to create a pitch out of it and then get that to a level where we'd be comfortable almost walking into either a boardroom pitch or a company pitch, because somehow you really need a journaling app in your company, and that's absolutely a requirement today.

We're then going to take the app that we have, turn it into a small spec for an app for someone to actually build. We're then going to build that app.

Sorry, we're going to build a prototype first, show the UI, go through, We're going to iterate through that, try and make it look like whatever we think a good journaling app looks like. And then we're going to take the prototype, and we're going to make it an actual live app, all within the next 30 minutes.

I've never done this on that time frame yet, so we'll see how far we get.

But if I am here. Journaling app.

Key Features

What makes a good journaling app? Customization, you say? I'm going to add customization.

Anything else? Platform support? I mean, I'm not sure I can do multi-platform in the next 30 minutes, guys.

Let's think about basic functionality in journaling apps. You need to be able to put an entry into a journal, right? What else?

Entries will have dates, I imagine. Speech to text. Speech to text.

I mean, your expectations of journaling apps are amazing. Everything is cloud-based now. Sorry, someone talked about spellcheck, right?

Spellcheck, I would say, normally today is with your operating system already. Reminders. Reminders.

Veracity check. Veracity check. Veracity check?

For your daily journal, in case you're trying to alternative fact yourself. Okay. I'm going to stop there because we just built the world's most feature complete journaling app. Um, which I must say is not this. I can't build in 30 minutes, but we're going to see how far we get.

Creating the Pitch

Um, okay, so we've got this. What I did want to start with is

We just have a mind map here and you can see how terrible my writing is, right? I mean, probably no one writes that terribly here in this room, but luckily enough, AI doesn't care.

So how many of you have tried Claude before? So two months ago, I did a small demo of Clod as well for those of you that were in the room. So there'll be a small piece of this that will be repetitive, but there's going to be a lot more after it. So don't worry too much.

Actually, where I need to be, I need to upload the, there we go. This is the screenshot.

Using Claude for Pitch Generation

So now I'm going to tell Claude. I'm going to tell it, imagine you're an experienced product manager. You just brainstormed with a group of AI enthusiasts about the most feature complete journaling app possible. You are supposed to build this in 30 minutes. So you need to rein in the functionality bit. But you want to build a great pitch. Attached is the result of the brainstorm. Please produce set pitch.

So what we're doing here is fairly simple, but something that I think not enough people today understand is that these models are multimodal. Claude is able to understand exactly what we just created here. So let's figure out what it got, right?

The key features, so... The key features for the journaling app, rich text editor, multi-platform sync, customizable templates, smart reminders, basic spell check. It's figured out everything that we just put down.

And why this is so powerful is actually, I'm doing this here to go from a small brainstorm on a journaling app that we're talking about here. But if you think about your own company context, how often do you go through various brainstorms? How often do you stand around a whiteboard and you try and figure out, you might even do this with post-its. I mean, we did this a lot where you have different exercises and just all put it on the wall and then someone would take a picture and then it would be someone's job the next day to try and put this into a document that the whole group could make sense of.

That is now a... two second job to be able to go from literally picture of everything you brainstormed on to full spec of what you actually want to get out of it.

But that's not where we're going to stop, obviously. So I'm going to take this pitch and we could make this much better. I'm not actually going to read this because then it would not be a 30 minute demo. It would be much longer.

Using Gamma for Presentation

But I'm then going to go into gamma. OK, cool, because I know that Alan did a quick demo on gamma as well. So I'm not going to spend too much here. But what I do want to show you, and actually I saw 90% of this room was not there last time, which is one of the other things, by the way, I figured out by all these meetups that we're doing.

And how many of you were here last time, actually? In the church, yeah, exactly. OK, so there were only a few.

The moment you switch the location of the meetup, you get an entirely different group. I would have thought people travel 20 or walk 20 minutes further, but no, that's not what happens. And I see this over and over, by the way. This is not just here. In every city, every time we change the venue, you get a different group of people.

So what I did here is I went to gamma.app. Now, gamma is in Presentation Builder. And so what I did is I just pasted the entire pitch that Claude has produced for our app.

So imagine we did our brainstorm, and now I have to walk into the exec room and pitch why this is the app that we really should build. So I am going to click continue. It gives me a few options. So here I'm going to let Gamma decide what goes on to the slides because I want it to generate the text.

I want it to be brief. And okay, what am I going to say? Who is this busy? I'm going to say...

Yeah, actually, this is probably good. So the presentation is going to be written for busy individuals seeking a simple and effective way to journal. No. Executive team of a company that builds multiple consumer apps.

Enthusiastic, persuasive, confident, correct. I am going to take a slightly better model here, so I'm gonna use FluxPro. That's actually a new one, by the way. I think actually when Alan did the presentation, that one wouldn't have been there yet.

If you haven't tried the new Flux models for images, amazing. And because they're open source, everyone can integrate them everywhere.

So I'm going to hit Continue, and I can choose a theme. I'm going to do something that pops a little bit more. Let's try this. I don't know.

And what is going to happen now is that gamma is going to create a full presentation based on the pitch that we just put together. And you can see how fast this is currently going. Now, the image generation takes a little bit longer, mostly because I selected Flux Pro. So it takes a few seconds as it generates the images. But you can see the contents already there. And we're just going to wait for another few seconds there.

Okay, Journal Ease is the name that, I guess that's Claude that, Claude, okay, and Claude selected that name. Can like the name, not like the name, that's not the whole purpose of this demo, right?

What we just did, again, we are now 10 minutes in. I might actually do this within 30 minutes of work.

10 minutes in, we went from brainstorm to pitch to full-blown presentation. But again, 10 minutes in, we now have a presentation that I can actually walk into and I could send this around and this would, for most people, they would not realize that this would have been just purely AI generated within that timeframe.

So your personal digital diary, rich text editor with the actual iconography that comes through it, some idea of design, multi-platform sync, customizable templates, smart reminders, Basic spell check. Privacy and security.

Oh, well, I think that's good. Can I add that? Privacy and security? No. OK. Privacy focused. So Claude thought that was a good thing.

And then future roadmap. It's added some AI-powered insights. Mood analysis. Theme creator. I guess we were not ambitious enough with our journaling app.

Oh, wow. OK.

And we are nowhere near done, so.

Building the Prototype

Okay, now I'm gonna go back to Claude. the project was accepted, we, uh, we can go ahead and build a prototype, make sure it's, uh, or actually I'm going to start here, which is let's start with the main UI. Can you build me something that pops?

So now I went from Claude trying to build me a pitch to Claude building me a UI for general ease, which I still think is not a great name, but just gonna wait for a few more seconds and boom, here we go. based on the spec that we went through before it now has built something here. It doesn't include the rich text editor.

Sorry, it's not doing everything that I asked, but also I asked it to, uh, was it, did I? Yeah. Prototype. So let's start with the main UI.

Uh, I'm not that much of a fan here. I think this is a bit too generic. Uh, it's too generic and I like more colors. So you can iterate over that.

And it's doing all of this within seconds. So I am now starting to actually build what this app might look like. All of these are shareable, by the way.

So each of these, oh, look at that. It actually added nice icons. So how are you feeling today? And these are interactable as well.

And you can share these. I'm on the commercial version at the moment, which means that when I share this, it's only going to be shareable within my company. But actually, weirdly enough, if you're on the free version, these artifacts, they're shareable by everyone. So you can literally just give a link to someone, and they'll be able to access the artifact directly.

You can even do small, like fine tune things. I think write and entries should be one menu because I can only write entries, which I think is a logical piece that somehow Claude didn't. But you can see now that I'm going much more fine tuned. I'm saying, hey, actually, I want those two menus to be one rather than to be two.

And now it's going to rewrite that same Same bit. OK. Oh, and it's at the same time made this look a little bit nicer.

How many of you, so you could stop here. I'd say this is already pretty impressive. We are 15 minutes in, and we now have a prototype of an actual UI of something that we'd build.

I don't know, two years ago, or actually, sorry, this was pre-artifact, so three months ago, how long it would have taken you normally to go from brainstorm to pitch to prototype. Definitely not 15 minutes in the timeframe that we're looking at now.

Coding the App

How many of you have tried Cursor before? Three people in the room. Wow. You're going to be surprised.

How many people in this room can write some code? Okay. You are going to be very surprised. So if you haven't tried cursor before yet, you absolutely should.

So cursor is, I think the first AI first coding environment. And I'm going to show you what we can do with that.

So I'm going to go here, and I'm going to create a new folder. And I'm going to say, oh, yeah, journalese. Journalese.

And it's totally empty. And what I'm going to do is I'm going to switch the Cloud view here. You can see preview, and you can see code as well.

Now, there's one thing to know from Cloud is the way that it's able to preview this is that it has a whole bunch. In that preview, it has a whole bunch of libraries that are pre-installed, which is why when I look at the code view here, you can see it's built on React. It's got a whole bunch of things that are already pre-integrated, which is how it can render this.

And obviously, when I'm trying to code this myself, I don't have that environment set up. So I'm going to go for that as well. But first, I'm going to copy this.

I'm going to back into Cursor. I'm going to do index.js. I'm going to paste it.

And then here with Cursor, wrong command. you have Cursor Composer. Cursor Composer allows you to interact with your entire coding environment just by natural language.

Using Cursor for Coding

So what I'm going to do here, actually I can actually add the index here, I'm going to say I produced the this code in Cloud, which uses React. Please build me an app that looks and feels the same, but that uses a standard Node.js Express SQLite stack.

Make sure the entries actually persist. One thing that I found as I come through here, if you just ask it this, there's a high chance it will actually make it work.

But what I'm going to add here as an extra sentence is, ask me any questions you need the answer to make this work. and walk me through your thinking before you implement anything. Again, I haven't written a single line of code here, right?

I have copy pasted what Claude gave me. I'm going to try and see actually, and I can't really make this bigger for you, but Can you see a little bit of what goes up there, right?

So I'll read a little bit of it. So to build the app with similar functionality using Node, Express, and SQLite, we'll need to make some significant changes. Backend and frontend.

Current code is React component, frontend only. OK, so chip, database. Wait, where is this?

OK, the current app uses Tailwind. Here are the questions. Do you want to implement user authentication?

No. As simple as possible. Two, do you use Tailwind for CSS styling or plain CSS?

You choose. Three, do you want to implement the Reminders and Settings tab, but focus only on the journaling functionality? Let's start with journaling only first.

Four, how do you want to handle the date for journal entry? Should we allow users to select the date or always use the current date? Select the date.

Now, this is the biggest moment in the demo where I'm like, please, please let it work, let it work. So what it's doing now, it's now outlining the structure of the app that it's going to build. It's telling me that it's creating the directories.

It's telling me I need to install. This is a command I need to run myself. Initially, it's not general.

I need to install this. SQLite, which is, I guess, technically the only technical step in this whole process. It's in writing server.js, writing index.html, writing styles.css, writing app.js.

And it's done all of this here. So you can see these. And now it's allowing me to say accept all.

And so the only thing I need now, I need to make this terminal come up, copy paste, right? This is what it asked me to execute, which is the NPM install express SQL light and body parser. Okay.

And then it's saying node server to Jess. Okay. Moment of truth.

Boom. Now, let's see what happens here. This is an entry.

Come on, come on. Ah, something went wrong. Let's see.

Ah. Nothing went wrong. It's just that.

Okay, well, this allows me another try, which is it looks like when I hit save, nothing happens with my entry. Please make it so it saves it and add a section where I can browse entries. Was there?

Oh, view entries, yeah. Yeah, it's not going anywhere at the moment. Yeah.

OK, let's see. OK, I'm now going to kill the server and start again. Refresh.

Interesting, it's implemented the extra bits. Save entry. Please fill in all fields.

Oh, it needs me to select a mood. Okay. Entry saved successfully.

View entries. Boom. This is, this is still mind blowing to me.

Like this is very new. Like to be fair, the how fast cursor can do this right now, even just a few weeks ago, it wouldn't have been able to do it in this way. But this is the speed at which all of this is moving at the moment.

So, we're 22 minutes in. So I'm going to try.

Adding AI-powered Insights

I had a stretch, a stretch goal for myself, which was actually one of the things that was suggested randomly by the presentation here, which was AI powered insights. I'm going to see if I can actually add this in this one demo.

So I'm going to do, so I'm going to go to open AI So this, this is slightly more technical, but I mean, all I'm doing here is I'm going to platform that open air.com and I'm going to create an API key because I need an API key in order to be able to interact with open AI as a service, right? It's probably as, yeah, it's, it's very easy.

So I can say journalese, I'm going to add demo here, create secret key. I'm going to go back to cursor. I'm going to say now I want you to add a feature that Now I want you to add the following feature. When I add an entry, upload it to OpenAI, get a snarky comment back,

display this in the success message of the entry saved. And again, I'll finish with, ask me any questions you need the answer to, to do this without mistakes. I'm going to add OpenAI API key here.

There's one other thing I'm going to do here is I'm going to remove the index.js at the top. And the reason I'm doing this is this is actually the context that's getting sent to their model. So instead, what I'm going to do is you can get the model to talk to your code base. And so I'm just going to send the index code base up to the model so that it can reason over all the files rather than just a single file.

OK, so thank you for providing OpenAI Key. Which OpenAI model do you want to use? Let's use GPT-4.0.

Two, do you want to send the entire journal onto to open AI entire three? Should we store that snarky comment in the database along the entry? Sure. Uh, actually, yeah, I'm going to try it. This again, live demo. So like that might be the thing that will chip it up, but we'll see.

Are there any specific guidelines or tone you'd like for the snarky comments? Um, funny. Do you want to handle any potential errors or fall back to the generic success message? Display the error to the user.

So it's telling me here, again, first we need to install OpenAI. So I'm going to do that, npm install OpenAI. And the rest, it is going to do itself.

So here you can see that it made changes only in two areas, server.js. And you can actually see the changes here, by the way. So you've got everything that's adding. So here it's adding, yeah, it's just instantly adding an open AI completion. And then it's updating the way that it's inserting this in the database.

Let's see what happens. Okay. Go back to this. Try number two. I'm going to select a different date. I'm only selecting a different date because I'm not sure if there's a constraint that there can only be one entry per day. I don't know. That could mess it up. Pour my heart out. I had a... nerve-wracking demo in front of 150 plus people. And it almost maybe totally worked.

Where's the save entry? Failed to save entry. Well, I guess it was almost. Let's figure out what it was. So I'm going to go back to... Hmm.

Sorry? Yeah, yeah. So I was trying to figure out if there was an error somewhere. If there's an error somewhere, I would copy-paste the error so that it would know what was there. But it doesn't look like.

I just have one thing. I've got this. So I'm going to take these two. I'm going to copy-paste. And I'm just going to say I got these errors. It seems there might be an issue with the open area configuration of the database. Let's debug this step by step. Okay.

And then I'm going to... I'm going to actually try one more thing, a little trick that I tend to use. Double check by... your solution with the entire code base. So again, what I'm doing here is I'm throwing the whole code base at it so that it can check itself based on what it's doing. And then it can double check the solution that it is proposing. OK, it's saying that it should work. We'll see. We can trust it or not. Exactly. Starting this again, I'm going to try and put a date in the past somehow, if that could be a thing. Save entry. Now we're getting more. I'm getting dangerously close to the end of my demo time. but I want you to be very clear of the fact that like all I'm doing is copy pasting errors here, right? I'm not actually coding.

So I apologize for the oversize. It seemed the database table structure wasn't updated to include common column. Okay. Uh, I'm going to add one more thing because I can see here that there was another error. Um, just to be sure I got this on the back end. Does that change your solution? OK, well, it is changing it, so I'm going to accept all and I'm going to again relaunch the server. And now I'm going to try one more thing. because now it actually wasn't launching the server.

I'm going to delete the journaling database. So that might be, nope. So close. Okay. Let's see. Um, again, nerve wrecking demo in front of 150 people went wrong three times. Better go right now. Save entry. Ah, Getting it back. At least you gave your audience a memorable performance. There we go. Nothing says unforgettable like a thriller on stage.

Conclusion

Well, not quite that, but... So, okay, I did 31 minutes. But think through what we just did. We started with a brainstorm that was purely written down in horrible language. We created a pitch. got a presentation out of that that was okay.

Like a professional designer would have been able to do better, but I definitely can't even get close to the quality of that presentation from a visual perspective. We created a simple, a minimum viable product, a prototype that we had in Claude, which looked somewhat like this. Um, after a few iterations, making it more colorful, we then uploaded that to cursor and we got this back out of it, which I must say, like, if you think about the two here, I mean, it got it.

It's not perfect. And obviously you can iterate through it and tell it, Hey, no, you've got this wrong. And like, maybe do that a little bit different. Um, but it got it pretty right. And then we actually hooked it up to an API with OpenAI that is looking at the entry and giving us an answer back. That entire process in the last 30 minutes. If you still think that engineering is safe from AI, I would love to talk to you about it.

But also, imagine how many people can now take this and start to build so much more powerful stuff on top of it. We are about to get to the point where anyone that has a problem can start to think about, what do I build to try and solve this? And not just anyone that can code. Anyone can just ask an AI to start building this stuff. And hopefully, I got to show you a little bit of this. Any questions?

Q&A Session

Now would be the time. So there's two reasons. One, I didn't want to add another solution to the demo. The other is that Claude is better at coding. And Claude has slightly more natural language. And so when I was thinking about building a pitch, I thought natural language was going to be an important thing. And so I wanted to use Claude for that. But reasoning-wise, ChatGPT tends to be better.

So if you need something with solid reasoning, ChatGPT outperforms it normally. Yep? Is there a benefit to using Cursor aside from the more pretty UI integrated ID? Because it's just built off of open AI then. No, there's a big benefit. It produced multiple files in one go. You can't do that with OpenAI at the moment. It also allows you to do differentials, so it figures out the updates that it makes in files, and you can look at what are the updates, just like someone making a pull request, and you looking at it, it's just the AI is making the pull request, and you get to decide yes or no, you go ahead with it.

None of that you can do if you just go through with, I mean, before Cursor, I would be in that process. I would have copy-pasted between Clod and my development environment. That would have been the thing. And to be clear, I used to be an engineer. Everyone I talk to now is not telling me I can't call myself an engineer anymore because I've been building teams and companies for the last 10 years.

I have a computer science degree, but I don't code for a living, which is why this is, for me also, extremely empowering, especially because I can still read the code. But I am nowhere near up to date. And so this is now crazy. Yep. So interesting enough, if you ask cursor for some of those in between, it will actually answer you as well. You're right that the cursor step is is Not quite at the stage yet where I would say someone who doesn't, yeah, someone who you have a clear benefit when you have a little bit of technical background, but it's no longer at the point where it's not figureoutable in a way. Even I don't know what the right word would be. You can figure it out in a fairly easy way, even if it might take a non-technical person 30 minutes where it took me a few seconds, but that will come with time. Yep.

The first is, when it comes to IP, right, and protecting your IP, how exactly would tools like this impact that? So there are two questions there. So one was copyright IP, everything. So yes, you definitely have to look at what you're using and how you're using it. So in this case, I'm using my own API key of Cloud, which is configured in Cursor. Cursor doesn't claim IP on anything that you have. You do, however, if you're on the free version, they are allowed to look at your telemetry data. So not the actual code. They don't train on the code, but they look at the structure of your project and stuff like that most of the time. I mean, I'm not a big believer of software as IP in the first place, but if you are, then you do want to look at that. But it's nowhere near impossible to protect. Also, all the main models, so Anthropic, OpenAI, Google, they all protect you as a user from any IP claims that would come from code produced by the models. So it's in their terms and conditions.

And then the second question is, like, with the large language models, right, you know, is there going to be a world where it gets more specialized? And then the second question, which was what happens when you go to more obscure places? The less information there is available on a particular environment, say hardware tech, online, the harder it is for these models to work. But this is classic disruption theory, which is that right now, it might classify as a bad coder. But that bad coder didn't exist or was 10 times worse four months ago. So you have to look at the trajectory more than anything else. You see the tragedy, like the war specific, So the way that it tends to work at the moment, and this will be the last question, because we've got Amir as well. The way that this tends to work is the big model ends up building out all the capability, and then you just have to add a small supplement for it to understand what the next slice is. So imagine you just give it Fortran's full language spec, and because it already knows how to code, it then is able to interpret what a new language looks like. So it doesn't need an enormous amount of data on top of it anymore once the generic model is trained.

So, for example, you know, right now we're generating a web page. Let's say I need to create hardware tech, right? Is there, like, how does... How does it work when you don't want it to sell itself to the groups of six?

Cool.

And now we're going to have another chat from Amir. And it's going to be extremely interesting because it's about, do these large language models reason like people?

Thank you very much.

I'm going to be here afterwards as well.