When you combine Kairos dynamic NFT developer tools with your application, you’ll gain all the functionality you need to interact with the blockchain, so you can focus on building the absolute best user experience. We’ve launched our API documentation, along with an accompanying Javascript library, and a sample dapp codebase to help get you started. See and interact with the sample dapp demo as well.

Here are some of the Kairos features you can tap into:

‍

How Kairos integrates

Your application can be built with any framework you prefer (or none at all), in all the ways that you would normally build it. If you add our Kairos Dapp library to your project with your Kairos collection secret API keys, you will now have the ability to utilize Kairos to handle all the blockchain specific needs in your app.

The flowchart above illustrates the separation of concerns between what you build, and what you allow Kairos to handle for you.

Let’s walk through this, using the Bonsai NFT app as an example. We’ll break down the capabilities of the API and the library into the four main Kairos development features: create, display, update and verify.

‍

Creating NFTs

Kairos handles on-the-fly NFT creation via API endpoints. This means that you can leave some of the creation process to the user, or make it random, instead of creating a pre-determined collection of NFTs at the outset. You can still do that too, using the Kairos dashboard, but for dynamically generated NFTs, we’ll tap into the API.

In the case of the Bonsai NFT, we want users to all mint the same NFT with the same attributes (a seed for the tree). In the demo, we don’t offer any user customization before making the request for the NFT, but we certainly could! In Fregg, we do just that. We allow users to adjust some of the attributes of the NFT to make it unique to them. They can name their own, choose what family of creatures to randomly mint, and choose a case color. The user will also have chances to evolve it later on, based on some events.

For the user customization, you would build the frontend for this, presenting the options to the user. However, some of the traits you don’t want set on the client-side, because they might be manipulated — such as a chance for a rare trait. In the case of Fregg, the user chooses the family, but the species is set at random on the backend. This process is totally up to you! It’s what makes dynamically generated NFTs fun.

When you’re ready for an NFT to be created, your backend server will send a request to the Kairos API. This type of operation should be handled on the backend; to not expose your Kairos collection API secrets to the client, along with other aspects you wouldn’t want the user to potentially see or modify.

/**
 * STEP 1 - Create an NFT on the Kairos server
 */
const createResponse: any = await request(
  process.env.KAIROS_API_URL,
  CreateNftQuery, // See API documentation for gql query
  {
    input: {
      name: 'My NFT Name',
      description: 'Something describing the NFT',
      collectionId: process.env.KAIROS_COLLECTION_ID, // Keep this secret!
      price: 1.0, // The price of the NFT (on-chain native currency)
    },
  },
  {
    Authorization: auth,
  }
)

This creates the NFT on Kairos servers and prepares it for deployment.

/**
 * STEP 2 - Deploy the NFT
 */
await request(
  process.env.KAIROS_API_URL,
  DeployNftQuery, // See API documentation for gql query
  {
    input: {
      nftId: '001',
      isBlocking: true,
    },
  },
  {
    Authorization: auth,
  }
)

Depending on the type of NFT, this request deploys some, or all, of the metadata of the NFT to the blockchain. This can only be done once per NFT. NFTs are "lazy minted" to the blockchain, meaning that their metadata is put on-chain in this operation, but the NFT itself doesn't exist, and isn't assigned to any wallet, until purchased by a user.

For the final step in the creation process, you will utilize the Kairos Dapp library to broker the purchase between the user and the smart contract, which is all handled by the client.

/**
 * STEP 3 - Initiate NFT purchase using the NFT ID from Kairos
 */
await Kairos.startBid(result.nftId)

This will open the purchase modal for the user to complete the purchase on their own. The Kairos Dapp library handles all this for you, including purchasing options (crypto or fiat), requesting user email and displaying the minting status. You can respond to minting status events to forward the user along in your application.

‍

Displaying NFTs and User State

After a successful purchase, which automatically verifies the user, or the user connects to Kairos (provided by the Kairos.logIn() method in the Kairos Dapp library) you now have access to the currentUser.

In the Bonsai NFT demo, we use the currentUser data to display the current logged-in state to the user so they know which wallet / account they are interacting with. This is helpful because just like traditional username and password accounts, users may have multiple wallets that they interact with.

Once you have an authenticated user, you can call the collectorOwnershipsByCollection query to  display all NFTs the user owns, or the nft query for a specific one.

In the Bonsai NFT demo, we have a listing page that shows all the NFTs the current user owns (if they own more than one), so we run the collectorOwnershipsByCollection query to get an array of all NFTs, and when they click on one of them, we take them to a detail page that allows them to see the full details of that NFT and care for it.

await request(
  process.env.KAIROS_API_URL,
  OwnershipsQuery, // See API documentation for gql query
  {
    collectionId: process.env.KAIROS_COLLECTION_ID,
    sessionToken: sessionToken,
  },
  {
    Authorization: auth,
  }
)

‍

Updating NFTs

Kairos handles metadata changes to NFTs for your collection by serving metadata anytime a third-party application requests it. This means that metadata changes can be made and seen instantly, because there’s no changes made to the NFT produced by the smart contract on the blockchain.

Most NFT smart contracts don't embed images or attributes directly on-chain. Rather, they link to other URLs that host that information. Kairos servers hold the current "state" of the NFT metadata, which is linked to from the smart contract. If you update the NFT metadata, and then use a blockchain explorer or NFT exchange (such as Opensea), you will see the metadata that is referenced on-chain has updated with your changes.

Note: Most explorers and marketplaces, like Opensea, don't update metadata in real-time. Rather, they cache NFT data, and then request fresh data periodically. So metadata changes may seem delayed if viewing NFTs on one of these platforms, even if they aren't.

For the Bonsai NFT demo, we allow users to update their NFTs within the detail page.

‍

Similar to how you don’t want the user requesting NFT creation directly with the Kairos API, you will also make update requests on your backend server. This is done in a similar way to creating them:

await request(
  process.env.KAIROS_API_URL,
  UpdateMetadataQuery, // See API documentation for gql query
  {
    input: {
      nftId: '001',
      metadataPatch: {
        image: 'http://someimageurl.com',
        attributes: [
          {
            trait_type: 'Bonsai Stage',
            value: 'Sapling',
          },
          {
            trait_type: 'Description',
            value: 'A sapling is a young tree nearing maturity.',
          },
          ... // You can add as many attributes as you want
        ],
      },
    },
  },
  {
    Authorization: auth,
  }
)

At this point, your user will see instant changes provided by the metadata on Kairos. Other applications viewing the NFT on the blockchain will see the change happen over time, as they request the newest data.

‍

Verifying Holders

Kairos authenticates NFT holders, so that you can authorize them within your application, based on your own needs. For example, you only want to allow users to modify their own NFTs. You may have other use cases as well, like displaying all collection-owned NFTs for each user, or gating access to certain parts of your application.

Sometimes your authentication needs may be simple enough that Kairos is all you need to grant access to users based on the NFTs they own. However, you may also use Kairos verification in addition to your existing authentication approaches.

A simple execution of this could look something like this:

import { useContext } from 'react'
import { Kairos, KairosContext } from '@kairosnfts/dapp'

export default function ChildComponent() {
  const { currentUser } = useContext(KairosContext)

  const handleLogin = async () => {
    await Kairos.logIn()
  }

  const handleLogOut = async () => {
    await Kairos.logOut()
  }

  return (
    <div>
      {currentUser ?
        <button onClick={handleLogOut}>Log Out</button>
        : <button onClick={handleLogin}>Log In</button>
      }

      {currentUser && `Logged in as ${currentUser.email}`}
    </div>
  )
}

‍

See it all in practice

You can see a sample project, with code to play around with, that follows a similar flow to what has been described here in our bonsai dynamic NFT project. Additionally, we recently launched a web game, called Fregg, that allows users to customize their NFTs and make them personal before minting. Check out the blog post about that project here.

‍

Let us handle the blockchain, so can you handle the fun part

Our API is something we think many developers can get excited about.  It removes the burden of learning and implementing proper blockchain development from engineers, who already have a full plate on their hands.

Most developers won’t need any prior web3 experience to build a dapp with Kairos. Some fundamental knowledge about NFTs and smart contracts is helpful in order to understand the minting and delivery process, but the implementation with Kairos is just as easy as any other API.

We can’t wait to see what you build!

Explore the Bonsai Dynamic NFT Demo