Practical Applications of Claude Artefacts

Introduction

So I'm going to try and do, and I say try, a demo of Clod. And I know that I have chat up there, by the way. That's not just me.

How many of you have already tried Clod before? How many of you have played around with artifacts?

Demonstration of Clod: Building a Home Financial Planner

not that many it'll be fun to see okay so in the 15 minutes that are coming um we are going to build a small app that is a home financial planner basically just something that puts in your savings, your budget, a few goals, like the holidays that you have planned and a home you might want to buy, interest rate factored in, and actually just builds a small app for you that you can go and plan the whole thing out.

The ChatGPT Approach to Budget Planning

In ChatGPT previously, I would have done something like this. Imagine you're an experienced home budget planner. And I would have said, I want to build a budget that takes into account my current savings level, a various set of home budget spend variables for you to make up.

And it then takes into account my income and available savings, looks at interest rate, and calculates how long it would take for me to buy a home at a variable price for you to determine. So this is a query that I would have, or that you could have put in to ChatDBT.

Limitations of ChatGPT in Financial Calculations

The problem is that ChatDBT is limited in a text back and forth. And second, it's terrible at math. So if you actually tried to get ChatGPT to go and do the budget for you, you'd probably end up with some problems.

Output Formats and Thought Process in ChatGPT

But also, in a good scenario, it might actually spit out a CSV. So in this case, I would have said, write me a CSV with all these variables so I can use it. So my ChanGPT is configured in a way that it always runs me through its thinking before it actually spits out the answer, which if you're not using it in that way yet, you definitely should.

But you can see what it's doing here, right? It's actually making up a whole bunch of variables, expenses on rent, groceries, utilities, and so on. Um, and it's now writing this to a CSV, um, and then building a small program that, what does it actually do? Let's create the full.

Attempting to Build an App with Clod

Okay, so it's building a program that then creates a file that I can then download. So let's let this finish. For some reason, it's writing the code and then it's executing it. It's basically rewriting a lot of it, but it's only a few seconds.

The joy of live demos. By the way, there are seats here for anyone that... I hear there's a correlation between how close you are to the front and how much you take away from a meetup. So anyone that still is standing and wants to sit, you can do that here.

Okay. So here you can see I now have an actual plan. Well, I can download it, but you can actually visualize it here. Wow, look at what it's done.

It's actually mapped it out as a CSV. The only problem is that there are no real variables here. It's basically put a value in every single cell, and it's then calculated through interest rate earned, total savings, home price. It's put the home price at 300K, and then was it months to the goal? Here you go, 70 months before I would be able to start buying the home. So it's actually done a lot of the calculation for me in this particular case. But again, this is a one-time thing that I wouldn't be able to reuse.

Introducing Custom Instructions in Clod

Now I'm going to try and do the exact same thing in Cloud. So I'm going to take the same query. Now Claude doesn't have custom instructions. So what I'm going to do here is I'm going to add just two lines.

Uh, walk me through your thinking step by step before giving me your answer. Um, and here I'm going to change, I'm going to sell it. I want to build an, uh, an app that manages my budget. And then it takes into account current savings levels, all the things. And then I'm going to say make the variables configurable with inputs and sliding scales. And graph. my savings level as well as the amount I need for a home on a monthly basis so I can see how long it takes to get there.

These are not great and clear instructions. Obviously, if I were to go and not do this in a live demo, I would spend five more minutes actually refining these instructions so I'm much clearer, because this is terrible text. But asking Claude to outline its own thinking before answering is going to at least remove a lot of the problem that I have, because it's basically going to restructure everything I asked it on my behalf. But we'll see where we get to.

Okay, so here it's identifying all of the variables. Did I? That is a problem. Okay, so the problem is here I asked it the CSV. So I'm just going to stop this. And I'm going to edit because I didn't want the CSV. I wanted the app.

Artifex Integration for Instant App Rendering

And this is Artifex on the right-hand side. So what it's going to do now, it's building a full app based on everything that it outlined on the left-hand side. And in a few seconds, the difference with Artifex is that it doesn't just spit out code, which ChatGPT does, and you can host that yourself and do everything you want with that. But here, it renders it instantly. So on the right-hand side, I now have an app

which gets my current savings levels. I'm going to make this as 50,000. My monthly income is, I don't know, 4,000. And my target home price, well, we keep that 300K. The interest rate, and say, well, actually, we're in difficult times nowadays, right? So interest rate, well, actually, so if I put it in a bank account, my interest rate, I don't know how it is over here, but in Europe, I'll get about 5.3% at this point if you're putting it in a good savings account. Down payment on the house, interesting that it figured out itself that it has to be about the down payment, not about the full payment of the house.

Iterative Feedback and Real-Time Graph Responses

It didn't tell it. I've got my monthly expenses. And then, ah, it has not created the graph. Okay, so you can see the starting point here. You've got the starting point of the app. You can say, okay, this is great, but I'm missing a graph that shows me my monthly savings level and how long it takes to get to my house down payment. I would also like a pie chart of the monthly budget.

So what I'm doing now is I'm literally live feeding back how I want this app to be different from what it initially spit out. We'll see if it gets it right. The graphs are not showing. Live demos are great. So what I'm telling it here is the graphs are not showing. And there might be something wrong with the library that it's using. So this is something that occurs from time to time.

Troubleshooting and Improving the App

So basically, Claude doesn't quite know all the libraries that it has access to. So sometimes it will use a library that exists somewhere on the internet that is used for displaying graphs. The way that Claude has been set up it doesn't quite have access to that particular library because it's sandbox So this doesn't have access to the the sandbox doesn't have access to the internet So it can't just grab stuff from everywhere and so when it uses a library That it doesn't actually have access to you have these types of problems. So let's see if it here we go We now have these two graphs and I wonder so let's see what happens if I change my housing there. Okay.

So I'm looking at taking 54 months to get somewhere. If I could put this down 24 months. So this is a real time responding graph at this point. If my utilities go up, the time it takes for me to get to my down pays a down payment of the house goes up as well. If I, if my interest rate goes up, which we said was the case here, we are, we just cut four months off of the time it takes to get to my down payment. I don't know about you, but this is absolutely crazy that this is possible today. We are getting extremely close to the point where The entire user interface for an app is built on the fly based on what your specific requirement at a particular point in time based on your context is. And we're able to do this within, now here I did it within 10 minutes. We're looking at 10 minutes. So I'm even going to be able to take questions. But it's absolutely crazy how fast this goes. And you can imagine how far you can push this. I could spend three more minutes on this and ask it for a different graph. Oh, I didn't even show this one. I had asked it for the pie graph, pie chart. And here you go. You have this broken down as well. I wonder if this is also responsive. So if I put miscellaneous, suddenly a lot. There we go. Miscellaneous is now 41% of my budget. So this entire thing is real time. You can imagine how many different applications there can be from this. But hopefully, this is an introduction to what is possible today.

Q&A: Understanding the Demo and Its Implications

And on that note, any questions on how this worked? Yes, sorry, sir, at the back. It's very interesting.

Impact on Software Development and Job Markets

So what do you think are some of the implications of this for ? I'm assuming software Yeah, so the question is, what are the effects of this? Lots of jobs are going to be affected by this, but also what is the... One of the biggest effects is what I was saying before, which is that I think we are moving towards a place where every single user experience you interact with is built on the fly.

Which, to be fair, in my own head, I've been building apps for... 25 years at this point. I don't quite know what it means, but it somehow means that the entire way that we think about designing apps is going to have to change because it's not about what does the final result look like. It's almost like providing a framework to the AI so that the AI can build the right thing based on the right parameters more than it is about having very clear opinions on how something should or shouldn't look or what you can or cannot do with an app. And that's going to move extremely fast.

As I said, this is live right now, so you can all use it. It's accessible under cloud.ai. And the other bit is about Well, we're going to talk about the future of work and future of education.

The Future of Coding and Building Apps

Fundamentally, I think the ability to code is not going to be a thing that is going to matter that much, but the ability to build is a very different question. The ability, even just the two or three sentences that I quickly put in here for a live demo, I was able to do, one, because I have built these types of apps for years. Second, I'm an engineer by background. I would imagine some people in the room might have spent an additional 10 minutes or 15 minutes trying to figure out, wait, how do I actually want this thing to work? And so the engineering mindset is still going to be extremely important as you're building stuff in order to solve bigger problems. But I think that everyone in this room is going to be building their own apps on a regular basis in order to solve problems that they have right in front of them.

Assessing Building Skills

So when it comes to coding ability, it's pretty straightforward and established how we assess that.

But how do you see us assessing the ability to build? Assessing the ability to build. I do not have a great answer to that question.

How do you assess someone's ability to build a great product? Part of it is basically is the user satisfied? Are you finding a solution that the user thinks satisfied their particular need at that point in time? That would be the best. definition for me.

Any other questions? Yes, sorry. Thank you very much for this.

Complexity and Limitations of Building Apps with Cloud

I'm curious that more complex is the type of app is able to back in, is it able to Yeah. And if it's not there, what's the So the question here was, how complex of an app can you build? The reality is not that complex yet.

One, this is restricted to front-end only because it's sandboxed, so it can't interact with the internet. You don't have a database. I mean, you can have local storage, but you can't do much more with it.

Having said that, Cloud can absolutely build a backend for you. It's just it'll spit out some backend code and suddenly you have to go back into engineering where most of the room here would not be able to do this because you'd have to spit up your own server and then copy paste a bunch of stuff. It's not too hard, but it's still stuck there.

Progress and Future Potential of AI in App Development

If you think, however, where we were November 22, the ability of GPT-3.5, it was great what it could do in terms of co-production, but bugs all over the place. It was great and terrible at the same time. GPT-4 was a massive leap.

Cloud 3.5 is another leap. In two and a half years from now, two years from now, you're starting to look at extremely complex apps. And the biggest part...

the differentiator between being able to reason over complex apps or not was the context window for a while and like now it's about can it actually understand the full scope of what you're trying to produce and if it has enough context and when I say enough context it understands the full code base and it understands exactly what you're trying to build and what needs to be tweaked and so on it's getting better and better at actually getting to the right points but we're not quite there yet yes sir

Personal Experience and Mindset Shift with Cloud

No, I mean I was literally talking to Alan before I actually so I flew in today I did this on my notepad on the flight over without access to internet and I didn't even have to double check basically or I didn't even have to live throw it in because I've been using cloud already for quite a while.

And this is the biggest thing that I would invite each of you to try is it's about how you change your mindset. It's all the things that we thought were impossible before that now aren't. I say it's not that hard, but it's also really hard.

It took me six months after Challenge DVD came out to try and get to a point where suddenly I was getting to solutions that seemed extremely obvious in hindsight. But my brain didn't even think about using the AI in those ways before having gone through those steps before. Now, these meetups here weren't there when I had to do it. So the whole idea of these meetups is that we can try and accelerate a lot of that so that you can try and get to that other side faster.

But I would definitely say try and use it on a regular basis. If you're not using these models on a daily basis at this point for each of your respective jobs, unless you are manually working, I would say that you're probably missing out at this point.

Final Questions and Wrap-up

One more question. Sorry. Yeah. Sorry. Thanks.

I have a question. I'm just curious. So if you're connecting your cloud to a external database by API, how do you So the question is, how do you use which model to use for your apps?

Now, this is a slightly more technical question, but basically depends on what you're trying to achieve. At this point, the thing is this changes every second week. In some cases, there are some periods where it's every day. But at this point in time, I would say Clod 3.5 is probably the best for code production. GPT-4 is the best for reasoning. Gemini has the biggest context window, so if you have to reason across thousands and thousands of pages, then Gemini is the best bet you have. And if you want to run your own open source model, it's between Mixtrel and Lama at this point.

Conclusion

And on that note, I'm going to hand it over to Flora for the next talk on the future of work and education. Thank you very much.

Finished reading?