{"id":14670,"date":"2025-10-22T15:30:43","date_gmt":"2025-10-22T20:30:43","guid":{"rendered":"https:\/\/www.mrc-productivity.com\/docs\/?post_type=ht_kb&#038;p=14670"},"modified":"2025-10-24T09:20:21","modified_gmt":"2025-10-24T14:20:21","slug":"how-to-call-client-side-scripting-with-ai","status":"publish","type":"ht_kb","link":"https:\/\/www.mrc-productivity.com\/docs\/knowledge-base\/how-to-call-client-side-scripting-with-ai","title":{"rendered":"How to Call Client Side Scripting with AI"},"content":{"rendered":"\n<p>Imagine a scenario where you are interacting with an AI chat bot within m-Power. Then, based on the AI response, you want to invoke client side scripting, based on the response. This document will show you how to do this.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Overview<\/h3>\n\n\n\n<p>Each and every time the AI Assistant responds, m-Power will attempt to call a JavaScript function by the name of aiResponseCallback. <\/p>\n\n\n\n<p>If it exists on the page, the function will be invoked. <\/p>\n\n\n\n<p>If the function doesn&#8217;t exist, it will be skipped. <\/p>\n\n\n\n<p>Below you will find a barebones example of the function that will return a JavaScript alert each time the  AI Assistant responds.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">The Code<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script&gt;\n\tfunction aiResponseCallback(response, message, data){\n          alert(\"Your Function has been Called\");  \n        }\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">In-Depth Example<\/h3>\n\n\n\n<p>Having understood the basic example, let&#8217;s expand more on some of the pieces and parts of this function for a more in-depth example. <strong><a href=\"https:\/\/www.mrc-productivity.com\/docs\/knowledge-base\/how-to-use-ai-to-do-more-than-just-answer-questions#AI-Parameters\" target=\"_blank\" rel=\"noreferrer noopener\">More information regarding mapping parameters within the AI Assistant can be found here.<\/a><\/strong><\/p>\n\n\n\n<p>Imagine you have configured your AI Assistant, through prompts and parameters to return a JSON response. Specifically, imagine you have built an AI Assistant to help users add items to their cart. Once they find the item they want, you ask the AI Assistant to return a JSON response that can then be read in by Workflow to write to the database. After doing this, you may want to alert the user that their cart has been updated.<\/p>\n\n\n\n<p>First, I set up a variety of parameters within my AI Assistant:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"\/docs\/images\/ai_parm_list.png\" alt=\"\"\/><\/figure>\n\n\n\n<p>Notice I have created an action parameter. This is very important for me as my AI assistant is flexible enough to add items, update, or remove items from my cart. It is the &#8220;action&#8221; parameter that will house the value for what I am trying to accomplish.<\/p>\n\n\n\n<p>Next, I lay out within my prompt how I want my JSON response to look.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"\/docs\/images\/json_snippet.png\" alt=\"\"\/><\/figure>\n\n\n\n<p>Notice the action is listed as &#8220;add&#8221;<\/p>\n\n\n\n<p>Having detailed all the above, now it is time to add my JavaScript to my AI assistant.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script>\nfunction aiResponseCallback(response, message, data){\n    if (data.action == 'add'){\n      alert(\"Cart has been updated\")\n    }\n}\n&lt;\/script><\/code><\/pre>\n\n\n\n<p class=\"wp-block-ht-blocks-messages wp-block-hb-message wp-block-hb-message--withicon is-style-info\">Notice that while the aiResponseCallback function will still be called every time there is a response from the AI assistant, it won&#8217;t display the alert until the action parameter, within the data object, is being sent as &#8220;add&#8221;. <\/p>\n\n\n\n<p class=\"wp-block-ht-blocks-messages wp-block-hb-message wp-block-hb-message--withicon\">You can look for the value of any parameter returned from the AI Assistant. All you need to do is to declare the parameter within the app, set it within a JSON response within the system prompt, then check for it within the JavaScript<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This document covers how to utilize client side scripting (JavaScript) after a response from the AI Assistant. <\/p>\n","protected":false},"author":1,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":{"footnotes":""},"ht-kb-category":[313],"ht-kb-tag":[],"class_list":["post-14670","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-artificial-intelligence-ai"],"_links":{"self":[{"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb\/14670","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/comments?post=14670"}],"version-history":[{"count":7,"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb\/14670\/revisions"}],"predecessor-version":[{"id":14935,"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb\/14670\/revisions\/14935"}],"wp:attachment":[{"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/media?parent=14670"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb-category?post=14670"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb-tag?post=14670"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}