Fsejr18•5d ago

Agent module pictures

Hi, anyone who knows how i can add specific pictures for my agent module to use for the carousels it makes. Right now it just creates random pictures but i need it to use specific pictures instead? Have tried with files to the knowledge base but it doesn’t work and It doesn’t take the pictures from the links I have provided.

2 Replies

Tico | Voiceflow Assistant•5d ago

How to show specific images in the Agent’s carousels The Agent only sees text from your Knowledge Base, so the links or files you drop there won’t be picked up as carousel images. When the LLM decides to send a carousel on its own it will pick a stock image, which is why you’re getting the random pictures. To guarantee a fixed picture you have to build the carousel yourself and hand it to the Agent instead of letting the LLM improvise: 1. Add a Carousel (or Card) step in your flow • Open the step ➜ for each card upload an image or paste a public image URL (PNG/JPG/GIF).
• Fill in title, description and any buttons you need. • Connect the step at the point in the dialogue where you want the carousel to appear. (Docs: Card & Carousel step – https://docs.voiceflow.com) 2. Or return a Carousel from a Custom Action / Code step If you need the list to be built at runtime (e-g. from an API) return a carousel trace that contains your own image URLs:

   export default async function main(args) {
     const cards = [
       {
         imageUrl: 'https://your-cdn.com/img/product-1.png',
         title: 'Product 1',
         description: { text: 'Great product' }
       },
       {
         imageUrl: 'https://your-cdn.com/img/product-2.png',
         title: 'Product 2',
         description: { text: 'Even better' }
       }
     ];
     return { trace: [{ type: 'carousel', payload: { cards } }] };
   }

   export default async function main(args) {
     const cards = [
       {
         imageUrl: 'https://your-cdn.com/img/product-1.png',
         title: 'Product 1',
         description: { text: 'Great product' }
       },
       {
         imageUrl: 'https://your-cdn.com/img/product-2.png',
         title: 'Product 2',
         description: { text: 'Even better' }
       }
     ];
     return { trace: [{ type: 'carousel', payload: { cards } }] };
   }

The Agent will render exactly the pictures you supply. 3. Give the Agent a hint (optional) You can add an instruction in the System Prompt such as:
“If you need to show a carousel, call the ‘ShowProducts’ trigger.”
Then place your Carousel step behind that trigger. This prevents the LLM from inventing its own images. In short: the Knowledge Base cannot be used for image assets; build the carousel yourself (step or code) and pass the exact image URLs you want displayed.

Fsejr18OP•5d ago

@Tico | Voiceflow Assistant so It’s impossible to it in the agent step no matter what?

Agent module pictures

Did you find this page helpful?