Images Quickstart ⚡

Register your designs on Story in under 5 minutes

In this quickstart, you will:

• Register a design portfolio as an IP collection
• Register a image design as an IP asset

This quickstart is under development as new features are added to the Story Protocol daily.

Preparation Steps

1. Create a Developer Account and Project

   To get started, create a developer account in the Crossmint Staging Console. Open that link, sign in, and accept the dialog to continue.

   Crossmint offers two consoles: staging, for development and testing, and production.

2. Get an API Key

   Create a server-side API key with these scopes: collection.create, collection.update, collection.read, nfts.create, nfts.read.

   This allows your API key to perform any kind of asset registration action.

Register Design Portfolio

1. Create an IP Collection

   createCollection.ts

   const response = await fetch("https://staging.crossmint.com/api/v1/ip/collections", {
       method: "POST",
       headers: {
           "X-API-KEY": "<YOUR_API_KEY>",
           "Content-Type": "application/json"
       },
       body: JSON.stringify({
           metadata: {
               description: "My image design portfolio",
               name: "My Image Design Portfolio",
               symbol: "MIDP"
           },
           chain: "story-testnet"
       })
   });
   
   const collection = await response.json();
   console.log("Collection created:", collection);
   

   {
       id: '1ffb0fc3-b652-4a0e-b748-3e09c3608826',
       actionId: '1ffb0fc3-b652-4a0e-b748-3e09c3608826',
       metadata: {
           name: 'My Image Design Portfolio',
           symbol: 'MIDP',
           description: 'My image design portfolio'
       },
       onChain: { chain: 'story-testnet' }
   }
   

   Additional metadata can be added to the collection to help with discovery, such as a cover image. Check out the API reference for more information.

   To create the portfolio, run the script:

   TypeScript

   npx tsx createCollection.ts
   

Register Image Design

1. Create a Design

   Use OpenAI’s DALL-E 3 to create a design:

   createDesign.ts

   import OpenAI from 'openai'
   
   async function main() {
   const openai = new OpenAI({
       apiKey: "<YOUR_OPENAI_API_KEY>"
   })
   
   const image = await openai.images.generate({
       model: 'dall-e-2',
       prompt: 'A futuristic bridge connecting two digital worlds, with a sleek mint-colored pathway'
   });
   
   console.log(image.data[0].url) // the url to the newly created image
   }
   
   main();
   

   The resulting image looks like this:

   
2. Register Image Design on Story

   registerIPAsset.ts

   const response = await fetch("https://staging.crossmint.com/api/v1/ip/collections/{collectionId}/ipassets", {
       method: "POST",
       headers: {
           "X-API-KEY": "<YOUR_API_KEY>",
           "Content-Type": "application/json"
       },
       body: JSON.stringify({
           owner: 'email:[e-mail]:story-testnet',
           nftMetadata: {
               name: 'My Image Design',
               description: 'An image designed to represent a futuristic bridge connecting two digital worlds, with a sleek mint-colored pathway',
               image: '<YOUR_IMAGE_URL>'
           },
           ipAssetMetadata: {
               title: 'My Image Design',
               createdAt: '2025-02-11T11:13:00',
               ipType: 'image',
               creators: [
                   {
                       name: 'John Doe',
                       email: '[e-mail]',
                       crossmintUserLocator: 'email:[e-mail]:story-testnet',
                       contributionPercent: 100
                   },
               ],
               attributes: [
                   {
                       key: 'Model',
                       value: 'dall-e-2'
                   },
                   {
                       key: 'Prompt',
                       value: 'A futuristic bridge connecting two digital worlds, with a sleek mint-colored pathway'
                   },
               ]
           }
       })
   });
   
   const ipAsset = await response.json();
   console.log("IP Asset:", ipAsset);
   

   {
       "id": "d290f1ee-6c54-4b01-90e6-d701748f0851",
       "actionId": "d290f1ee-6c54-4b01-90e6-d701748f0851",
       "nftMetadata": {
           "name": "My Image Design",
           "description": "An image designed to represent a futuristic bridge connecting two digital worlds, with a sleek mint-colored pathway",
           "image": "<YOUR_IMAGE_URL>"
       },
       "ipAssetMetadata": {
           "title": "My Image Design",
           "createdAt": "2025-02-11T11:13:00",
           "ipType": "image",
           "creators": [
               {
                   "name": "John Doe",
                   "email": "email:[e-mail]",
                   "contributionPercent": 100
               }
           ],
           "attributes": [
               {
                   "key": "Model",
                   "value": "dall-e-2"
               },
               {
                   "key": "Prompt",
                   "value": "A futuristic bridge connecting two digital worlds, with a sleek mint-colored pathway"
               }
           ]
       },
       "onChain": {
           "status": "success",
           "chain": "story-testnet",
           "contractAddress": "0x123",
           "ipAssetId": "0xAC6062FF53fa41e61Fe01B89B83d9dB96b5F9280",
           "tokenId": "1",
           "txId": "0x123",
           "explorerLink": "https://explorer.story.foundation/ipa/0xAC6062FF53fa41e61Fe01B89B83d9dB96b5F9280"
       }
   }
   

   Run the script to register the song:

   TypeScript

   npx tsx registerIPAsset.ts
   

Retrieve Your IP Asset

1. Get IP Asset Details

   After registering your IP asset, you can retrieve its details to verify the information or display it in your application.

   getIPAsset.ts

   const response = await fetch("https://staging.crossmint.com/api/v1/ip/collections/{collectionId}/ipassets/{ipAssetId}", {
       method: "GET",
       headers: {
           "X-API-KEY": "<YOUR_API_KEY>",
           "Content-Type": "application/json"
       }
   });
   
   const ipAsset = await response.json();
   console.log("IP Asset:", ipAsset);
   

   {
       "id": "d290f1ee-6c54-4b01-90e6-d701748f0851",
       "nftMetadata": {
           "name": "My Image Design",
           "description": "An image designed to represent a futuristic bridge connecting two digital worlds, with a sleek mint-colored pathway",
           "image": "<YOUR_IMAGE_URL>"
       },
       "ipAssetMetadata": {
           "title": "My Image Design",
           "createdAt": "2025-02-11T11:13:00",
           "ipType": "image",
           "creators": [
               {
                   "name": "John Doe",
                   "email": "email:[e-mail]",
                   "contributionPercent": 100
               }
           ],
           "attributes": [
               {
                   "key": "Model",
                   "value": "dall-e-2"
               },
               {
                   "key": "Prompt",
                   "value": "A futuristic bridge connecting two digital worlds, with a sleek mint-colored pathway"
               }
           ]
       },
       "onChain": {
           "status": "success",
           "chain": "story-testnet",
           "contractAddress": "0x123",
           "ipAssetId": "d290f1ee-6c54-4b01-90e6-d701748f0851",
           "tokenId": "1",
           "txId": "0x123",
           "explorerLink": "https://explorer.story.foundation/ipa/0xAC6062FF53fa41e61Fe01B89B83d9dB96b5F9280"
       }
   }
   

   Replace {collectionId} with your collection ID and {ipAssetId} with the IP asset ID returned when you registered the asset. Then run the script:

   TypeScript

   npx tsx getIPAsset.ts
   

Confirm Image Registration

1. Get Action Status

   You can easily check the IP asset registration status to ensure the action has completed before proceeding.

   getAction.ts

   const response = await fetch("https://staging.crossmint.com/api/v1/ip/actions/{actionId}", {
       method: "GET",
       headers: {
           "X-API-KEY": "<YOUR_API_KEY>",
           "Content-Type": "application/json"
       }
   });
   
   const action = await response.json();
   console.log("Action:", action);
   

   {
       id: '1ffb0fc3-b652-4a0e-b748-3e09c3608826',
       status: 'success'
   }
   

   Use the action ID returned in any of the previous steps and run the script:

   TypeScript

   npx tsx getAction.ts