# Help get Caffeine to display NFT’s on a webpage

**URL:** <https://forum.dfinity.org/t/help-get-caffeine-to-display-nft-s-on-a-webpage/53542>\
**Category:** Developers\
**Created:** [July 19, 2025, 2:22pm UTC](https://forum.dfinity.org/t/help-get-caffeine-to-display-nft-s-on-a-webpage/53542 "2025-07-19T14:22:03Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![jonit](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/jonit/32/12279_2.png) [@jonit](https://forum.dfinity.org/u/jonit)\
**Post date:** [July 19, 2025, 2:22pm UTC](https://forum.dfinity.org/t/help-get-caffeine-to-display-nft-s-on-a-webpage/53542/1 "2025-07-19T14:22:04Z")

</div>

So it looks like either I’m an idiot, possible, or caffeine doesnt know how to display icp NFT’s I trying to help it but I think i’m missing a piece of the puzzle  
Any help would be appreciated as we need to call NFTs and their meta to be used in games

 ![IMG_1232](https://us1.discourse-cdn.com/flex023/uploads/dfn/original/3X/5/8/58f6d8b41ebf2b47e8044a1b9c07c31734a9ecab.jpeg)

---

<div class="post-metadata">

**Author:** ![Phasma](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/phasma/32/27069_2.png) [@Phasma](https://forum.dfinity.org/u/Phasma)\
**Post date:** [July 19, 2025, 2:40pm UTC](https://forum.dfinity.org/t/help-get-caffeine-to-display-nft-s-on-a-webpage/53542/2 "2025-07-19T14:40:33Z")

</div>

It’s possible that CaffeineAI doesn’t fully support the ext NFT standard, which may be causing the display issue.

A potential solution would be to compare the output of `get_metadata()` or `token_metadata()` with what CaffeineAI expects.

---

<div class="post-metadata">

**Author:** ![jonit](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/jonit/32/12279_2.png) [@jonit](https://forum.dfinity.org/u/jonit)\
**Post date:** [July 19, 2025, 2:48pm UTC](https://forum.dfinity.org/t/help-get-caffeine-to-display-nft-s-on-a-webpage/53542/3 "2025-07-19T14:48:18Z")

</div>

okay will give that a try

---

<div class="post-metadata">

**Author:** ![jonit](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/jonit/32/12279_2.png) [@jonit](https://forum.dfinity.org/u/jonit)\
**Post date:** [July 19, 2025, 2:57pm UTC](https://forum.dfinity.org/t/help-get-caffeine-to-display-nft-s-on-a-webpage/53542/4 "2025-07-19T14:57:28Z")

</div>

this is what its saying, not sure how to copy it all out as text

 ![IMG_1234](https://us1.discourse-cdn.com/flex023/uploads/dfn/original/3X/2/9/29f85fb89bcef440883a5cd10aea2d116459cbab.jpeg)  
 ![IMG_1235](https://us1.discourse-cdn.com/flex023/uploads/dfn/original/3X/5/7/57d2d860b9b8e0e22aa0e29b1d62633a3303b5ab.jpeg)  
 ![IMG_1236](https://us1.discourse-cdn.com/flex023/uploads/dfn/original/3X/a/e/aedc4e49b9a3ca1cee0a3c1ad43b86ee189ba66a.jpeg)  
 ![IMG_1237](https://us1.discourse-cdn.com/flex023/uploads/dfn/original/3X/4/f/4fdcbb7c76b7877eab6dd83ea5080ac8d7559b1e.jpeg)

---

<div class="post-metadata">

**Author:** ![sea-snake](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/sea-snake/32/7243_2.png) [@sea-snake](https://forum.dfinity.org/u/sea-snake)\
**Post date:** [July 19, 2025, 3:03pm UTC](https://forum.dfinity.org/t/help-get-caffeine-to-display-nft-s-on-a-webpage/53542/5 "2025-07-19T15:03:41Z")

</div>

Did you tell it how to convert between ext nft index to ext nft principal? And then how that’s used to get the url to load the image?

It probably won’t know these things for the EXT standard, but you can try to tell it 😅

Unfortunately these details of the ext standard are not well documented anywhere as far as I’ve seen, so it’s unlikely that it got picked up in the training data in comparison to e.g. ICRC-1.

```ts
const numberToUint32 = (num: number, littleEndian?: boolean): Uint8Array => {
  let b = new ArrayBuffer(4);
  new DataView(b).setUint32(0, num, littleEndian);
  return new Uint8Array(b);
};
const tokenIndexToId = (
  canisterId: Principal,
  index: bigint,
): Principal => {
  const padding = new Buffer("\x0Atid");
  const array = new Uint8Array([
    ...padding,
    ...canisterId.toUint8Array(),
    ...Array.from(numberToUint32(Number(index), false)),
  ]);
  return Principal.fromUint8Array(array);
};

const imageUrl = `https://${canisterId.toText()}.raw.icp0.io/?tokenid=${tokenIndexToId(canisterId, tokenIndex)}`;
   

```

You could alternatively maybe also ask it to use `@slide-computer/tokens` and `@slide-computer/tokens-ext`.

As for other metadata like traits, those are not on-chain for most ext collections as far as I’ve seen 😕

I remember grabbing the traits with a cors proxy from the entrepot/toniq backend filters json file 😅

> <https://github.com/slide-computer/tokens-js/blob/main/packages/tokens-ext/src/index.ts#L260>

---

<div class="post-metadata">

**Author:** ![jonit](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/jonit/32/12279_2.png) [@jonit](https://forum.dfinity.org/u/jonit)\
**Post date:** [July 19, 2025, 3:09pm UTC](https://forum.dfinity.org/t/help-get-caffeine-to-display-nft-s-on-a-webpage/53542/6 "2025-07-19T15:09:23Z")

</div>

I copied all that into caffeine, lets see what happens 🤓

---

<div class="post-metadata">

**Author:** ![jonit](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/jonit/32/12279_2.png) [@jonit](https://forum.dfinity.org/u/jonit)\
**Post date:** [July 19, 2025, 3:14pm UTC](https://forum.dfinity.org/t/help-get-caffeine-to-display-nft-s-on-a-webpage/53542/7 "2025-07-19T15:14:15Z")

</div>

luckily i have the pokedbot traits in a doc already and a clone of the images

---

<div class="post-metadata">

**Author:** ![jonit](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/jonit/32/12279_2.png) [@jonit](https://forum.dfinity.org/u/jonit)\
**Post date:** [July 19, 2025, 5:48pm UTC](https://forum.dfinity.org/t/help-get-caffeine-to-display-nft-s-on-a-webpage/53542/8 "2025-07-19T17:48:45Z")

</div>

Solved I was using the wrong process, trying get it to read entrepot rather than the source canister

 ![IMG_1238](https://us1.discourse-cdn.com/flex023/uploads/dfn/original/3X/d/c/dc5d8400e9f2613440d80b97e529754c80bab955.jpeg)

But this is not an EXT nft still struggling with them