Show multiple images in response

GPT builders Plugins / Actions builders
1

Hi,

I’m working on a shopping plugin.

If I send back a url that has an image extension, chatGPT usually shows it. It’s not consistent.

Two questions:

  1. Tips to make it consistent.
  2. Want to show 4 images, or a carousel if possible. What’s the best format to return data in for that?

Thanks

2

re: 1. Shopify plugin is a good example to follow. ChatGPT supports OpenGraph by default so if your link has all the right OpenGraph metadata, it should render consistently.

re: 2. Not sure if ChatGPT can render 4 images as a single carousel. However if you give it 4 urls that have the right OpenGraph data, it’ll render them as a carousel.

3

Use the markdown for displaying images. You can also mark down tables to organize them., I have mark down bot. I’ll find it and share it. I’d also suggest use the opengraph specification to display rich previews where possible

4

OK, So I tried a lot of things.

Here is the OpenGraph response from shop plugin:

[
  {
    "id": 6860324241523,
    "title": "Had Me At Meow Unisex T-Shirt",
    "price": "15.0",
    "currency_code": "USD",
    "description": "The cat lover in your life needs this tee! Buy it as a gift and make sure to get one for you! Perfec",
    "url": "https://ivoryella.com/products/be-mine-unisex-t-shirt"
  },
....

Here is my response:

[
  {
    "id": 780,
    "title": "Cropped Tshirt design for The Simpsons",
    "url": "https://www.bohita.com/preview?mock_req_id=ZXExSUWYYOSBgfSqBrlC"
  },
...

For those urls, the opengraph images render on facebook debugger and other opengraph debuggers I tried.

E.g. [theirs](https://developers.facebook.com/tools/debug/echo/?q=https%3A%2F%2Fivoryella.com%2Fproducts%2Fbe-mine-unisex-t-shirt)
vs. [mine](https://developers.facebook.com/tools/debug/echo/?q=https%3A%2F%2Fwww.bohita.com%2Fpreview%3Fmock_req_id%3DZXExSUWYYOSBgfSqBrlC)

However, they do not render in chatGPT.
I get a list of links, but no beautiful carousel like shop plugin.

What am I missing?
5

Looks like your page first renders with empty OpenGraph tags. It adds them back in async once result is fetched. Since ChatGPT doesn’t handle async updates, and it doesn’t store session or local variables, ChatGPT just assumes that your url doesn’t have OpenGraph tags.

My suggestion is to design your url like stateless APIs - it should show all the necessary information ChatGPT needs right away. Don’t assume that ChatGPT will wait or retry.

1 Like