So today's <a href="/tags/workshop">workshop</a> will be <a href="/tags/artificial-intelligence">AI</a> for front-end developers. I have a couple of assumptions and I just assume these are true. Even if they aren't, just let me know in the chat. I assume all of you have used gpt or Bart or whatever kind of AI-prompting tool already. I probably also assume you've been using Github Copilot or maybe a different <a href="/tags/code">code</a> assistant as well. These are things we won't be covering. I did a <a href="/tags/workshop">workshop</a> once, a very basic one, where I went into detail over these tools as well, but today we'll be a bit more focused on <a href="/tags/code">code</a>. So we'll be writing <a href="/tags/code">code</a>. You can use a <a href="/tags/code">code</a> assistant if you want to. I'm using a work computer and I'm not allowed to use Github Copilot. So for this one, I won't be using an editor that has some <a href="/tags/code">code</a> assistants in there. So I'm a bit jealous of the rest of you who are probably able to use a <a href="/tags/code">code</a> assistant.

So today we'll be building using Lengtchain JS. You probably heard about Lengtchain. You maybe have tried it. Maybe you've used the Python version. There's also a <a href="/tags/javascript">JavaScript</a> version which has pretty much all the things that the Python version has. But then for <a href="/tags/javascript">JavaScript</a> or <a href="/tags/frontend">frontend</a> or <a href="/tags/typescript-libraries">TypeScript</a> developers, it's a pretty nice tool.It is mostly a tool to interface with models and use models in your own applications. If you want to build your own model or maybe you want to build a very complex <a href="/tags/artificial-intelligence">AI</a> <a href="/tags/backend">backend</a> service, I wouldn't necessarily recommend Lengtchain JS. I think it's really good in doing the things we'll be doing today. You can pretty easily use it to maybe create your next startup or create a nice new feature in existing projects you have.Here's a QR <a href="/tags/code">code</a> that goes to the GitHub repo for today. Let me also post the chat in the channel because you're probably watching on your computer so you won't be able to use the QR <a href="/tags/code">code</a>. This is the link to the GitHub repo. And in the GitHub repo you can find a starter application. So this is just a <a href="/tags/react-components">React</a> and Tailwind app. Nothing than just some styling. And you can also find a set of exercises. We'll be doing in these two and a half to three hours. We might take some breaks in between or maybe we finish early. It's the first time I'm doing this <a href="/tags/workshop">workshop</a>. So it's always a good thing to figure out how fast we can go through all the different exercises. So make sure to open the repo and then you'll see...So this is the repo. It has the bootstrap application. It has a readme and it also has the end result of what we'll be building today. So today we'll be building this custom MyGPT application and you can use it to ask questions against open <a href="/tags/artificial-intelligence">AI</a>, but you can also swap it out with models from different providers. And based on our questions we will get an answer. We are going to try and build it as a Jetlike interface. We're going to go over some prompt engineering, look at like several shot prompts or a few shot prompts. We also will be doing some retrieval. So we're going to try and take our local <a href="/tags/data">data</a> set and place it directly, or actually not place it in a model, but use context from a local <a href="/tags/data">data</a> set for the model to produce better answers for us. And then we have all sorts of time for questions or playing around with different things. So at the end of this <a href="/tags/workshop">workshop</a>, you will have an application like this, that you can use with an open <a href="/tags/artificial-intelligence">AI</a> model and then also with your own <a href="/tags/data">data</a> set. And based on the sort of, we only have like two and a half to three hours, so the number of things we can do is quite limited, but I do think it will give you a nice feeling of what you can build and also some insights into the basics of starting to build your own thing on top of this. Starting something is always the hard part. So I hope to be able to help you a bit with that today. So make sure to check out the repo, and then we're going to take a couple of minutes for everyone to run the Bootstrap application. It is a repository, feel free to start it or fork it in case you want to. It's always helpful.So once you have the repo, you're going to, you're going to have to clone it to your local machine. Myself, I like to use VS <a href="/tags/code">code</a>. So the only thing you need to do to clone this to your machine is run git clone, and then paste in the address of the repo. And after this, you will get something similar to what I have in my VS <a href="/tags/code">code</a> here, which is the Bootstrap application, and then also the readme. And I'm going to want you guys to go to the readme, and then follow the instructions here to set it up. There's also a free requisite where you're going to need a open <a href="/tags/artificial-intelligence">AI</a> API key. And you can sign up for a free trial. So they will give you a couple of dollars in credits you can use. And this should be more than enough for the exercise today, you need to go here. And then you need to do login at the top. And this will create a open <a href="/tags/artificial-intelligence">AI</a> API key.

And you'll be able to use this API key to run the examples we're going to be building to later. So if you don't want to sign up for an open <a href="/tags/artificial-intelligence">AI</a> API key, you're going to need something else. There's a whole list of LLMs you could use. So if you have a key for any other one of these, feel free to use those.Yeah, if you signed up for an account before, you might need to add some credits. They are going to give you free credits for the first month or so. So it could be that they expire. It is fairly cheap, though. So once preparing the <a href="/tags/workshop">workshop</a> materials, I think it cost me like a dollar at most. Because if you look at what we're going to be doing is, well, depending on the model you use, we're going to use this model by default, 1k tokens. And I'm going to explain to you more what tokens are. Only costs you like, well, far from a cent. And we will be using an abandoned model, which is even cheaper. So it should be fairly cheap. If you would put like five dollars on there, you should be able to do everything we're doing today. You will get some free credit in the beginning, which should be like five dollars. And it's available for the first month, 30 days or so, something like that. So it should be enough to to go through these exercises. If you're not able to set this up, then feel free to send me a private message here and then I'm see if I can create a API key for you. But then you only be able to use this for the next hour or so. And then we're going to do this for the next two hours because I'm going to delete it once we complete the <a href="/tags/workshop">workshop</a>.So if you have your API key, you don't have to do anything just yet. Just make sure to run the API, to run the application as is defined in the README. So make sure to get your API key and then run the application like this. And any first exercise, which we're going to be doing together, there's a place where you should put your your API key. So let me also go to my VS <a href="/tags/code">Code</a> editor. It's right here. So I'm assuming you. Clone to repo. And once you clone to repo, there's a directory called my GPT. So you can just see the into there, you need to run <a href="/tags/npm">npm</a> install. This will install the dependencies for the project or at least the dependencies we need in the beginning, which is like VTest, I think as well, because we'll be well, we might add some tests in between. And also Tailwind, because I'm using Tailwind for styling, because I generally dislike writing <a href="/tags/css">CSS</a>. If you're not familiar with Vt, it's a, how do you say, it's like a build package for applications. It's a bit like create <a href="/tags/react-components">react</a> app. But then for a number of <a href="/tags/javascript">JavaScript</a> front-end <a href="/tags/frameworks">frameworks</a>, including <a href="/tags/react-components">React</a>, not sure if you want to call <a href="/tags/react-components">React</a> a front-end <a href="/tags/frameworks">framework</a>, but that's up to you. So you need to install the dependencies and then you can do <a href="/tags/npm">npm</a> run dev, you can also use <a href="/tags/yarn">yarn</a>, whatever you prefer. Tick them all to school and just stick with <a href="/tags/npm">npm</a>. And you should be seeing this. So it has a title, my GPT. It has a text message box and a submit button. It's pretty similar to what gpt looks like, or maybe some of the other GPT interfaces you've been using. And this we're using Lengtjn, I'm going to keep the <a href="/tags/documentation">docs</a> open here, just in case I might need it later on. So this is our starting point application. You're going to get some hands in the chat or somewhere else if you have issues getting this screen.Okay, then I think we're all good. So once you have the screen, we can continue by going to the first exercise. And this includes installing Lengtjn, adding the OpenAI key to a.environment file in the root of the Vita application, meaning that you will need to create a.environment file here, which I think I also don't have, so you can do.environment. And then here you should add your OpenAI key, which starts with SK and then something else. So this is the first thing you do, you install Lengtjn, and then you need to put your OpenAI key in here.

Once you've done that, there's a couple of steps you should take, and the <a href="/tags/code">code</a> for this is all here. And we're going to do this together and then I'm going to let you create a test for this yourself.So we need to create a new file called util slash Lengtjn.js. So I'm using <a href="/tags/typescript-libraries">TypeScript</a> in here. You're more than welcome to use <a href="/tags/javascript">JavaScript</a>. We don't have that many typings that we need, and the cool thing about Vita is it's able to parse both <a href="/tags/typescript-libraries">TypeScript</a> and <a href="/tags/javascript">JavaScript</a>. So even though I'm using <a href="/tags/typescript-libraries">TypeScript</a>, feel free to use <a href="/tags/javascript">JavaScript</a> if that's what you prefer. If you're not familiar with <a href="/tags/typescript-libraries">TypeScript</a>, also no need to stress, the number of typings is very limited, so you don't have to worry too much about needing to create types or doing complicated stuff in <a href="/tags/typescript-libraries">TypeScript</a>.So I will need to create a new file, which I call util slash Lengtjn.js. And in here, I'm doing two things. I am importing a OpenAI interface from Lengtjn. As mentioned, Lengtjn is able to connect to all sorts of LLM providers, such as OpenAI, but also Google, IBM Watson, whatever kind of thing you want. And then we need to initialize a connection to a LLM. And the default model for OpenAI will be GPT 3.5. Later on, we're going to play with different models. If you want to use a different model from the get-go, feel free to do so, but I'm going to stick with the default one for now. So we're going to initialize OpenAI, and then we create a connection that we can use to interface with the model. And then the second thing I'm going to do is I'm going to create a small little function, which I call generate answer, which takes a question. And you can see it's the only <a href="/tags/typescript-libraries">TypeScript</a> I have in here because all the rest is being inferred by <a href="/tags/typescript-libraries">TypeScript</a> automatically. So I have a function called generate answer. I have a question, which is a string. And then I have a return, which is answer2. So I'm going to use this function from Lengtjn, where I predict the answer to a question using my LLM model.So one of the reasons I like to work with Lengtjn, especially for like starter projects, where you're kind of figuring out what's the best way to do things, is that these functions like predict and there's other functions we'll be using later on. They don't really care what provider you have for your LLMs. So in theory, all the <a href="/tags/code">code</a> we'll be building today, you'll be able to swap out OpenAI with IBM Watson, with Google Vertex, with some of the other maybe open source providers, such as Mistral. So it's kind of keep things wide open for you and you're able to connect using your own LLM provider of choice. This is my first function. I call it generate answer and it should return an answer, which is a string because this is all typed in OpenAI. Lengtjn will make sure that my answer is a string. So, yeah, it's a good question if you can train your own model. You can't really do it through Lengtjn. It's better to do it through a specialized tool for this. So you should look into something called LLM Ops. It's like <a href="/tags/devops">DevOps</a>, but then LLM Ops. Me personally, I work at IBM after my starter was acquired. IBM has tools to do this which are called Watson X. I'm pretty sure OpenAI has a way to fine tune your model and you can also build your own model from scratch. But for that, you probably need experience as a <a href="/tags/data">data</a> scientist or a <a href="/tags/data">data</a> engineer. So maybe you are one and that will be great. That would be great. But it's probably more reasonable that you're looking at fine tuning, which means taking an existing model and sort of continue training it using fine using other <a href="/tags/data">data</a>, which is your own <a href="/tags/data">data</a>, which is what we call fine tuning. Or at the end of the <a href="/tags/workshop">workshop</a> and one of the final exercises. We'll be doing some retrieval or basically augmented retrieval. And this means that we will take our own <a href="/tags/data">data</a> set and together with a question to the LLM, we're going to provide parts of our <a href="/tags/data">data</a> and we're going to be smart about which parts of the <a href="/tags/data">data</a> we're going to be sending along. And then we're hoping that the model will be able to generate correct answers for us based on the <a href="/tags/data">data</a> that you provide. More on that later on. So for the first exercise, you should have this function and what I want you to do. In order to try it out is create a test. And for this, we need to use v-test.

v-test is quite similar to other <a href="/tags/testing">testing</a> libraries you might have used. And we're going to write a small test and in this test, we're going to see if our question is matching an answer. It's kind of a silly test because in theory, the LLM could generate a different answer every time, but it's a good way to see how to interface with our newly created function.So I'm going to create another file called blank-chain test.ts and in here, I'm going to paste this <a href="/tags/code">code</a>. And now to run this, I need to run <a href="/tags/npm">npm</a> run test. And this will then run this test solution. You might want to do like a <a href="/tags/cli">console</a> log here. For answering. Maybe you want to see what it resolves to. And of course, you need to swap out this question with your own question. So look at this like that and then you need to swap out something here with the actual answer. So I see Ricardo in the chat has a nice example that you'll be able to try out. Actually quite smart because you can actually see the results in the chat. So if you actually want to try this out, you'll be able to try out and actually quite smart because for this one, the LLM will probably give you the same answer every time or at least the answer should contain for either as a numerical value or spelled out.So let's take a couple of minutes to make this test work for you. It's a good way to test the working of our generate answer function. Here. And you need to type something here. And then feel free to use the <a href="/tags/cli">console</a> log in between everything set up correctly, you should be able to get a value for answer and then you should be able to match it in this test right here. As I said, it's a bit of a silly test, but it's a nice way to try out our function before implementing it into the application we have. So we're going to take five minutes for this to do exercise number one. If you already finished it, feel free to play around by sending different answers and see if there are already some improvements you might be able to make. So this is the function we created and this is the test we created. And I also have this small <a href="/tags/cli">console</a> log. I saw some nice examples. So try to put something in there that isn't too vague. So I think I saw a math exercise. So what is the result of two plus two. And if we run this test by doing <a href="/tags/npm">NPM</a> run test. We should be able to see an assertion error because we have the result of 2 plus 2 is 4. And here we have said is the actual result of our LM, meaning that. What is the numerical? So maybe this will get us a. Let me see how someone did it in the chat. See. What is two plus two. Maybe that gives us a better result. And this says two plus two is four. And that's the kind of thing I'm saying. You can always get a different results from the LM. So that's why it might take some time. If I would rerun this. It might fail at some point because now it's saying two plus two is equal to four. So it might be a problem because it says 2 plus 2 is. It might fail at some point because now it's saying 2 plus 2 is equal to 4. So it's always some fiddling around and that's why I also said it might not be the best test to run because every time the LM could have a look at the. Could generate a slightly different answer for you. So it's a bit of a silly test, but it's a nice way to try out or generate answer function. And Stuart, please scroll back up.

So it's a bit of a silly test, but it's a nice way to try out or generate answer function. And Stuart, please scroll back up. You need to double check. You have the free trial credits. In your OpenAI. Yes, there's all sorts of things you can do. It's speed test speed test is quite similar to. Autotesting <a href="/tags/frameworks">frameworks</a> you might be using. So there's all sorts of things you can do so we can do. I'm now using using certs. So you can do all these kind of things, so to be null, to be falsy, to have a specific length. We can also say. You can do some other things like it contains a string. It contains an object. There's all sorts of tests you can write. As I said, it's just a bit of a silly example. And I see there's smarter people than me trying to do reg access there. So that's really cool. Thank you for sharing that. And you can also. So that's really cool. Thank you for sharing that.

So this was the exercise number one. I see some activity in the chat around a time out. So, yeah, you might want to increase the time outs for the test. That's something you might be able to do, so what you can do here, you can put a. Timeout value like this, I think, or it should be. Yeah, it should be like this. Because maybe it will take a long time for the answer to resolve. It might depend on your location as well. I think OpenAI tries to. Appropriately serves their intel from the US, rather than Europe or Asia or wherever you might be. So increasing the timeout like this might be a solution to your problem. It means saying this, it answers a question, I think here's a function call, and after that you can pass an object and any object, you can set a timeout. And this will make sure that you don't see any timeouts from the API, as it might take too long to resolve. OK, any questions about exercise 1 so far? If not, then we can continue to the second exercise where we're going to add our.

So we're going to be looking at exercise number two, and this is the exercise where we'll be using our new function and hook it up in the app components. So the app component is our main component. Let me stop my test and run. The application again. Looks like this so app component is our main component. It's basically this whole thing. And what I want to do in here, I want to set up some state variables first. I'll be using just really simple state variables. It's a simple application that the building, so I don't want to get too much involved in <a href="/tags/state-management">state management</a> or setting up use context or using something like X state. So we're just going to use simple state like this.We need to import or generate answer function. And then we need to create a handler function. And with this handler function, we can use it to call it whenever we submit the form elements. And then we might want to make this into a controlled component as well, because I want to make sure that the text area component is controlled. So that whenever I start typing, it shows the state variable question rather than the value I type in there directly.So for exercise number two, I'm going to give you, I don't know, let's say 10 to 15 minutes to create a handler function, create some basic state. And then be able to call our new function whenever you submit the form elements that we have in our app component. The basic step you need to do here is one, import the form element. Import the function to call open <a href="/tags/artificial-intelligence">AI</a>. Two, you need to create some state variables. And I want to have these in the format where you would have a question. Which is a string. And also the answer, which is a string. So this should be your state object. And then three, I want you to create a handler function to call the open <a href="/tags/artificial-intelligence">AI</a> function. And then finally four, well four and five. So four, turn the text area into a controlled component. And then five, I want to submit the form and call the handler function. So these are the basic steps you should take for exercise number two. Like I said, we're going to, well, let's start by taking 10 minutes and then we're going to check in and see if we need some more time. These are the basic steps you need to take. And also if you go to the readme, there are some <a href="/tags/tips">pointers</a> to point you in the right direction. So 10 minutes from now for exercise number two. Let's just look at the solution then and if there are any questions you can just have a look what's going on. So if we go to the readme, we have exercise number two. So we want to be able to use the message box in the application to send the question and show the answer in the screen. So what we want to do, I'm going to reorganize my screens. So what we want to do is we want to be able to use this message box to submit the question. So from our app component, we need to call the new function we created. For this, I'm going to copy-paste these imports. So we need to import useState from <a href="/tags/react-components">React</a> as we need to have some state variables and then we need to import the function we just created. So that's basically just this part. Then we need to create some state variables and I'm going to create just really basic ones. I'm going to say const. I'll actually have them in the readme, so let's just use the readme. So these are the two state variables I'm going to create. The first one is a variable called question. So this one will be used to make the text area a controlled component. You can see this is just an empty string. And the second one is the result state variable.

The second thing we need to do is we set up our LLM like this and we need to create a function that creates the vector store. So I'll pick up and copy this part and just put it right above here. So we create a variable called vector store with the type memory vector store. So this is our in-memory vector store. We have a function called generate and store embeddings. It will load the file from the public directory, splits it into smaller chunks and stores it in the vector <a href="/tags/database">database</a>. Let me first save this as mentioned. It's all in the readme so you should be able to take it and try it out.The next thing I need to do is for my application, which somehow resetted back here. I want to import this. I want to generate and store embeddings and on the render of my application, like this and only the first render. So this is a bit ugly but we're going to do it anyways. We're going to run this function. What will it do? Whenever my application mounts, it's rendered for the first time. It's going to run this function. It's going to take my <a href="/tags/data">data</a> sets, which is just a text file but it can also be a CSV, it can be a webpage, it can be a URL. You can do all these things with LangChain and it is going to store it in this local vector store. Let me run this application. Browser is here. And if I look at the network tab and I refresh it, you can see there is a call called embeddings. And all these things, all these sort of, almost like coordinates, these are all the different chunks because we're sending our chunk <a href="/tags/data">data</a> here. Sending all these different embeddings like this. So it's okay if it doesn't make complete sense. The retrieval part is probably the most complicated thing we've handled today. But the first step was doing these embeddings. So if I go back to my slide, we took our file or <a href="/tags/data">data</a>, we went to a text splitter, we generated the embeddings and store them in a local vector <a href="/tags/database">database</a>.So the next thing we're going to do is we're going to alter our generate answer function to retrieve information from the vector <a href="/tags/database">database</a> or the in-memory vector store. And I'm going to put this here. We need to import another thing like retrieval, <a href="/tags/testing">QA</a> chain and load <a href="/tags/testing">QA</a> chain. So these are things we're gonna chain. And then if I go back to my read me here, I have my generate answer function and I'm just going to get rid of everything we've done before just because I can. Of course you want to make sure that your prompt template and everything is still in there. For now, I just want to simply show you what's going on. So LinkedChain is doing all the hard work for us here. It helped us to split the text, put it into smaller chunks, put it in a vector <a href="/tags/data">data</a> store. And now it's also helping us to retrieve it from the vector store and also chain the different documents or embeddings into one result. And then if I save this and go back to my application, let me also go to my dataset. It's data.text. So for example, I can try and ask it how many bicycles are there in Amsterdam? Let's see. How many bicycles are there in Amsterdam? Okay. So now I'm asking a question and it says the given context information does not provide any information about the number of bicycles in Amsterdam. Which is interesting because it should get it. Let me ask this question then. So what are the top things to do in Amsterdam? So what are the top things to do in Amsterdam? So now it should come with a result that includes some of the things I have in my dataset. Top 20 <a href="/tags/tips">recommendations</a>. It probably has all the same things as I have in my dataset. So historic breweries. Let me see if the football club is in here. It isn't. So I need to figure out if something is going wrong with my retrieval.

So I have my file, data.text. Let me quickly see if I'm getting the text here. Or training text. Okay. Do inspect <a href="/tags/cli">console</a>. Now, so something is going wrong. I'm not getting the text. So let me try and see if we can save this. I have public <a href="/tags/data">data</a> slash text. So if I would be going here, it should show me my texts. Somehow it doesn't, which is weird because it's here in the public. I probably should move it one level up. Maybe that will solve it. So if I go now, ah, this is better. So I made a small mistake. You need to take your <a href="/tags/data">data</a> and put it in slash public, not source slash public. And I'm going to try and ask my question again. How many bicycles are there in Amsterdam? And I probably need to refresh it as well. So it will take this actual <a href="/tags/data">data</a>. How many bicycles are there in Amsterdam? So the original answer still address the question. The answer remains, there are over 800 bicycles. So now we actually get an answer from our <a href="/tags/data">data</a>, which is this <a href="/tags/data">data</a>, which talks about over 800,000 bicycles in Amsterdam. So even though before the LLM had no clue how many bikes there were, it now actually knows because we passed some additional context to it.So that sort of wraps up the thing for today. If you want to stay in touch, please do that by sending me an email. I'm always happy to answer your questions. If you want to stay in touch, feel free to go to the repo, clone the repo, fork it, star it. You can also find me on Twitter, I have a YouTube channel, there's plenty of places to find me. I'm turning the contents from today into a book and a course. So I'm more than happy to offer these, let's say 10 people that sticked around till the end, free access to the beta of the course. And then I would like to get some feedback from you in return. This should be somewhere in the, at the end of the first quarter of next year. So feel free to scan the QR <a href="/tags/code">code</a> and leave your details there. And then I'll just update you whenever, whenever the course is there, and then you would be able to try it out for free. And so I hope you learned a lot of new things. And if it was going a bit too fast for you, that's perfectly okay. It's like a whole new concept. And some of these concepts are maybe too complicated to explain in three hours, also given different education people had or different prior knowledge of <a href="/tags/artificial-intelligence">AI</a> and LLMs. So thank you.

So this will have two values because it's an object. It has the question that was asked. So not the question that we're typing, but the actual question that was asked. And its answer. As you can see, we're using <a href="/tags/typescript-libraries">TypeScript</a>. But even if you're not familiar with <a href="/tags/typescript-libraries">TypeScript</a>, because of the way we created these values, <a href="/tags/typescript-libraries">TypeScript</a> is able to see that the result variable object is something with two fields that are both strings because these are empty strings. And this will make sure that <a href="/tags/typescript-libraries">TypeScript</a> is able to figure out what this type looks like.So this is importing the state, importing the function, and creating the state variables. Then I want to create a handler function. Because I don't want to call the function to generate my answer directly, I want to be able to do some things in here, such as submitting things. And I also want to be able to do maybe a try-catch in there or figure out something that goes wrong. So usually I never call this function directly. I always create a handler function. So what I'm going to do in here, at first I'm going to do set results, where I'm going to set the question to be equal to the input of this function. And then for results, I'm not able to do anything yet, but I'm just putting this empty string here. Sorry, putting this empty string here because maybe I want to ask a new question later on, so I want this value to be clearer. And what I then want to do, I want to... Do a try of my actual answer, so I can do const generated answer. Is this function that we have... Let me make this smaller so you can see more. Let me make this smaller so you can see more. With together with my input. Because this handler function, whenever I'm going to submit it from my form, I want to be able to use its value, like this. This is my generated answer. I can do a small check. So say if generated answer exists. Maybe I should make the names different because this is kind of confusing already. I want to do set results. I want to... I don't know. Just spread this because I already had a question. And I maybe do answer should be......generated answer like this. See what's going on here. Type promise. Why is this a promise? Because I need to await. Because this is a asynchronous function. I'm going to do is await. And now it should be all good. Of course I want to do a catch. I'm not going to do too much here. Just do a <a href="/tags/cli">console</a> log. For my error. For my error. Which is this. Okay. So this should be my handler function. Put this in the chat, so everyone is able to get it. So this is my handler function. And then the next thing I'm going to do is......turn the text area into a controlled component. And submit to form and call the handler function.

So for this I'm going to scroll down. To do these things here. So I want to turn my text area into a controlled component. And why I need to do this is because......if I save this and I go here. I can type in here, but nothing is happening. Because I have a value set to whatever. So what I want to do is whenever I start typing......and this is probably like on......change. And in here I would have an event. And whenever I type, I want to......do something like set question. It is event.target.value. And then I want to set......question here too. So this is what we call the controlled component. This is what we call the controlled component because the value of the text area......is controlled by a state variable. So whenever I type here I want to update this value. Let me see if this works as expected. This is cool. So this value is now not only the value of my component. It's also the value of my state variable called question. So we can get rid of this.

The next thing I want to do is whenever I submit my form... let me see. I always hate these one-lined things. Whenever we're going to make an update here... the form will have an onSubmit event that I can use. I always need to use a prevent default... because the form might want to refresh my page... which is something I don't want because we're building a single-page app. And then I want it to call my... handler function, handleSubmitQuestion... and I want it to take this value, which is the latest value I have for question. And then save this. So let me see if it works before putting this in the chat. And to see if it works, I'm going to have a look at my network tab. So I'm going to put a question here. So what is the capital of the Netherlands... which is the country I'm in? It's going to ask this question... and it says the capital of the Netherlands is Amsterdam. So my question is fired. Now the only other thing I need to check is to see if it's being put in my answer here. So I'll be doing a random console.alert or something. Where I say... results... results... answer. Here... so console.log. Go here. Go to... here and then you can see the capital of the Netherlands is Amsterdam. So this is all working as expected. So let me put... this in here. And the thing you would need is this. Let's do our group chat. And my message is still long... so I'm going to send the form. And the other one separately. So this is form. And this is the text area. For a form. That I want to send to my message. I'm submitting a request to open.ai. And then I should be able to discard that. But we'll add it later. So now I'm coming to the goto site of my app. Where I'm going to enter the form. And it's going to ask me, why is xly going out? And it returns a response. And question number 3, which is the next one. In this question we are going to render this all on the screen. Do we have any questions? Is everyone able to run this <a href="/tags/code">code</a>? Okay, that's great. Anyone getting any errors? You wrote your own <a href="/tags/code">code</a>, that's great. The best way to learn is just by writing whatever you want. I'm just providing some handles to make things simpler. But feel free to write your own <a href="/tags/code">code</a> indeed. I saw someone asking about <a href="/tags/react-components">React</a> forum hooks. That's also great, use whatever works for you. I just provide some handlers to make it easier. I just provide some handlers to make things simpler. But in the end, the best way to learn is by writing your own <a href="/tags/code">code</a>. We're going to take... I don't know, let's do... five minutes to implement question number 3. It's a relatively straightforward one. It's just creating a message component and render it on the screen.

This was a pretty straightforward one. The first step is creating a new component. This is the message component that we'll be using to display the answer and the question on the screen. Let me take this, copy it, and then I'm going to create a new file, which I'm going to call components-message-message.tsx. I'm also creating a couple new directories, the components one, which will hold all my components, and then I also create a message directory, which contains my message components. It seems like a bit of overkill to create this directory, but it's actually useful if you start building on top of whatever you have here, and later on, you want to have test files, or maybe styling files, maybe some utilities or helpers. So that's why I always try to get in the mental state of creating all these directories. You can also see I'm creating some <a href="/tags/typescript-libraries">TypeScript</a> props. These are basically just the variables that I have as props here. So these <a href="/tags/typescript-libraries">TypeScript</a> types are for the input props of this component. It's using Tailwind, same as we're using Tailwind in the other part of the app. I could go through all these class names and tell you what they mean, but I guess that's not the most useful way of doing this. I have a YouTube channel, which I've posted some of these videos. So feel free to have a look there. I have some explanations on what Tailwind is and how you can use it. So if you want to learn more about Tailwind later on, feel free to go there.

So create our message component. I'm going to save this and then... it's going to read me. I'm going to import this component in my app, and then I'm going to render them here. So always starting by import. Message. So you can see VS <a href="/tags/code">Code</a> will help me to import this one automatically.I have a message component and I want to render it somewhere here. So here I want to have one message component for my answer, for my question, and then another one for the answer. So I probably need to check first if my result states, because this is where we keep our question and answer, right? Check if result question exists. And if it exists, I want to render this message. And then I need to give it some values. So it wants to know the sender, the title, and a message, and timestamp is optional. I could store the timestamp if I want to, but I decided not to. So I have sender. This would be me, because I'm the one asking the question. You can also, I don't know, add your own name in there. We have a title. Let's just say this is the question, and then we have the message, which is our actual question. And then this shouldn't be a string, but it should be a variable. So this should render my question.Then I'm actually going to do the same for answer, but I'm going to be lazy and I'm going to change this like this. And the sender of this one is <a href="/tags/artificial-intelligence">AI</a> or GPT. The title of this one is an answer, and the result is also the answer. So please excuse me for the formatting. This should be good. If I save this and I go to my browser, I can see that all these things are being rendered right here. I can ask what is the couple of the Netherlands. It returns something. What is the capital of the United Kingdom. And if I ask this question, you can see it has my wrong question. So I might need to <a href="/tags/debug">debug</a> something here, but my answer is correct. So I probably made a small mistake somewhere in storing my question. If I run it again, you can see it briefly changing. Let me first share with you this piece of <a href="/tags/code">code</a>, and then I'm going to see what is going wrong in my handler function. So this should give you the message rendered on the screen. And then I probably need to do something here where I just need to make sure that I do this, I guess. Just need to make sure that I do this again. This probably fixes my issue. That is better.Cool. Any questions about question number three? I see Ricardo is doing some smart things. He's pushing the history of his questions. That's a nice thing to do. It will definitely help you in making... getting an overview of your previous question later on. It will also help you with some other things which we... don't handle just yet, but we're going to handle this later. I'm going to assume no help is needed with the solution of exercise number three. We're going to continue to exercise number four.

Exercise number four. In exercise number four, we're going to... We're going to create a loader component. This means that if we would go back to my application and ask a question, you can see there's a small delay here because it's rendering the result from OpenAI. What we can do instead, which you can do in exercise number four, is creating a loader component. I already have an example component here. You can use this to show a loading indicator. This is not the most exciting question. Feel free to skip it or do it later on.As we're halfway through the <a href="/tags/workshop">workshop</a>, I can also suggest we're going to take a 15-minute break. You can work on exercise number five if you want, but you can also skip it. Sorry, exercise number four, if you want. You can also skip it because it's not the most exciting one. Let us just take a 15-minute break so everyone can... Yes, I think you can drop and hop back on. I see people coming in and out, so that should be able to do. We're going to have a break, 15 minutes. Optionally, work on exercise number four. I'm going to see you back in 15 minutes. I think you can leave the room and then come back in. I should be getting some message if someone is in a waiting room or whatever, so that should be all good.All right, let's check back in. Before the break, we did a ton of things. We basically connected the link chain to OpenAI, and then we were able to ask a question in our browser from the application. Exercise number four, like I mentioned, is just a small thing for adding a loader. We can just skip it for now. It's like I said, you can do it during the break or we can do it after. Exercise number five is actually a really interesting question because in here, we're going to try and optimize our responses. This was a question someone asked earlier on. Let's imagine, for example, that we are building a GPT that will help you with your personal travel. You can see instead of asking a question like, and I can go to here. For example, I can ask, what is the capital of the United Kingdom? I will get a very normal question. If I change my prompt to be, take the role of a personal travel assistant and answer the following question in detail, I'll probably get a slightly different answer. What if instead I say this? Take the role of a personal travel assistant and answer the following question in detail. What is the capital of the United Kingdom? Before I got a really short answer, just very, let's say theoretical, let me see if I ask the LLM to take a role of a travel assistant and answer a question in detail. What it comes up with. Here you can see it already gives me way more information. It's going to tell me about the characteristics of the city, like it's the biggest one, its population is this, it's a global city. Actually, this part is the interesting part because it's telling me that, it's telling me why people are visiting it, and it's going to give me just more detail. I can also change this. Earlier on, we had a question where we said, you can also do a take the role of a math teacher and give a short answer to the following question. Then we can do, what is 2 plus 2. Then we're seeing it's taking a, well, it gives us the same answer every time we ask this. We can also do maybe this, see if we still get the same results. Here, you can see it's, it's giving me a short answer, and then we can also do a take the role of a math teacher. You can see it's rotating the answer. We're not solving this problem just yet. This problem is something we'll solve in, not as an exercise, but the one after. Let us start building on this exercise. What I want you to do is go to the Lang Chain <a href="/tags/documentation">documentation</a>, and put it in the chat.

Sorry, that's the wrong one. The website. Basically, what I want you to do is take this prompt template and insert it into our generate answer function. In here, you can see we are putting the prompt template. You may ask why. Maybe you don't want the user to know which role it should take. Let's assume you're building this GPT in your product, and you're building a travel website or whatever. You're probably giving this prompt template, and you're exposing it to the end user. Thank you, Ricardo. As mentioned, make sure to copy the link for the repo, so you can try things later on. Thank you. This prompting is something you want to keep hidden for the end user of this GPT. That's why we're going to implement a prompt template. This is question number five, basically implement a prompt template as described here. You can take my example of the personal travel assistance, but you can also create your own example. Think about what kind of GPT you want to build. Are you building something like I'm building for this example, like a personal travel assistant, or maybe you're building a model who likes to build cakes, and you're asking questions about recipes, or you're building a whatever kind of GPT. With this prompt template, you can steer the LLM in a certain direction. Let's take 10 minutes for exercise number five and implement a prompt template for the generate answer function.

All right, let's have a look at implementing the prompt template. The first thing we need to do is, while taking this import, we're going to do all this in this file. We need to import the prompt template class here, and then we can collect, just going to copy-paste these two bits, so the first thing is the prompt template itself. We can do all sorts of things. I'm going to stick with my, take the role of a personal travel assistant, and answer the following question in detail. Anything what comes after is like just this variable, and then this, this. Then the other thing I need to do is take my formatted prompt. The product thing, we're going to change it to question. We're going to use question in here as well, and it should be our question here. Then instead of the question, we're going to pass the formatted prompt to the LLM. If I now go to my location here, I can just do... Well, let me actually see what happens if I do 2 plus 2 and ask it to a personal travel assistant. This is kind of interesting. Instead of just getting an answer, we're getting a whole bunch of things, and then we say, as a personal travel assistant, my role is to assist my clients with travel plans. It's trying to create an analogy between travel planning and math, which is interesting. But you can see here that by doing the prompt thing and using a prompt template, we're going to steer the LLM in a certain direction. Rather than it tells us what the answer to 2 plus 2 is, it's going to tell us what 2 plus 2 is, but there's also a different style or format or sentiment that we're using. Any questions around using a prompt template here?

Alternatively, you can also......replace. Yes, of course, I can share my solution, which is this. Okay, so for exercise number six, I am going to ask you to play around with some variables like the temperature and the model name. Actually, we can just do this together, as there are some other things I want to show you as well. So one thing we can do is changing the temperature, and the temperature......save... Where's my link chain file?...is something I set here....is something I set here. So when you set a temperature to 0.9, the temperature is quite high, which is good, because if I ask a question like, what are the highlights of Amsterdam, it's going to generate an answer for me. That's probably quite strict. So you can see it's kind of a happy answer. It says, here are the highlights, so many amazing things to do. If I change the temperature to maybe 0.2, we're going to expect a slightly different answer. Wait for this to resolve. I maybe should have indicated that... Well, I maybe should have added the loading indicator. And here you can see it's being a bit more strict. Well, maybe that isn't the best question to ask. So let me go back to, what is 2 plus 2? We can see better what the response is. So asking what is 2 plus 2, you can see here, it's being a bit witty. Say, my focus is to assist my clients, blah, blah, blah. And then I'm going to explain the mathematical thing using a number line, and a number is a visual representation of numbers. So this, even though it is a personal travel assistant, it's still going to assist clients with a different question. If we're going to change the temperature, maybe higher up to 0.8, and we're going to run this again, we're going to compare the answer. And here you could see it's also, it's being a bit more strict because it's basically telling my client what the answer is. It's basically telling us what to look for and what the mathematical problem is. So the temperature is a good way to sort of figure out the <a href="/tags/creativity">creativity</a> of the LLM. Maybe if we ask another question, like, can you tell me the best place on Earth? Best place to visit on Earth. So it's going to recommend a number of the best results. And then if we change the temperature back to something low, let me see if it's going to be more or less subjective. So somehow for these kinds of answers, it doesn't really matter, but typically you can use the temperature to decrease the number of hallucinations and also to make an answer more strict or less strict. So this is something you can play around with depending on the use case of your GPT. It might lead to better or worse results if you play around with the temperature. So I wanted to show you So I wanted to go ahead to exercise number seven. In exercise number seven, we're going to do some groundwork for another exercise. So basically the thing you need to do is you need to copy the <a href="/tags/code">code</a> that's in here and replace our setup we have in LengChain.ts. And this is the groundwork that we're going to do. For the next exercise, so exercise number seven, let's take five minutes to implement. And in this exercise we will do the groundwork for exercise number eight, which is where we're going to do a few shot prompting. So this is a prompt where we're going to give the LLM some structure in how it should respond to our question. So let's take five minutes to just take what we have here, this <a href="/tags/code">code</a>, and put it in LengChain.ts and make sure that you are still able to run the application. So basically the only thing you needed to do was copy the <a href="/tags/code">code</a> we have in the README into the LengChain.ts file. So what's happening here, we are using a, so previously we were using OpenAI interface and now we move to the JetOpenAI interface. So I'd say the JetOpenAI interface is a JetOpenAI interface is a more <a href="/tags/deep-dive">advanced</a> interface, which allow you to share the history or even more context than before. You can also see there is a system template. So this would be the prompt for the LLM and then there's the human template, which is basically just the text. So this is whatever the human is doing. You can see we're passing variables like personal travel agents in a detailed style. So I added some more variables, meaning that in theory, you could create like a switch or whatever to switch between a personal travel agent and maybe a chef cooking specialty dishes or maybe even a format or a style. And finally, you can see the way we get the result, we restructure it from the outcome is slightly different. So let me see if I still have my app running. It looks like I do.

It looks like I do. So if I go here, it should still give me a result because in theory, not too much changed. The only thing that changed was the interface we're using to run all of this. You could be seeing some slower response times. That's because the Jet interface, generally speaking, generates more <a href="/tags/data">data</a> because it has a different token limits. And token limit means the number of, well, the max number of tokens you can set, it basically depends how long the answer is B, how long the answer should be. So the token limits for this one is different than for the other one. And also you can get intermediate results here. So if we look at the network requests, network requests, we're seeing just one now, but there is also a way to get partial results. And Lengchain will handle these partial results for us. But it's like not too important for today, but by doing this, we set the groundworks for doing something else. And this something else is called view shot prompting. So if we go back to the README, you can see that by making this change, we made it easier to change the input variables and by using a jet model instead of LLM models. And that's why we can start implementing different prompting techniques. And one of those techniques is called view shot prompting.

So in the previous result, we are expecting our LLM to know how to respond to our answer. We're expecting it to come up with its own format. And we also expect the LLM to know about the things we talk, we ask about. So I'm asking the LLM about travel plans or highlights in the city. And I assume the LLM knows anything about traveling in these cities. Maybe it doesn't, maybe it does. If you have a foundational generic model like the ones from open <a href="/tags/artificial-intelligence">AI</a>, you can pretty much ask every question and it should be able to come up with some sort of answer. If you have a more specific model, maybe a model that wasn't trained on travel plans, you should give it some additional information. If you have a model that is trained on datasets that have very short sentences, you can expect the model to reply with very short sentences. And that's why by doing a few shot prompting technique, we can change the way it answers our question.So if you look at this example here, you can see that alongside with our prompts, we're going to send some examples. So we're going to ask the LLM, what are the best restaurants in Amsterdam? So if I ask the LLM this question, let me go to my application. So what are the best restaurants in Amsterdam? Let's have a look at the format that it uses to reply. And as mentioned, it will be a bit slower. You can see it's very lengthy. It's giving me a lot of information. Well, maybe I wanted to reply in a format that says the highest rated restaurants in Amsterdam are one, two, three. And maybe with best, I mean highest rated. And if I ask what's the best time for the year to visit the Netherlands, I maybe mean the best season. So these kinds of small things, if we give the LLM these examples, it's able to generate and craft better output for us. So what I want you to do for this exercise is copy this <a href="/tags/code">code</a>. This should be attached, but that's probably fine. So copy this <a href="/tags/code">code</a> and put it in the file utils-langchain.ts and try and come up with your own few short prompts. So give it some examples and try to mimic these examples to follow a format that you want the LLM to follow. And then you can see that the LLM will actually change its style of responding to you. So let's take 10 minutes for this. And then we would have some time at the end to load around datasets. I think that will be a nice wrap-up of the entire <a href="/tags/workshop">workshop</a>. So let's say 10 minutes for exercise number, what did I say? Nine? Yes, I said nine, I think, or eight. Sorry, exercise number eight. And then once we follow exercise number eight, we have played with zero-shot prompting, few-shot prompting, and we were able to do some retrieval where we load our own <a href="/tags/data">data</a> into the context that we send to the LLM. And if you have any questions as before, just make sure to make use of the chat. And well, you still have the repo. You can add issues there if you have questions for me after the <a href="/tags/workshop">workshop</a>. So if you need to drop for work or dinner or kids, family, whatever reason, feel free to use the repo as a means to communicate. So small requests there. Make sure to star it. And thanks for the forked repo. And it will help me to get some visibility for the content I produced. So we're gonna take 10 minutes for exercise number eight. So what I needed to do was copy this <a href="/tags/code">code</a> and put it in my linkchain ts file for exercise number eight. Let me copy this part, import all the way down to C, and then just push it all over here. Okay, so a lot of things changed, but in the end, it's pretty much the same. The only thing that has really changed is these examples that we're taking along. So I see a question in the chat. So what happens? So it's a good question because I'm sort of brute forcing the answer to be this. It would be better if I probably just stick with sending actual names of restaurants here. Let me save this first. And then go here. So if I asked this question again, like what are the best restaurants in Amsterdam, it says restaurant A, B and C.

Maybe if I try it again or substitute it for something else, it's already sending me a better answer. But the main thing what the LLM should do, it should take the format. So I asked it for the format, one, two, three. If I run this again, it's getting closer to my format. And here it's already getting close to my format as well. The thing is, if I leave out these examples, can I do this, empty examples? I'm not sure. Let's see if it works. Yeah, you can see it's, the whole format is completely different. And when I go back and I do this, and I ask what are the best restaurants in Amsterdam, the format again should be short and snappy saying one, two, three. Again, it's doing one, two, three. But it remains an LLM. An LLM is not a logical thing per se, it's like a <a href="/tags/nlp">natural language</a> processor. It's not a, well, it is still a computer, but it's not like a logical computer where we say, get very hard-coded to output things maybe in a URL or some other kind of list. So it could come up with slight variations, but as you can see here, we sort of forced it to do a sort of format. And if we ask what are the best, I don't know, theaters, theaters, or museas or whatever, it should handle the same format because, well, not the first time. It's doing something weird. Oh yeah. So this is indeed a weird thing. So I should probably find a way to have it substitute all these things because it's trying to create a format for me, but it's just not knowing the answers. So if we go to best museums, yeah. So for museums, it's able to give me results. So somehow it's not able to give me information on theaters. If I do movie theaters. And that's kind of the funky part. It remains in LM, it remains untrustworthy. The best restaurants in Berlin, let me try the answer from the chat. And then somehow it finds this a weird question. Let's see, highest rated restaurants in Berlin. There's probably a way to fix this by trying slightly different prompts and playing with this along. But the biggest thing I wanted to show with this view-shot prompting is that you can actually have the LM return something different and return it in a different format than it was doing before. So sorry for not being able to answer your question exactly, but it's probably something you can fiddle with a bit more because if we do what are the best museums in Berlin, see what it will do for us. Yeah, then it's actually able to give results on museums. So my assumption here is that probably it doesn't know about restaurants in Berlin and it doesn't know about restaurants, about theaters in Berlin or Amsterdam somehow. So this is actually a nice bridge to the next exercise. And in the next exercise, which is also the final one, we're going to load some <a href="/tags/data">data</a>. So exercise number nine, we're going to load some <a href="/tags/data">data</a>. We're going to set up a local vector <a href="/tags/database">database</a> and we're going to fill that vector <a href="/tags/database">database</a> with a dataset, which is basically just a blog post that I saved as a text file. There's some things going on here where we're splitting the text into multiple vectors. So if you don't know how a vector <a href="/tags/database">database</a> works, it's a way to store <a href="/tags/data">data</a> in smaller formats and also do semantic search over these smaller formats. So this means that I'm first going to take my <a href="/tags/data">data</a>. And I think I have a slide on this. I'm going to take my <a href="/tags/data">data</a>. I'm going to split it into smaller chunks. These smaller chunks I'm going to store in a vector <a href="/tags/database">database</a> and I'm also going to let OpenAI know what are my different embeddings. So all the embeddings will be the different chunks. And then whenever I ask a question, like if I have a lot of <a href="/tags/data">data</a> on Berlin, for example, and I have <a href="/tags/data">data</a> on museums, theaters, restaurants. Whenever I ask a question like what are the best restaurants in Berlin, I don't want my LLM to also get the <a href="/tags/data">data</a> about other stuff such as the museums because I'm asking about restaurants. So that's what the vector <a href="/tags/database">database</a> helps you with. There's some <a href="/tags/code">code</a> here.

There's some <a href="/tags/code">code</a> here. I suggest you just put it in the Langchain.ts file. You point it towards this <a href="/tags/data">data</a> set which is in the public directory. I think it should be a source components. Do we have public here? No, we don't. So you should take it from here and just put it in source slash public. So new folder public. So that's the first thing you do. You take the data.txt file from the assets directory or maybe you don't have it. So let me actually share this with you here. Message list is too long. Well, then let me do this. I want to have data.txt. I want to get add. Commit message add. Add <a href="/tags/data">data</a> set and get push origin. So if you go to the repo, just probably do get pool as well because it might've been changing some things. Yeah, this is annoying. So here's a <a href="/tags/data">data</a> file. It's just some <a href="/tags/data">data</a> about Amsterdam. It doesn't really matter. That should read me, get pool. This, so it updated my README. And then, let's see if it's status. Make sure you all get the text file and just do get push, I think. And then in the README, you should be seeing the text file. Cool, so that is here. Make sure to go to the README and download the latest text file and then you should put it in the public directory. Take the edit.txt and put it in source. Public. Just go back. I think it is. There we go. And then the next thing is kind of, scroll all the way down.Great, so what we're doing here is we're putting this <a href="/tags/data">data</a> in a local vector store. And that's the part of where I tried to explain where we're taking the blog post and we're turning it into smaller datasets. And you would do the same thing for like a really large dataset. So we're splitting it in smaller chunks and then we store it in a in-memory <a href="/tags/data">data</a> store. And then from your app component, of course you need to load the vector store because we need to run this file. So we have the embedding stored. And then finally, we're able to use this vector store in our generate answer question where we do a chain of results rather than a single result. So the info is in this part of the ReadMe, but I think we don't have that much time anymore. So I suggest we just do this exercise together. You have to repo so you have to results you'll be able to mimic it later on. So we took that <a href="/tags/data">data</a>, the text file, you go into lengthchain.ts where we need to import a couple of things. So we need to import the embeddings interface, the text splitter, and the in-memory vector store. If you're building something that's larger, you probably don't want a memory vector stores. So you probably need to get the vector <a href="/tags/database">database</a>. There are some really good ones like Pinecone, Weave8, Milvas. These are all examples of good vector stores that you can run in the <a href="/tags/cloud">cloud</a>.

React Day Berlin

React Day Berlin 2023

Building AI Applications for the Web

Construyendo Aplicaciones AI para la Web

Today's workshop focuses on AI for front-end developers and building with Lengtchain JS. Participants will learn how to create a custom MyGPT application, explore prompt engineering and retrieval, and use local data sets. The workshop covers creating a handler function, turning a text area into a controlled component, and rendering a message component on the screen. Participants will also learn about prompt templates, few-shot prompting, and setting up a vector database. The workshop concludes with information on staying in touch and accessing the beta version of a course based on the workshop.

Today every developer is using LLMs in different forms and shapes. Lots of products have introduced embedded AI capabilities, and in this workshop you’ll learn how to build your own AI application. No experience in building LLMs or machine learning is needed. Instead, we’ll use web technologies such as JavaScript, React and GraphQL which you already know and love.

Roy Derks

JS Nation

I’m attending JSNation – the main JavaScript conference of the year. You may join me there for free with 10k other JS engineers and 40+ great speakers. Just follow this badge. 

#javascript

JSNation 2024

C3 Dev Festival

Join me at C3 Dev Fest, a contemporary software engineering festival!

Register to win an all-paid trip to Amsterdam. Elevate your career with industry experts and workshops & rock 3 dance stages at the after-party!

C3 Dev Festival 2024

React Summit

I am attending the biggest #Reactjs conference remotely. You may get a limited free ticket (50% of talks, no workshops) and join me by clicking this badge.

#react #reactjs

React Summit 2024

TechLead Conference

I'm attending TechLead Conference 2024 – get your free remote ticket and join me there

TechLead Conference 2024

React Advanced

React Advanced Conference 2024

Productivity Conference

Productivity Conference 2024

JSNation US

I’m attending JSNation US. Join me there for free with 10k other JS engineers and 50+ great speakers. Just follow this badge.