How to build a full NFT collection using AI - Art, Smart Contract, Minting Site

hey what's up everyone and welcome back to another video and in today's video we're gonna see if we can use chat GPT and mid-journey AI to create a full nft collection from start to finish and by the end of this video we should have a minting site with a working URL that we can share to anyone and they can visit our site and claim their very own nft Surfers going to ask chat gbt on some ideas that we should create for this collection we're then going to ask it for some prompts to put into mid-journey which we are going to use to generate the images and then we are going to use third web to create our smart contract and our very own minting app which will allow users to claim their nft directly from our site so without wasting any time let's jump into it let's ask chat GPT what we should build so I have chat GPT opened up already now I have it set to 3.5 I'm actually going to switch it to gbt4 and we're gonna ask chatgpt we're gonna say I plan on creating a uh an nft AI art collection and then we'll just say the collection size will be five nfts and then we'll ask chat GPT what should our collection be so we're going to ask chatgpt this question looks like it is creating an idea for us so we're gonna make something called synthetic wonders and it looks like we have the theme is a Harmony between nature and artificial intelligence and then we have ai Bloom we have cyber Safari neural landscape digital ocean and machine Metropolis so these are the five AI art pieces we're gonna make that chat GPT created for us uh next thing we're going to do is ask chat gbt to create some mid-journey prompts for us and you uh and we'll ask me a journey can you create a easy to copy prompt to create these images in mid-journey so it is breaking it down for us I asked it to create an easy to copy a prompt sometimes a bullet makes it in bullet points so making it easy to copy it looks like it's telling us the image and the prompt we should use for each image all right and then we are going to ask it one more thing uh to create a description for the collection so this is going to be this uh description that we are going to put with the nft that we create we'll just probably take this top section right over here okay we now have all the information we're going to need from a chat GPT we're going to scroll back on up to these prompts here and I'm going to copy the first prompt for the AI Bloom and I'm going to come on over to Discord here I do have a server set up with the mid-journey bot and if you haven't used mid Journey before mid journey is an AI image generating tool you use it within Discord and to start it you'll do a slash imagine and you'll have this prompt section here and this is where you put in the prompts of the image you want mid journey to create we went ahead and asked chat GPT to create these prompts for us so this is going to be the first one here we're going to put that through it's going to generate four images for us and out of the four we can select one of the images to upscale and get a higher quality version of so this is going to go through it's going to take a little bit as that renders through so as that is going I'm going to grab the second one and with mid Journey you can run three prompts at once so I'm going to put in the second one here and then I'm going to grab the third one as well and we'll run these three you can see the top one here is already making that AI Bloom which I see some flowers and everything coming out which is awesome the second one was the Cyber Safari and the third one was neural landscape so looks like we have some animals coming out for cyber Safari and we have something different coming out for neural landscape so with the flower one here I'm actually liking I'm liking the top right one it's kind of a flower with like this digital look to it so you can see right here we have a U2 which is to upscale the V is for variation so you can create slight variations of a certain one but I'm going to choose U2 so we can get the higher image of that top right one we also have our landscape one here which has a bunch of really cool ones I'm going to go with maybe the top right one here so we'll just do U2 for that one as well and we also have the animal one here the Safari and for this one maybe we'll choose a top left one since it looks most like an animal well to me anyways then we'll get the digital ocean prompt and we'll get the last prompt and create our images for that imagine so this is our ocean one and then we have our metropolis and we're going to create those who and while those two are going I am going to save these three images that we've created so far I'm just going to create a new folder called AI artwork here so we can find it later on I'm going to save that one and we have our landscape here save that into AI artwork same with this one save it into AI artwork and we'll wait for these last two to generate and we'll select one image from each one so we have our ocean one here let's see I'm really liking this top left one so we'll select that one there the Metropolis one this one actually came out with a bunch of cool stuff let's do the maybe the bottom left we're gonna choose the bottom left for any of them so we'll do that one there we'll save this ocean one into our AI artworks and we'll also save this one as well okay and we now have our five images we're going to use for our nftai art collection so these are the five pieces here now that we have that done we again we created all these this idea and the prompts from chat gbt we plugged it into mid journey to generate these images now let's create the project uh we first need to create our smart contracts and then we will create our claiming site where people can claim these art nfts okay so the first thing we need to do is create our smart contract so I'm going to go over to thirdweb.com here and we're going to connect our wallet I'm going to switch on over we're going to use girly testnet just to deploy these contracts here but with third web you can deploy your contracts on any evm compatible blockchain we're gonna come on over we're gonna browse contracts here and we're gonna select an nft drop now an nft drop is an RC 721a standard contract and this is going to allow you to create individual nft tokens each one is going to be unique and you can then set claim conditions and users can claim these nfts based on those claim conditions so you can set things like allow List cost and we'll go over it once we deploy the contract as well so if you head on over to the top right and hit deploy now we'll give this project a name which we actually have from our AI here so if we scroll up or right here it's called a synthetic wonders and then we'll just put uh it's in W for the symbol we can select an image so the image let's actually go back to Mid journey and grab another one of these for the AI image so I'm just going to choose this one right here this that way it's just a different image that we set as The Collection image I'm just going to save this in to here here so when we come here we'll select and drag that image as our Collection image we also have the description so coming back here we're going to grab this description that chat GPT created for us and we're gonna just paste that right in there now you can also set up your royalties if you plan on collecting royalties from secondary sales and you can set up the wallet address for the primary cell so the initial sales of these nfts this is the wallet address that it is going to go to now down here under Network and chain again we're going to use go early for this example and demo but you can then select any EVN compatible blockchain that you want to deploy this contract to so I'm going to click on deploy now I'm then going to confirm this transaction okay and we now have our contract dashboard here you can see our image our name of our collection here and our description of what our collection is now if you come on over forward to the left hand navigation here we have a few things we can look at the overview this is the overview of the whole contract itself you can view latest events you can view permissions who has permissions to do what you have nft details so you can see things like your total Supply how much have been claimed already how much are still unclaimed on the right hand side here you'll see what contract you had deployed so this was the nft drop from third web and you can view all the extensions of this contract right over here and if you want you we also have relevant guides and templates that you can follow and then on the left hand side again under extensions you'll see nfts in clean conditions and these are the two things we're going to set up right now so the first thing we're going to do is head on over to nfts this is where we can set up and lazy mint our five nfts to our contract so I'm going to do a single upload we're going to take our first n of T which is that to bloom and if tea which is the flower one I'm gonna drag the image in there the name I'm gonna just copy it from what Chad GPT gave us was the AI Bloom and we also have the description that chat gbt also gave which is that one there I'm not going to add any properties but if you have any traits or properties this is where you can add them in and once everything is set and good you can click on lazy mint and this will lazy mint this nft to our smart contract and it will be available for someone to claim then we just need to confirm the transaction here and right here that has been minted successfully so you can now see the image of our nft the name and the description right now the owner is not set because this is just lazy minted to our smart contract so what I'm going to do now is do the same process for the remaining four nfts I'm going to fast forward through this and because it's the same process once I'm done with that we will continue to next steps okay we now have all five of our AI generated art pieces lazy minted to our smart contract now the last thing we need to do before we start creating our actual claiming app where people can claim these nfts we need to set claim conditions so right now no one can claim these nfts from our smart contract so on the left hand side under extensions we'll head on over to claim conditions this is where we can set different conditions or phases of different conditions on how people can claim these nfts we're going to hit add phase and this is where you can one name the phase but when it starts so if you're doing maybe an allow list or something you can start the allow list and then however much time you're allowing people to collect set the time for the public phase you can put in how many nfts will be in this phase for this one it's going to be five you can put in how much they are going to cost and you can select the currency in which you want to charge for those nfts you can claim nfts or who can claim these nfts you can set it to any wallet put specific wallets or put in your allow list of wallets that can collect that can claim these nfts and you can put in how many nfts can be claimed per wallet in our case we're gonna put one but you can configure these conditions and these different phases to your liking depending on how you plan on launching your nft project once everything is set we're going to hit save phases here confirm this transaction once that finishes we are now ready to create our claiming app for people to start claiming these nfts on the left hand side you can head on over to the build section here and we actually give a getting started guide on how you can get started building your app depending on what you want to do you see the list of different extensions that is on our contract here and if you want to say get the app URI you can drop down and you have the code snippet right here that you can just copy and paste and you can then get your app URI same thing goes for if we want to get the nft balance of a specific wallet we have this code snippet right over here you can just copy it paste it into your code and we are going to use a bunch of these right over here to build our very simple claiming app next and to start building our app I'm going to now open up my terminal here let me just zoom in to make this bigger so we can see and what I'm going to put in here is MPX third web I'm going to do create an app and we're going to use the latest version of the CLI here we're going to name our project I'm just going to put AI art nft we're going to use evm because we are using the girly test net and for this we are going to use the next JS and I'm going to use typescript so we'll let that install all right and once it is installed I'm just going to change directly in to our AI art nft and I'm actually going to install chakra UI that's what I'm going to use to kind of just make our cleaning app look a little nicer so I'm just going to install this but you can install any UI framework or library that you choose all right now once that is done I'm just going to open this up in my code editor here and I am going to zoom in just a bit so everyone can see I'm first going to go into pages and go to my underscore app.tsx file I'm going to actually just comment this out and I'm going to import chalk right here and I'm just going to wrap my component here with the chocolate provider and I'm going to change this active chain here to girly and that should set up everything in our application here to work with our girly smart contract so next I'm going to do is under index here I'm going to just take out this templated code right here I'm going to comment out that line and in here I'm going to just do a container here from Chakra and in that container I'm going to add a connect wallet button and next I'm just going to open up my terminal here and put a yarn Dev and let's take a look at this and see what we have so right over here we have our app right now it only has a Connect wallet button you can see if we hit connect wallet we have our wallet connect options of selecting which wallet we want we can select metamask and connect and we now have our connected uh wallet button right up here I'm just going to disconnect that really quick so over here I'm going to add a few variables I'm going to add a contract address here which is just going to store the contract address which I can get from the dashboard right over here you can just copy that come back here and paste it in there right and after we have our contract address we're going to then get our contract so that we can start interacting with it and getting maybe our metadata information and everything from it so we're going to use the use contract hook here and we're going to pass the way to do that the contract address and that's going to allow us to start interacting with our smart contract now maybe the first thing we're going to do is get the contracts metadata so we can get the image and description and everything from it so I'm going to use another hook and we're going to get the metadata of our contract here and this Hook is the use metadata hook here and what we're going to pass is the contract which is the contract that we just got right over here now we can also check if it is still loading if which is going to allow us to check to make sure that the metadata is that we received our metadata before we start displaying anything so we'll just do is loading here and I'll just put uh meta data and now let's fix up our uh our site here a little bit so I'm gonna put a flex here and this Flex it's just going to be like our top navigation bar I'm going to add a padding of 20 pixels and we're going to justify the content to have a space between and in there we're going to just have a box to fill in one side here and we will have the connect wallet button on the other side now below that Flex I'm going to create one more this is going to be the area that we put in like the image and information of our nft so for this Flex I'm just going to add add a height of 90 percent of the view height here I'm going to align the items Center and we're going to justify the content Center as well here and within that Flex We are then going to add a simple grid this simple grid is going to have two columns with a spacing of 10 here close that off and we're going to have our first side which is I'm just going to make a couple boxes here as placeholders so we're gonna do a box which is going to hold our image and then I'm going to create another Flex here which is going to hold like the information of our nft project and just for now I'm going to put in text here that says uh nft project and let's add text there all right so we take a look at our app here we now have a nice bar up here I can actually just just make this a little smaller so we have our connect wallet button uh and then we're gonna have our image on the left hand side here and the information of our nft project right here on the right hand side so let's add that image in from our NFC uh nft collection so in this box here I'm going to first add a skeleton that's going to check if the metadata has loaded and if not it'll just show our skeleton here and in there we're going to use a third web UI component called media renderer and media renderer is going to allow us to get a source and that Source can be an ipfs hash we'll take that ipfs hash and create our image from it so in here we are going to get the source and our source we are going to get our metadata as and then we're going to get the image as a string here metadata if I can spell correctly so we're gonna from our metadata get the image here which is an ipfs hash and that is going to get our image for us so if we come back to our project here we now have the image from our nft smart contracts metadata we can do the same for the text here so in Flex I'm going to get rid of this little placeholder that we made we're going to replace it with a skeleton and we're going to check is a loaded again and we are checking the metadata and in here we're going to just create a heading and that heading is going to be the gonna be metadata meta data and then we are getting the name string dot name now we come back here we can see synthetic wonders is the name right there and we're going to do one more we'll just copy this here this is not going this is going to be regular text and we can do description I will grab the description of our project and we have our description here now let's fix our Direction and we're going to do column so that will display up and down here we'll also our container we're just going to set the max width to let's say 1200 pixels here make it a little wider and our simple grid column spacing and for a simple grid we'll justify our items Center all right and now we have our image uh and our text on the side next thing we want to do is maybe display the amount that has been minted from our contract so to do that we can use uh we'll grab the data from our contract here we're going to say a total minted and we're also going to check is loading and we're going to use the use contract read Hook from third web here and what this takes is our contract that we're calling it from and then the function name that we want to read so we're going to pass our contract here and the function name if we come back to our smart contract here if we go under Explorer you have your right and we have our read functions and in read you can call read on any one of these here but we're looking for name because or not name uh we're looking for total minted and that's going to be zero right now because that is how much we have minted we haven't claimed any yet so we're gonna do the total minute I'm going to copy that function name right there and we're going to pass our total minted right there and then under here we again can and we're just going to justify content Center there we go and I'm going to do another skeleton here this one's going to check if the total minted has loaded and if it has then we will display we'll just do a little text here uh we're gonna display the total minted now this does return a big number so we do need to use the true number to change it into a number here and we're going to do out of five since we know it is already out of five so if I refresh our page here let's just make sure that that is there if we refresh it here it now loads the image of our project the name of our smart contract the description and we have 0 out of five minted and we can even add in here a total minted and save that so you can see Zero out of five next thing we want to do is add a claiming button here so someone can claim this and if T so what we're going to do is add a UI component from third web called web3 button and I can just put uh I'm just gonna say have the button say clean now you can see right over here the clean button says connect wallet because it's only going to show the claim option if a wallet is connected but we don't want uh two of these things to say connect wallet here so what I'm going to do is we're gonna first check if a wallet is connected and we can uh create a variable here called address and we're going to use the use address hook here from third web and this is going to check if there is a wallet connected to our app and if there is it's going to store the connected wallets address under address here so what we can do here is check if address we can check if there is an address connected to our site and if there is an address connected then we'll show this web 3 button here and if there is no address then we will just put some text that says please connect your wallet now for the web 3 button we do need to add a few things so the first thing we need to do has had the contract address that we're going to be calling or interacting with so we can just pass a contract address because we have it stored above and the next thing we need to do is an action so this is what is what action is this web 3 button going to be doing on this contract now the cool thing with the third web contracts like the nft drop is we can on the contract we can specify that it is an ERC 721 and we can call the claim which is going to claim the nft to the connected address and all we need to do is pass the argument of the quantity of how much is going to be claimed and we'll just pass one here so we come back here you can see that it's not showing the button because we need to connect our wallet first so we'll come up here we'll connect our metamask wallet it now says claim and we can claim our nft now let me just I'm just going to really quick add some padding in space facing in between here and we can actually do uh let's do a stack here and then Direction column spacing four oh we need to so now I have this uh stacked with some spacing in between it and we now have a application here that someone can now claim are AI generated art and our smart contract and our nfts that we just created now the only thing right now is this is running on our local host and this isn't something that someone can we can't share this with anyone and no one can claim our nfts from this right now let's right now let's deploy this using versel and we will get a URL address that we can now share with people and they can claim our nfts now if you haven't already or if you haven't used resell before you just need to create an account with them you also need a GitHub account as well so once you have those things set you can open up your terminal if you have never installed versel before you can do npm I will just do it globally and then verse cell and that will install for sale for you so I'll just run this right here and once you have it installed all you need to do is run versel it's going to walk you through some prompts so right now it's asking if I want to deploy this I'll see yes it's going to ask you what account you want to deploy to I have my account here is this an existing project no it is not I'm going to call this uh a AI art nft it's going to ask what directory our code is located and then it is going to upload do we want to modify the settings I'm going to select no and now it is going to build and deploy our project here and I will be right back once this is done this is going to take a few minutes or so and then we'll check it out on our new Versa app okay and right here my deploying my build and deploy is done and we have our URL here that we can open up and this should be the app that we just created right here so we'll let that load and again we have our artwork all our information showing up right here it says please connect your wallet to claim so let's go ahead and claim or connect our wallet here all right I have a wallet connected and we're going to test this out we're going to hit claim here and we're going to claim this n of T so we can just watch our wallet here and make sure that this transaction goes through once this transaction goes through we should see the total minted also increased to one and we will check out the dashboard right after this so the claim went through you can see we now have a total of one out of five minted we can go to our contract dashboard here let's look at we'll check out overview first so we have a total supply of five we have one claimed and we still have four unclaimed and if we check out the nfts here you can see that the first nft here the new owner is our wallet address that we just minted with and there you go we first started off creating an nft collection using chat GPT asking it for some advice and prompts and we created the images using mid-journey we then created those smart contracts created our claiming app and we made that claiming app alive we can now share that URL to others and they can come here to our app and start claiming an nft so we created a full nft project using the help of AI and we built one from start to finish and we used third web to help us out with this if you did find this video useful and you found some value in it give this video a thumbs up hit that subscribe button and don't forget to turn on the notification Bell so you don't miss out on tutorial videos just like this and if you haven't already the link will be down in the description but please join our Discord Channel and join the amazing community of Builders just like yourself if you need any support or you have any questions you can drop them in the Discord and we'll be happy to help you out but again I hope you folks enjoyed this video found some value in it and until next time see ya

Channel: thirdweb

Views: 9,003

Keywords:

Id: sOjOst4-xSM

Length: 30min 43sec (1843 seconds)

Published: Sun Apr 09 2023