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 www, for production.

Then, navigate to project Settings > General and set the wallet type to “Smart Wallets”:

2

Get an API Key

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

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"
        }
    })
});

const collection = await response.json();
console.log("Collection created:", collection);

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]',
        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'
                },
            ]
        }
    })
});

const ipAsset = await response.json();
console.log("IP Asset:", ipAsset);

Run the script to register the song:

TypeScript

npx tsx registerIPAsset.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);

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

TypeScript

npx tsx getAction.ts