> ## Documentation Index
> Fetch the complete documentation index at: https://docs.crossmint.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 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

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

## Preparation Steps

<Steps>
  <Step title="Create a Developer Account and Project">
    <Snippet file="create-developer-account.mdx" />
  </Step>

  <Step title="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.
  </Step>
</Steps>

## Register Design Portfolio

<Steps>
  <Step title="Create an IP Collection">
    <CodeGroup>
      ```typescript createCollection.ts theme={null}
      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);
      ```

      ```typescript response theme={null}
      {
          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' }
      }
      ```
    </CodeGroup>

    Additional metadata can be added to the collection to help with discovery, such as a cover image. Check out the [API reference](/api-reference/ip/create-ip-collection) for more information.

    To create the portfolio, run the script:

    <CodeGroup>
      ```bash TypeScript theme={null}
      npx tsx createCollection.ts
      ```
    </CodeGroup>
  </Step>
</Steps>

## Register Image Design

<Steps>
  <Step title="Create a Design">
    Use OpenAI's DALL-E 3 to create a design:

    <CodeGroup>
      ```typescript createDesign.ts theme={null}
      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();
      ```
    </CodeGroup>

    The resulting image looks like this:

    <img src="https://mintcdn.com/crossmint/wfEo4Py0D7KOM99v/images/solutions/intellectual-property/bridge.png?fit=max&auto=format&n=wfEo4Py0D7KOM99v&q=85&s=ad2b6bad995268fd89ee2f09a8166ea4" alt="Create Design" style={{ borderRadius: '8px' }} width="1024" height="1024" data-path="images/solutions/intellectual-property/bridge.png" />
  </Step>

  <Step title="Register Image Design on Story">
    <CodeGroup>
      ```typescript registerIPAsset.ts theme={null}
      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:creator@example.com: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: 'user@example.com',
                          crossmintUserLocator: 'email:user@example.com: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);
      ```

      ```typescript response theme={null}
      {
          "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:user@example.com",
                      "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"
          }
      }
      ```
    </CodeGroup>

    Run the script to register the song:

    <CodeGroup>
      ```bash TypeScript theme={null}
      npx tsx registerIPAsset.ts
      ```
    </CodeGroup>
  </Step>
</Steps>

## Retrieve Your IP Asset

<Steps>
  <Step title="Get IP Asset Details">
    After registering your IP asset, you can retrieve its details to verify the information or display it in your application.

    <CodeGroup>
      ```typescript getIPAsset.ts theme={null}
      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);
      ```

      ```typescript response theme={null}
      {
          "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:user@example.com",
                      "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"
          }
      }
      ```
    </CodeGroup>

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

    <CodeGroup>
      ```bash TypeScript theme={null}
      npx tsx getIPAsset.ts
      ```
    </CodeGroup>
  </Step>
</Steps>

## Confirm Image Registration

<Steps>
  <Step title="Get Action Status">
    You can easily check the IP asset registration status to ensure the action has completed before proceeding.

    <CodeGroup>
      ```typescript getAction.ts theme={null}
      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);
      ```

      ```typescript response theme={null}
      {
          id: '1ffb0fc3-b652-4a0e-b748-3e09c3608826',
          status: 'success'
      }
      ```
    </CodeGroup>

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

    <CodeGroup>
      ```bash TypeScript theme={null}
      npx tsx getAction.ts
      ```
    </CodeGroup>
  </Step>
</Steps>