Introduction

Hi, welcome. Thank you for having me.

My name is Guilherme and I come from MindStone. So, I was a mobile engineer and now I'm a self-proclaimed full-stack engineer.

The Power of LLMs in Software

And why? Because of the powers of LLMs in software.

I was trying to capture exactly what I could say that would summarize what LLMs mean specifically to me in engineering. And I try to come up with, I am or was a mobile developer, but I am now a whatever developer.

More or less, OK, grant me this. 1But basically what I'm trying to say is that LLM has really, really expanded my way to just be impactful in different stacks, not just mobile.

Transitioning from Mobile to Full-Stack

So day-to-day mobile key life, it was pretty much Xcode and Android Studio, which are Apple's and Google's development systems for mobile development.

And full-stack key nowadays pretty much uses Claude, which is a combination of different models and even AI Chat, if you're thinking about OpenAI and ChatGPD, so they are competitors, and Cursor.

Cursor is an AI-assisted code editor that I'm going to give you a quick glimpse in a second, but this is pretty much how I moved across in the past couple of years with generative AI just skyrocketing.

Building AI Readiness Tool

So this is a quick tool that we built internally to externally showcase our core value. 1So we want to bring people into using AI in their role, in their industry, in their context.

And with the power with AI, I personally could build this quite easily. Obviously, I'm going to cut some corners during today's demonstration, but basically what we're doing here and the power to showcase is that if you have components, if you have a design system, if you have the context of your code base, you can pretty much get some draft going that you can build on top.

was really beneficial for me from coming from a mobile ecosystem to a web ecosystem which is very similar but it has their specificities too so let us build the ai readiness tool v1 again i'm going to cut so many corners i'm going to talk a bit fast because i'm on a timer but stick with me

Working with AI-Assisted Code Editors

So if you're familiar with software development, you pretty much know what this means. This is an editor. This is a code editor called Cursor.

So just to have a playground of what I want to do. Second to do So this is our playground.

I'm going to start doing exactly how I would approach a new design, giving a new system that I have to build. In this case, the tool that is the AI Readiness.

Now, I'm going to cheat here a little bit. I already have a prompt that I'm going to walk you through. And I don't recommend doing this all the time, which is copy and pasting the code that the chat GPT or the clouds of this world will put you.

But I'm quite confident. I tested this only a thousand times. So let's go and see if I don't mess this up because live demos are always fun, right?

Demonstrating AI Integration

Before I do so, and I'm going to look here and turn my back to you, apologies, just because of the screen situation, you have on your left, on your right, as I mentioned, the chat interface. And here, if you haven't used Courser, what you can do is you can pick the model that you're using, and then depending if you have or not your API key for different systems, say OpenAI or Anthropic, you'll have the default version, the free version. But if you pay for an API key and you have your API key, you can just pass this into your cursor editor and you'll have access to the pro version of these models.

Cool. So I'm using Claude. I'm going to showcase a little bit dimensions. You can actually mention files and folders and code that you have in your code base to go and try and get some code, say the components.

I want this page to look a little bit more like this. I use this quite a bit and I'm going to showcase this in a few moments. You can have a conversation without any context, a silo conversation with the AI for it to just be one-to-one exactly as is, or you can have a normal chat with it, so it will remember the conversation that you're having, it kind of understands, it will hallucinate, so again, be mindful of these little things that can happen, and you can have it search the entire code base, and I'm going to showcase this soon as well.

So as I was saying, I have this prompt already pre-filled. I'm going to quickly go through it for my generative AI and LLM AI readiness. I want to, I have it here actually.

So, our high port is going to become Hopefully no codes, because I asked it for all of the imports. Pretty much standard vanilla TypeScript as well.

So now if I go to the in theory. Did I do it in the right place? I didn't do it.

So this is the playground. Playground. So it does have something. It has a timer. It knows it's the AI readiness, and it has some questions.

I'm going to tap through it. It's breaking up, not doing much.

So see the components aspect that I told you that you kind of need to give it for it to know? I didn't even know which one I'm selecting. I'm just typing away. And then in the end it says, you're terrible at AI readiness, so thanks.

Showcasing Other Tools

Before I go and try and make this actually something that I'll be proud to show to people like yourselves, I'm going to show yet another tool that we have, which is the return of investment calculator. This is a tool that we built, again, with a lot of AI assistance, but using components.

You can see that it's a lot more color, a lot more bright, a lot more paddings, all the things that designers told us that we have to do. This is exactly what I want my tools from this point onward to look like.

So again, cheating a little bit, I'm just going to get my second. a prompt and at this prompt I'm going to go and say this is cool but can you all see at the bottom here can you go and update this code and I'm going to do a at root dot playground so it knows meet up playground with the root oh I need to add it root.roidcalculator styles in UI.

Make sure the colors are based on the same style and that icons typeface and fonts have adequate sizing, otherwise you'll just do whatever and it will not contain any of the margins that designers so much love. Again, output the whole file because I don't want to be missing any of the other components and with the questions code as a whole. Again, I'm going to pass this to the whole code base.

So it knows that it's going to go for my playground. It's going to go into the return of investment calculator. It will understand what it does have.

It's starting to pull on all of the imports for my components, the car, the car header, the title, all of that. And in theory, and I only tested this seven times before I came in today, it should work.

Again, please do not copy and paste without understanding what the code is doing. I am doing it for the sake of this demonstration, just to showcase that hopefully the demo gods are with me today.

Building the AI Readiness Quiz

But in the end, we should have something that resembles the AI readiness quiz, very fake data all the way, but that we are pretty much happy to share. Cool, it finished up. Bear with me.

I'm going to copy this code. Again, don't do this at home, kids. And this. Of course.

Wait, I have one. Ah, the usual culprit. Bear with me. God damn it, I can't see. Here we go.

And we have our AI Readiness quiz with the return of investment calculator components. It kind of knows. I didn't do much apart from this.

There was no hidden code behind it. I just told them, look, I know what I built in the past. I have the context of this code base.

It still has some state that I need to obviously fix, but it's looking way prettier. And this is how I would go about building a V1 draft of any of the tool on the React aspect of it.

Sorry I didn't pass. I still suck at AI Readiness, obviously. So this, as a developer, is quite okay to comprehend.

We have LLMs, we have an editor, we can do some routes, we can showcase something.

Conclusion

But if you're not a developer, I'm going to push you to go into Claude because Claude has this... feature has this possibility of showing code or snippets as artifacts.

So just to make this easier and a little bit more interesting, I'm going to ask Claude, can you write me a React component for the tic tac toe game? And if you have an idea of an app, if you have an idea of a platform, if you have anything in your mind that you really thought was gate-kept by developers, that time is gone.

You can really just go into tools like Cloud, and it will help you get, obviously, you'll not understand exactly what it's doing, but you can build on top of it. And here, with this prompt, again, I didn't prepare anything before this.

I have a tic-tac-toe game going on. So yeah, what else do I have to say? Give me a moment. Wait. Cool.

Final Thoughts on AI

Things to be aware. AI is a tool. Use it at touch. It's not going to replace anyone yet, but just use it as a clutch.