Voiceflow Chatbot: Build Product Recommendation with Cursor AI in MINUTES! (No Coding Required)
ฝัง
- เผยแพร่เมื่อ 5 ก.พ. 2025
- Tired of coding? This video shows you how to revolutionize your Voiceflow chatbot with Cursor AI, a powerful AI coding assistant.
Learn how to:
• Effortlessly build a product recommendation system within your Voiceflow chatbot.
• Generate code in SECONDS to fetch product data from Airtable using a custom function.
• Display eye-catching product carousels to your users with a seamless user experience.
• Leverage Cursor AI's power even if you have ZERO coding experience.
• Boost your productivity and save countless hours as Cursor AI writes clean, bug-free code for you.
• Discover expert tips and tricks for maximizing Cursor AI's potential in your Voiceflow projects.
This video is perfect for:
• Voiceflow beginners looking to enhance their chatbot functionality.
• Experienced developers seeking to streamline their workflow and focus on innovation.
• Anyone who wants to build amazing chatbots quickly and efficiently.
Watch now and experience the magic of Cursor AI!
#Voiceflow #Chatbot #AI #CursorAI #ProductRecommendation #NoCode #LowCode #ChatbotDevelopment #Productivity #SoftwareEngineering #Airtable #API #MachineLearning #ArtificialIntelligence #Automation #Workflow #DeveloperTools #TechTips #TechTutorial #youtubetutorial
*********************
prompts
Please follow the instruction here: @VF functions to write code to fetch the data from airtable, and save the records in the products array. Please include this information when making the API calls: "const tableID ="your Airtable ID";
const AirtableKey = "your Airtable token";
const url = "api.airtable.c..." + tableID;"
Please follow the carousel example code here: @Voiceflow trace types to Generate carousel items from the products. Map the Name, Content and Image attributes of product to "title", "description.text" and "imageUrl", respectively, and create buttons with name of "Buy Product" and "open_url" type with the url of product's attribute: "PaymentLink", then, save them to the "carouselItems" variable. Finally, Return an object of trace array containing an object with type and payload.cards of the generated carouselItems. Make sure to follow the carousel pattern.
prompts used in this video:
Please follow the instruction here: @VF functions to write code to fetch the data from airtable, and save the records in the products array. Please include this information when making the API calls: "const tableID ="your Airtable ID";
const AirtableKey = "your Airtable token";
const url = "api.airtable.com/v0/" + tableID;"
Please follow the carousel example code here: @Voiceflow trace types to Generate carousel items from the products. Map the Name, Content and Image attributes of product to "title", "description.text" and "imageUrl", respectively, and create buttons with name of "Buy Product" and "open_url" type with the url of product's attribute: "PaymentLink", then, save them to the "carouselItems" variable. Finally, Return an object of trace array containing an object with type and payload.cards of the generated carouselItems. Make sure to follow the carousel pattern.
Thank you for your great training videos! Could you please provide a link to the tips for Cursor AI.
*********************
prompts
Please follow the instruction here: @VF functions to write code to fetch the data from airtable, and save the records in the products array. Please include this information when making the API calls: "const tableID ="your Airtable ID";
const AirtableKey = "your Airtable token";
const url = "api.airtable.com/v0/" + tableID;"
Please follow the carousel example code here: @Voiceflow trace types to Generate carousel items from the products. Map the Name, Content and Image attributes of product to "title", "description.text" and "imageUrl", respectively, and create buttons with name of "Buy Product" and "open_url" type with the url of product's attribute: "PaymentLink", then, save them to the "carouselItems" variable. Finally, Return an object of trace array containing an object with type and payload.cards of the generated carouselItems. Make sure to follow the carousel pattern.
Very nice video! It would be great if you could create a tutorial where you integrate the Stripe embedded form into the chat widget, so users can pay directly in the chat without having to be redirected to another page. I would love to see it...
Yes. Will make a video on this.
@@FarthinkAI Thank you very much!
Great video! Everything works well, but button is not clickable. Do you have any idea what can be wrong?
You may check if the button is "open_url" type. If not, ask Cursor to fix it. It is an easy job for Cursor. 😀
hey amazing tutorial just one little thing: the code works but when i click buy products it says path not connected in voiceflow
You may check if the "buy product" button has the correct URL or it leads to other intents as desired.
Thanks for this! But do you know how I can build it into a more precise system that recommends products based on the category of the product that the user prefers?
After fetching the data from Airtable, you may select the products in the user preferred category to display in the dynamic carousel. This can be implemented with the help of AI or with a specific function.
@@FarthinkAI oh this sounds like a good idea, hope u can make a vid about it
Hey I have another question if we used an API block instead of the function block to export data from voiceflow to airtable, how to set it up?
You may watch this video: th-cam.com/video/_ppqwDna5f4/w-d-xo.html, showing how to use an API block to connect with Airtable. The method may change to POST.
The furthest I could get was a success message in voice-flow but then nothing showed up when I clicked on the traces arrow. I made an air table with the same columns to link everything. Stumped
The data is not fetched. Make sure the column names are capitalized at the first letter.
@@FarthinkAI Thank you for your channel and sharing your advanced technical skill with the voice flow community. My column names have capitals and i have been trying to get the code right. However, i feel a bit exhausted. Been at this for an hour now and a few days before that. Before I bought a template to make the dynamic card process easier but then air-table did some sort of update so that template didn't work. Something seems to always mess up. The code is different every time from content creators. I keep running things through chatgpt to fix and tried to copy that code you used from cursor ai but got error messages. Us beginners would gladly just pay you if you can make a process simple enough that a little kid or an old person could follow and get constant results. All the dynamic voice flow card tutorials seem like they are unstable to ppl new to javascript and voice flow functions.
Sorry if i sound mean it's probably an issue with voice-flow as other platforms seem like they can implement this functionality easier but I just really like some of the demos they showed with dynamic cards and i really want to pull it off to look cool if possible, haha.
Sorry to hear that. I can feel your frustration. Cursor should work well at this case if we give it a good prompt with confined and explicit instructions. I think the prompt used in this video can accomplish this with the code patterns stored in the docs which Cursor can follow. The purpose of this video is to let users with no coding experience utilize Cursor to write code. If you follow along the video, Cursor should generate the code as shown in the video.
Please make sure to follow the steps and use the prompt in the video. If possible, you may send the Cursor code to me and I will take a look.
@@FarthinkAI Wow, thank you so much! I will give it another go sometime next week and send you an email with the Cursor code, air-table screenshots, prompts, etc so you can tell/show me what I'm doing wrong 😅. Thank you again for being amazing!