The right way to Construct a Web3 ChatGPT Dapp

If you happen to’d wish to discover ways to construct a Web3 ChatGPT dapp to mint NFTs, this text is for you! The ChatGPT dapp we’re about to construct will allow you to question ChatGPT and convert the offered reply into an NFT. Sounds difficult? Fortuitously, it’s fairly simple, due to OpenAI’s API and the Moralis Web3 API. Now, relating to the implementation of the ChatGPT performance, the next traces of code do many of the heavy lifting:

app.get(“/”, async (req, res) => {
const { question } = req;
strive {
const response = await openai.createCompletion({
mannequin: “text-davinci-003”,
immediate: question.message,
max_tokens: 30,
temperature: 0,
});
return res.standing(200).json(response.knowledge);
} catch (e) {
console.log(`One thing went fallacious ${e}`);
return res.standing(400).json();
}
});

As a way to mint chats as NFTs, you have to retailer them in a decentralized method. That is the place you should utilize IPFS by way of the Moralis IPFS API. Right here’s the snippet of code that covers that half:

app.get(“/uploadtoipfs”, async (req, res) => {
const { question } = req;
strive {
const response = await Moralis.EvmApi.ipfs.uploadFolder({
abi: [
{
path: “conversation.json”,
content: { chat: query.pair },
},
],
});
console.log(response.outcome);
return res.standing(200).json(response.outcome);
} catch (e) {
console.log(`One thing went fallacious ${e}`);
return res.standing(400).json();
}
});

After all, so far as the precise NFT minting goes, you additionally want a correct sensible contract. So, in case you are fascinated with creating your Web3 ChatGPT dapp by implementing the above-presented traces of code and creating an acceptable sensible contract, comply with alongside on this article or watch the video above. Simply create your free Moralis account and comply with our lead!  

Overview

The vast majority of at the moment’s article consists of a tutorial demonstrating tips on how to create a Web3 ChatGPT dapp utilizing our code. You’ll learn the way your JavaScript expertise can cowl each the frontend and backend parts of your ChatGPT dapp. Alongside the best way, you’ll additionally discover ways to use instruments reminiscent of OpenAI’s API, the Moralis Web3 Information API, and wagmi. You’ll additionally study the fundamentals of Solidity. In any case, you should deploy your occasion of our instance sensible contract to create your ChatGPT minter. 

For the sake of this tutorial, we’ll be utilizing the Goerli testnet. As such, ensure that to attach your MetaMask pockets to this Ethereum testnet and equip your pockets with some Goerli ETH. A dependable Goerli faucet will do the trick. 

As a bonus, we’ll additionally present you tips on how to use the Moralis NFT API to fetch and consider the main points of NFTs minted along with your Web3 ChatGTP dapp. Beneath the tutorial, you may as well discover extra particulars about ChatGPT and its use instances.       

Tutorial: Construct Your Web3 ChatGPT NFT Minter Dapp

If you happen to had been to construct your Web3 ChatGPT minter dapp from scratch, you’d want to finish the next steps:

Create a NodeJS app and an Categorical server.Set up all required dependencies on your backend: CORS, dotenv, Categorical, Moralis, and OpenAI.Create a correct backend “index.js” script overlaying the backend functionalities of incorporating ChatGPT and the Moralis IPFS API as outlined above.Construct a frontend NextJS app. Set up all required frontend dependencies: Moralis, wagmi, NextAuth, and so forth. Code a number of “.jsx” and “.js” scripts.Write and deploy a sensible contract that mints a chat when you hit the “Mint NFT” button within the above screenshot. 

Nonetheless, as a substitute of taking up all these steps, you may merely entry our “moralis-chatgpt” GitHub repo and clone the complete code. When you do this and open the challenge in Visible Studio Code (VSC), you’ll be three folders: “backend”, “hardhat”, and “nextjs_moralis_auth”:

Word: Shifting ahead, we are going to proceed as when you’ve cloned our challenge, and we are going to perform a code walkthrough of probably the most important scripts.

ChatGPT NFT Minting Good Contract

If you’re conversant in Hardhat, you may take the identical path as we did and use Hardhat to create your occasion of our sensible contract. Nonetheless, you may as well use Remix IDE utilizing your favourite browser to compile and deploy the required sensible contract. Both means, use our instance sensible contract template (“MessageNFT.sol“) positioned contained in the “hardhat/contracts” folder:

Like all Solidity sensible contracts, “MessageNFT.sol” begins with an MIT license and a pragma line:

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.17;

Subsequent, it imports three verified sensible contracts from OpenZeppelin to inherit the ERC-721 commonplace, the flexibility to rely NFTs and assign NFT IDs, and performance that permits solely the proprietor of the sensible contract to mint NFTs:

import “@openzeppelin/contracts/token/ERC721/extensions/ERC721URIStorage.sol”;
import “@openzeppelin/contracts/utils/Counters.sol”;
import “@openzeppelin/contracts/entry/Ownable.sol”;

Following the imports, the script defines the contract title and contract sort (ERC-721). Contained in the contract, the “constructor” will get executed when the contract is deployed, and the “mintNFT” operate will get executed at any time when this contract known as to mint a related NFT:

contract messageNFT is ERC721URIStorage, Ownable {
utilizing Counters for Counters.Counter;
Counters.Counter personal _tokenIds;

constructor() ERC721(“Chapt GPT Dialog”, “CGPTC”) {}

operate mintNFT(tackle recipient, string reminiscence tokenURI)
public
onlyOwner
returns (uint256)
{
_tokenIds.increment();

uint256 newItemId = _tokenIds.present();
_mint(recipient, newItemId);
_setTokenURI(newItemId, tokenURI);

return newItemId;
}
}

Trying on the “mint” operate parameters, you may see that it takes within the pockets tackle of the recipient and token URI. The previous will seize the related pockets’s tackle, and the latter will fetch the URI that the IPFS API returns after importing a chat in query. 

Word: When deploying the above sensible contract, ensure that to deal with the Goerli testnet.

Backend of the Web3 ChatGPT Minter Dapp

Contained in the “backend” folder, you’ll find the “index.js”, “package-lock.json”, and “bundle.json” information. You possibly can open the latter to see which dependencies are required by this challenge. Other than putting in the required dependencies, you additionally have to create a “.env” file. Inside that file, you need to retailer your Moralis Web3 API key beneath the “MORALIS_API_KEY” variable.

To acquire your API key, you’ll want a Moralis account. So, in case you haven’t accomplished so but, create your free Moralis account now. Then, log in and duplicate your API key out of your admin space:

Together with your Web3 API key in place, you’ll have the ability to make the most of the backend “index.js” script. In any case, that is the script that features the snippets of code outlined within the introduction. With that mentioned, let’s take a more in-depth take a look at “index.js”. 

On the high, the script imports all related dependencies utilizing CORS and Categorical and imports your API key:

const specific = require(“specific”);
const app = specific();
const port = 5001;
const Moralis = require(“moralis”).default;
const cors = require(“cors”);
require(“dotenv”).config();

app.use(cors());
app.use(specific.json());

const MORALIS_API_KEY = course of.env.MORALIS_API_KEY;

Trying on the traces of code above, you may see that your backend will run on localhost 5001. After importing Moralis and your API key, the next snippet (which you’ll find on the backside of “index.js”) initializes Moralis:

Moralis.begin({
apiKey: MORALIS_API_KEY,
}).then(() => {
app.pay attention(port, () => {
console.log(`Listening for API Calls`);
});
});

The script additionally imports the OpenAI API configuration traces offered by the OpenAI documentation:

const { Configuration, OpenAIApi } = require(“openai”);
const configuration = new Configuration({
apiKey: course of.env.OPENAI_API_KEY,
});
const openai = new OpenAIApi(configuration);

That is additionally all the encompassing code that may make the snippets of code from the intro work correctly. So, let’s take a more in-depth take a look at these two Categorical server endpoints.

Root Categorical Server Endpoint

When constructing a Web3 ChatGPT dapp that mints your chats into NFTs, your backend must cowl ChatGPT performance. That is the place the OpenAI API enters the scene:

app.get(“/”, async (req, res) => {
const { question } = req;
strive {
const response = await openai.createCompletion({
mannequin: “text-davinci-003”,
immediate: question.message,
max_tokens: 30,
temperature: 0,
});
return res.standing(200).json(response.knowledge);
} catch (e) {
console.log(`One thing went fallacious ${e}`);
return res.standing(400).json();
}
});

The above traces of code fetch the message out of your entry area on the frontend, move it to ChatGPT, and return ChatGPT’s reply.

The “/uploadtoipfs” Categorical Server Endpoint

When creating NFTs, you don’t retailer the NFT metadata and the NFT-representing information on the blockchain. As an alternative, you employ cloud storage options offering you with URIs, that are saved on the blockchain. After all, you could possibly use any centralized storage resolution. Nonetheless, if you wish to take a preferable decentralized method, it’s best to use one of many main Web3 storage options. IPFS is arguably your best option if you goal to make information public. Due to this, our backend “index.js” script makes use of IPFS by way of the IPFS API from Moralis. Listed here are the traces of code overlaying the “uploadtoipfs” endpoint:  

app.get(“/uploadtoipfs”, async (req, res) => {
const { question } = req;
strive {
const response = await Moralis.EvmApi.ipfs.uploadFolder({
abi: [
{
path: “conversation.json”,
content: { chat: query.pair },
},
],
});
console.log(response.outcome);
return res.standing(200).json(response.outcome);
} catch (e) {
console.log(`One thing went fallacious ${e}`);
return res.standing(400).json();
}
});

Above, you may see the “Moralis.EvmApi.ipfs.uploadFolder“ methodology that makes use of “dialog.json” as an IPFS path and the forex ChatGPT dialog because the corresponding content material.  

At this level, it’s best to’ve already deployed your occasion of the “MessageNFT.sol” sensible contract and have the above-presented backend up and working. Thus, it’s time to deal with the ultimate piece of the “Web3 ChatGPT dapp” puzzle: the frontend.

Frontend of the Web3 ChatGPT Minter Dapp

Contained in the “_app.jsx” script, positioned within the “nextjs_moralis_auth/pages” folder, you may see how we wrap “WagmiConfig” and “SessionProvider” round our app. This allows you to use authentication throughout the complete app:

operate MyApp({ Part, pageProps }) {
return (
<WagmiConfig shopper={shopper}>
<SessionProvider session={pageProps.session} refetchInterval={0}>
<Part {…pageProps} />
</SessionProvider>
</WagmiConfig>
);
}

After all, to make the above work, you should import the right suppliers on the high.

Contained in the “signin.jsx” script, our code renders the header and the “Join” button. By way of “handleAuth“, you may join or disconnect MetaMask. As soon as related, the frontend of the Web3 ChatGPT dapp makes use of the “consumer.jsx” web page, which comprises a distinct header. The “consumer.js” script additionally comprises the “loggedIn.js” part, which bridges the info between the backend and the frontend. On the backside of this part, the “loggedIn.js” script renders your frontend:

return (
<part>
<part className={types.chat_box}>
<part className={types.chat_history} id=”chatHistory”></part>
<part className={types.message_input}>
<enter
sort=”textual content”
id=”inputField”
placeholder=”Kind your message…”
onChange={getMessage}
/>
<button onClick={sendMessage}>Ship</button>
</part>
</part>
{showMintBtn && (
<button className={types.mint_btn} onClick={mint}>
MINT NFT
</button>
)}
</part>
);
}

Word: For a extra detailed code walkthrough of the “loggedIn.js” script, use the video on the high of this text, beginning at 5:53. That is additionally the place you may learn the way we used ChatGPT to generate the styling code for our frontend.  

Last Construct – ChatGPT Minter Demo

Right here’s what our ChatGPT NFT minter dapp appears like earlier than connecting MetaMask:

As soon as we click on on the “Authenticate by way of MetaMask” button, MetaMask pops up and asks us to signal the authentication message:

After signing the above signature request, our dapp shows a ChatGPT field and adjustments the header:

As soon as we sort a message within the entry area and hit “Ship”, ChatGPT replies. This additionally prompts the “Mint NFT” button on the backside:

If we resolve to transform our chat into an NFT, we have to click on on the “Mint NFT” button after which verify the minting transaction with our MetaMask:  

As quickly as our transaction goes via, we are able to view our new ChatGPT NFT on Etherscan or OpenSea. After all, we are able to additionally use the “Get NFTs by contract” API reference web page. In that case, we simply want to stick in our sensible contract’s tackle and choose the Goerli chain:   

As we scroll down the “Get NFTs by contract” API reference web page, we see the response, which comprises the main points relating to our NFT: 

What’s ChatGPT?

ChatGPT is a sophisticated chatbot developed by OpenAI on high of its GPT-3 household. Nonetheless, who greatest to elucidate what ChatGPT is than ChatGPT itself:

Needless to say ChatGPT is in its early phases and comprises some limitations. As an example, it often supplies incorrect info. For instance, it could present dangerous or biased content material, and it has restricted data of present affairs. With that in thoughts, ChatGPT have to be used cautiously, and its solutions have to be checked correctly. 

Nonetheless, the ability of this software is sort of spectacular. In any case, it speaks many of the pure languages (although it’s most correct in English) in addition to all of the main pc programming languages. Let’s take a look at some typical ChatGPT use instances.   

Web3 ChatGPT Use Instances

In some ways, this superior AI software is nicely on its solution to changing into for writing what the calculator is for math – a extremely highly effective software. Listed here are some frequent examples of what customers across the globe are utilizing ChatGPT for:

Improvement/programming to degenerate Web2 and Web3 code or code templates and discover/repair code errorsContent developmentMarketing and gross sales pitchesAccounting and knowledge analytics

The above are simply a few of the most typical ChatGPT use instances. After all, we are able to additionally use OpenAI’s API and implement the ability of ChatGPT into all types of dapps (like we did in at the moment’s instance). Furthermore, since ChatGPT has already confirmed itself as a extremely dependable supply of data and superior synthesizing capabilities, specialists, reminiscent of psychologists and psychiatrists, have reported utilizing it as an aiding software. 

The right way to Construct a Web3 ChatGPT Dapp – Abstract

In at the moment’s article, you had an opportunity to make use of our instance challenge and steering to create your occasion of our Web3 ChatGPT NFT minting dapp. Utilizing our scripts, you had been in a position to have your sensible contract, backend, and frontend prepared in minutes. Basically, you simply needed to deploy your occasion of our sensible contract with Hardhat or Remix, set up the required frontend and backend dependencies, get hold of your Moralis Web3 API key and retailer it in a “.env” file, and launch your frontend and backend apps. Lastly, you additionally had a possibility to take a look at our instance dapp demo and see the ability of one of many Moralis NFT API endpoints. Nonetheless, we additionally defined what ChatGPT is and its frequent use instances.

Shifting ahead, we encourage you to make use of this text as an thought generator and as a proof-of-concept instance and exit and construct distinctive dapps that incorporate ChatGPT. If you should increase your Web3 growth data and expertise first, ensure that to make use of the Moralis docs, our blockchain growth movies, and our crypto weblog. A number of the newest matters revolve round Ethereum growth instruments, utilizing IPFS with Ethereum, creating blockchain functions, sensible contract safety, Solana blockchain app growth, Aptos testnet faucet, and way more. As well as, in case you are fascinated with changing into blockchain-certified, Moralis Academy is the place to be. As soon as enrolled, ensure that to first get your blockchain and Bitcoin fundamentals so as.