diff --git a/src/lib/helpers/constants.js b/src/lib/helpers/constants.js
index 1b21bac0..eabcaec6 100644
--- a/src/lib/helpers/constants.js
+++ b/src/lib/helpers/constants.js
@@ -37,10 +37,12 @@ export const FILE_EDITORS = [
     EditorType.File
 ];
 
-export const LEARNER_ID = "01acc3e5-0af7-49e6-ad7a-a760bd12dc40";
-export const EVALUATOR_ID = "2cd4b805-7078-4405-87e9-2ec9aadf8a11";
-export const TRAINING_MODE = "training";
+export const LEARNER_AGENT_ID = "01acc3e5-0af7-49e6-ad7a-a760bd12dc40";
+export const EVALUATOR_AGENT_ID = "2cd4b805-7078-4405-87e9-2ec9aadf8a11";
+export const AI_PROGRAMMER_AGENT_ID = "c2a2faf6-b8b5-47fe-807b-f4714cf25dd4";
+export const RULE_TRIGGER_CODE_GENERATE_TEMPLATE = "rule-trigger-code-generate_instruction";
 
+export const TRAINING_MODE = "training";
 export const DEFAULT_KNOWLEDGE_COLLECTION = "BotSharp";
 export const IMAGE_DATA_PREFIX = 'data:image';
 
diff --git a/src/lib/helpers/http.js b/src/lib/helpers/http.js
index 8e470866..d6a57302 100644
--- a/src/lib/helpers/http.js
+++ b/src/lib/helpers/http.js
@@ -75,7 +75,8 @@ function skipLoader(config) {
         new RegExp('http(s*)://(.*?)/knowledge/document/(.*?)/page', 'g'),
         new RegExp('http(s*)://(.*?)/users', 'g'),
         new RegExp('http(s*)://(.*?)/instruct/chat-completion', 'g'),
-        new RegExp('http(s*)://(.*?)/agent/(.*?)/code-scripts', 'g')
+        new RegExp('http(s*)://(.*?)/agent/(.*?)/code-scripts', 'g'),
+        new RegExp('http(s*)://(.*?)/agent/(.*?)/code-script/generate', 'g')
     ];
 
     /** @type {RegExp[]} */
diff --git a/src/lib/helpers/types/agentTypes.js b/src/lib/helpers/types/agentTypes.js
index d3fb5a06..05bacc39 100644
--- a/src/lib/helpers/types/agentTypes.js
+++ b/src/lib/helpers/types/agentTypes.js
@@ -135,6 +135,31 @@
  * @property {AgentCodeScriptUpdateOptions?} [options]
  */
 
+/** 
+ * @typedef {Object} AgentCodeScriptGenerateModel
+ * @property {string?} [text]
+ * @property {CodeProcessOptions?} [options]
+ */
+
+/** 
+ * @typedef {Object} CodeProcessOptions
+ * @property {boolean?} [save_to_db] - Whether to save the generated code to database.
+ * @property {string?} [script_name] - The code script name.
+ * @property {string?} [script_type] - The code script type.
+ * @property {string?} [agent_id] - The agent id.
+ * @property {string?} [template_name] - The template name.
+ * @property {any?} [data] - The template data.
+ * @property {string?} [provider] - The llm provider.
+ * @property {string?} [model] - The llm model.
+ */
+
+/** 
+ * @typedef {Object} CodeGenerationResult
+ * @property {boolean?} [success]
+ * @property {string?} [content]
+ * @property {string?} [language]
+ * @property {string?} [error_message]
+ */
 
 /**
  * @typedef {Object} ChannelInstruction
@@ -204,6 +229,8 @@
  * @property {string} criteria
  * @property {string?} [displayName]
  * @property {boolean} disabled
+ * @property {any?} [output_args]
+ * @property {string?} [json_args]
  */
 
 
diff --git a/src/lib/scss/custom/pages/_agent.scss b/src/lib/scss/custom/pages/_agent.scss
index c5396a2b..d0bc304a 100644
--- a/src/lib/scss/custom/pages/_agent.scss
+++ b/src/lib/scss/custom/pages/_agent.scss
@@ -58,7 +58,7 @@
             }
         }
     }
-    
+
     .list-add {
         font-size: 20px;
 
@@ -94,10 +94,10 @@
         @media (max-width: 423px) {
             height: fit-content;
         }
-    
+
         .agent-prompt-container {
             height: 100%;
-    
+
             .agent-prompt-header {
                 background-color: white;
                 padding: 15px;
@@ -167,7 +167,7 @@
             box-shadow: none !important;
         }
     }
-    
+
     .utility-wrapper {
         border: 1px dotted var(--bs-primary);
         border-radius: 5px;
@@ -262,12 +262,17 @@
     .tooltip-inner {
         text-align: start;
         max-width: fit-content;
-        padding: 20px;
+        padding: 5px 10px;
     }
 
     .markdown-div {
         max-height: 500px;
         font-size: 15px;
+
+        pre {
+            white-space: pre !important;
+            width: fit-content;
+        }
     }
 
     &.show {
@@ -286,4 +291,49 @@
         overflow-x: auto;
         scrollbar-width: thin;
     }
-}
\ No newline at end of file
+}
+
+// Responsive adjustments for utility
+@media (max-width: 768px) {
+  .agent-utility-container {
+    padding: 0 5px;
+
+    .utility-wrapper {
+      .utility-row-primary {
+        flex-direction: column;
+      }
+
+      .utility-row {
+        .utility-label,
+        .utility-value {
+          width: 100%;
+        }
+
+        .utility-value {
+          flex-direction: column;
+        }
+
+        .utility-input,
+        .utility-delete {
+          width: 100%;
+        }
+
+        .utility-delete {
+          display: flex;
+          justify-content: flex-end;
+          align-items: end;
+          margin-top: 6px;
+        }
+      }
+
+      .utility-row-secondary {
+        .utility-content {
+          .utility-list-item {
+            flex-direction: column;
+            gap: 6px;
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/src/lib/services/agent-service.js b/src/lib/services/agent-service.js
index d4d87e7b..4b6d0995 100644
--- a/src/lib/services/agent-service.js
+++ b/src/lib/services/agent-service.js
@@ -156,4 +156,18 @@ export async function updateAgentCodeScripts(agentId, update) {
         ...update
     });
     return response.data;
+}
+
+/**
+ * Generate agent code script
+ * @param {string} agentId
+ * @param {import('$agentTypes').AgentCodeScriptGenerateModel} request
+ * @returns {Promise<import('$agentTypes').CodeGenerationResult>}
+ */
+export async function generateAgentCodeScript(agentId, request) {
+    const url = endpoints.agentCodeScriptGenerateUrl.replace("{agentId}", agentId);
+    const response = await axios.post(url, {
+        ...request
+    });
+    return response.data;
 }
\ No newline at end of file
diff --git a/src/lib/services/api-endpoints.js b/src/lib/services/api-endpoints.js
index 1ee3cc59..17b81a9b 100644
--- a/src/lib/services/api-endpoints.js
+++ b/src/lib/services/api-endpoints.js
@@ -41,6 +41,7 @@ export const endpoints = {
     // agent code script:
     agentCodeScriptListUrl: `${host}/agent/{agentId}/code-scripts`,
     agentCodeScriptUpdateUrl: `${host}/agent/{agentId}/code-scripts`,
+    agentCodeScriptGenerateUrl: `${host}/agent/{agentId}/code-script/generate`,
     
     // agent task
     agentTaskListUrl: `${host}/agent/tasks`,
diff --git a/src/routes/chat/[agentId]/+page.svelte b/src/routes/chat/[agentId]/+page.svelte
index b6b11eed..857aefdf 100644
--- a/src/routes/chat/[agentId]/+page.svelte
+++ b/src/routes/chat/[agentId]/+page.svelte
@@ -1,14 +1,13 @@
 <script>
-    import { Container, Row, Col } from '@sveltestrap/sveltestrap';
-
     // This page is used to initialize a new conversation for client
+    import { Container, Row, Col } from '@sveltestrap/sveltestrap';
     import { page } from '$app/stores';
     import { onMount } from 'svelte';
     import { newConversation } from '$lib/services/conversation-service.js';
     import { getToken, setToken } from '$lib/services/auth-service.js'
     import { getUserStore } from '$lib/helpers/store.js';
     import { conversationStore } from '$lib/helpers/store.js';
-	import { LEARNER_ID, TRAINING_MODE } from '$lib/helpers/constants';
+	import { LEARNER_AGENT_ID, TRAINING_MODE } from '$lib/helpers/constants';
 
     const params = $page.params;
     
@@ -43,7 +42,7 @@
         const chatUrl = new URL(`chat/${agentId}/${conversationId}`, window.location.origin);
         
         const searchParams = new URLSearchParams();
-        if (agentId === LEARNER_ID) {
+        if (agentId === LEARNER_AGENT_ID) {
             searchParams.append('mode', TRAINING_MODE);
         }
 
diff --git a/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte b/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
index 1df045fb..af4db082 100644
--- a/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
+++ b/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
@@ -44,7 +44,7 @@
 		PUBLIC_LIVECHAT_STREAM_ENABLED,
 		PUBLIC_DEBUG_MODE
 	} from '$env/static/public';
-	import { BOT_SENDERS, LEARNER_ID, TRAINING_MODE, ADMIN_ROLES, IMAGE_DATA_PREFIX } from '$lib/helpers/constants';
+	import { BOT_SENDERS, LEARNER_AGENT_ID, TRAINING_MODE, ADMIN_ROLES, IMAGE_DATA_PREFIX } from '$lib/helpers/constants';
 	import { signalr } from '$lib/services/signalr-service.js';
 	import { newConversation } from '$lib/services/conversation-service';
 	import DialogModal from '$lib/common/DialogModal.svelte';
@@ -1724,7 +1724,7 @@
 														Add Tags
 													</DropdownItem>
 												{/if}
-												{#if agent?.id === LEARNER_ID && mode === TRAINING_MODE}
+												{#if agent?.id === LEARNER_AGENT_ID && mode === TRAINING_MODE}
 													<DropdownItem on:click={() => handleSaveKnowledge()}>Save Knowledge</DropdownItem>
 												{/if}											
 												<DropdownItem on:click={() => pinDashboard()}>
diff --git a/src/routes/page/agent/[agentId]/+page.svelte b/src/routes/page/agent/[agentId]/+page.svelte
index ebb5fd10..7b1e4d3f 100644
--- a/src/routes/page/agent/[agentId]/+page.svelte
+++ b/src/routes/page/agent/[agentId]/+page.svelte
@@ -1,26 +1,23 @@
 <script>
-	import {
-		Col,
-		Row,
-        Button
-	} from '@sveltestrap/sveltestrap';
+    import { onDestroy, onMount } from 'svelte';
+    import { page } from '$app/stores';
+    import { goto } from '$app/navigation';
+    import { _ } from 'svelte-i18n'; 
+    import Swal from 'sweetalert2';
+	import { Col, Row, Button } from '@sveltestrap/sveltestrap';
 	import Breadcrumb from '$lib/common/Breadcrumb.svelte';
 	import HeadTitle from '$lib/common/HeadTitle.svelte';
     import LoadingToComplete from '$lib/common/LoadingToComplete.svelte';
-	import AgentInstruction from './agent-components/agent-instruction.svelte';
-	import AgentOverview from './agent-components/agent-overview.svelte';
-    import AgentFunction from './agent-components/agent-function.svelte';
-    import AgentTabs from './agent-tabs.svelte';
-    import { page } from '$app/stores';
     import { deleteAgent, getAgent, saveAgent } from '$lib/services/agent-service.js';
-    import { onDestroy, onMount } from 'svelte';
-    import { _ } from 'svelte-i18n'  
-    import Swal from 'sweetalert2'
-	import { goto } from '$app/navigation';
 	import { AgentExtensions } from '$lib/helpers/utils/agent';
-	import AgentTemplate from './agent-components/agent-template.svelte';
 	import { globalEventStore } from '$lib/helpers/store';
 	import { GlobalEvent } from '$lib/helpers/enums';
+	import { myInfo } from '$lib/services/auth-service';
+    import AgentInstruction from './agent-components/agent-instruction.svelte';
+	import AgentOverview from './agent-components/agent-overview.svelte';
+    import AgentFunction from './agent-components/agent-function.svelte';
+    import AgentTabs from './agent-tabs.svelte';
+    import AgentTemplate from './agent-components/agent-template.svelte';
 
     /** @type {import('$agentTypes').AgentModel} */
     let agent;
@@ -34,6 +31,8 @@
     let agentTabsCmp = null;
     /** @type {any} */
 	let unsubscriber;
+    /** @type {import('$userTypes').UserModel} */
+	let user;
 
     /** @type {boolean} */
     let isLoading = false;
@@ -42,13 +41,11 @@
     const duration = 3000;
     const params = $page.params;
 
-    onMount(() => {
+    onMount(async () => {
         isLoading = true;
-        getAgent(params.agentId).then(data => {
-            agent = data;
-        }).finally(() => {
-            isLoading = false;
-        });
+        user = await myInfo();
+        agent = await getAgent(params.agentId);
+        isLoading = false;
 
         unsubscriber = globalEventStore.subscribe((/** @type {import('$commonTypes').GlobalEvent} */ event) => {
 			if (event.name !== GlobalEvent.Search) return;
@@ -203,6 +200,7 @@
                 <AgentTabs
                     bind:this={agentTabsCmp}
                     agent={agent}
+                    user={user}
                 />
             </div>
         </Col>
diff --git a/src/routes/page/agent/[agentId]/agent-components/agent-rule.svelte b/src/routes/page/agent/[agentId]/agent-components/agent-rule.svelte
index 3f6d3b92..262a435f 100644
--- a/src/routes/page/agent/[agentId]/agent-components/agent-rule.svelte
+++ b/src/routes/page/agent/[agentId]/agent-components/agent-rule.svelte
@@ -1,14 +1,38 @@
 <script>
     import { onMount } from 'svelte';
+    import Swal from 'sweetalert2';
     import { Card, CardBody, Input, Button } from '@sveltestrap/sveltestrap';
-	import { getAgentRuleOptions } from '$lib/services/agent-service';
+	import { getAgentRuleOptions, generateAgentCodeScript } from '$lib/services/agent-service';
+	import Markdown from '$lib/common/markdown/Markdown.svelte';
+	import BotsharpTooltip from '$lib/common/tooltip/BotsharpTooltip.svelte';
+	import LoadingToComplete from '$lib/common/LoadingToComplete.svelte';
+    import { ADMIN_ROLES, AI_PROGRAMMER_AGENT_ID, RULE_TRIGGER_CODE_GENERATE_TEMPLATE } from '$lib/helpers/constants';
+	import { AgentCodeScriptType } from '$lib/helpers/enums';
 
     const limit = 100;
-    const textLimit = 200;
+    const textLimit = 1024;
+    
+    /** @type {boolean} */
+    let isLoading = false;
+    /** @type {boolean} */
+    let isComplete = false;
+    /** @type {boolean} */
+    let isError = false;
+    /** @type {number} */
+    let duration = 2000;
+    let windowWidth = 0;
+    let windowHeight = 0;
+
+    /** @type {string} */
+    let successText = '';
+    let errorText = '';
 
     /** @type {import('$agentTypes').AgentModel} */
     export let agent;
 
+    /** @type {import('$userTypes').UserModel} */
+    export let user;
+
     /** @type {() => void} */
     export let handleAgentChange = () => {};
 
@@ -45,26 +69,29 @@
     let scrollContainer;
 
     onMount(async () =>{
+        resizeWindow();
         getAgentRuleOptions().then(data => {
             const list = data?.map(x => {
                 return {
                     name: x.trigger_name,
-                    displayName: ""
+                    displayName: "",
+                    output_args: x.output_args,
+                    json_args: x.json_args
                 };
             }) || [];
             ruleOptions = [{
                 name: "",
                 displayName: ""
             }, ...list];
+            init();
         });
-        init();
     });
 
     function init() {
         const list = agent.rules?.map(x => {
             return {
                 ...x,
-                displayName: "",
+                displayName: ""
             };
         }) || [];
         innerRefresh(list);
@@ -134,15 +161,84 @@
         handleAgentChange();
     }
 
+    /**
+	 * @param {import("$agentTypes").AgentRule} rule
+	 */
+    function compileCodeScript(rule) {
+        Swal.fire({
+            title: 'Are you sure?',
+            html: `
+                <div>
+                    <p>Are you sure you want to generate code script <b>"${rule.trigger_name}_rule.py"</b>?</p>
+                    <p>This action will overwrite existing code script if any.</p>
+                </div>
+            `,
+            icon: 'warning',
+            showCancelButton: true,
+			cancelButtonText: 'No',
+            confirmButtonText: 'Yes'
+        }).then(async (result) => {
+            if (result.value) {
+                generateCodeScript(rule);
+            }
+        });
+    }
+
+    /**
+	 * @param {import("$agentTypes").AgentRule} rule
+	 */
+    function generateCodeScript(rule) {
+        return new Promise((resolve, reject) => {
+            isLoading = true;
+            generateAgentCodeScript(agent.id, {
+                text: '',
+                options: {
+                    agent_id: AI_PROGRAMMER_AGENT_ID,
+                    template_name: RULE_TRIGGER_CODE_GENERATE_TEMPLATE,
+                    save_to_db: true,
+                    script_name: `${rule.trigger_name}_rule.py`,
+                    script_type: AgentCodeScriptType.Src,
+                    data: {
+                        'args_example': { ...rule.output_args },
+                        'user_request': rule.criteria
+                    }
+                }
+            }).then(res => {
+                if (res?.success) {
+                    isLoading = false;
+                    isComplete = true;
+                    successText = "Code script has been generated!";
+                    setTimeout(() => {
+                        isComplete = false;
+                        successText = "";
+                    }, duration);
+                    resolve(res);
+                }  else {
+                    throw "error when generating code script.";
+                }
+            }).catch(() => {
+                isLoading = false;
+                isComplete = false;
+                isError = true;
+                errorText = "Failed to generate code script.";
+                setTimeout(() => {
+                    isError = false;
+                    errorText = "";
+                }, duration);
+                reject();
+            });
+        });
+    }
+
 
     /** @param {import('$agentTypes').AgentRule[]} list */
     function innerRefresh(list) {
         innerRules = list?.map(x => {
+            const found = ruleOptions.find(y => y.name === x.trigger_name);
             return {
-                trigger_name: x.trigger_name,
-                criteria: x.criteria,
-                displayName: x.displayName,
-                disabled: x.disabled
+                ...x,
+                output_args: found?.output_args,
+                json_args: found?.json_args
             }
         }) || [];
     }
@@ -157,8 +253,17 @@
             }, 0);
         }
     }
+
+    function resizeWindow() {
+        windowWidth = window.innerWidth;
+        windowHeight = window.innerHeight;
+    }
 </script>
 
+<svelte:window on:resize={() => resizeWindow()}/>
+
+<LoadingToComplete {isLoading} {isComplete} {isError} {successText} {errorText} />
+
 <Card>
     <CardBody>
         <div class="text-center">
@@ -220,19 +325,69 @@
                         <div class="utility-content">
                             <div class="utility-list-item">
                                 <div class="utility-label line-align-center">
-                                    {'Criteria'}
+                                    <div class="d-flex gap-1">
+                                        <div class="line-align-center">
+                                            {'Criteria'}
+                                        </div>
+                                        {#if ADMIN_ROLES.includes(user?.role || '') && !!rule.trigger_name && !!rule.criteria?.trim()}
+                                        <div
+                                            class="line-align-center clickable text-primary fs-5"
+                                            data-bs-toggle="tooltip"
+                                            data-bs-placement="top"
+                                            title="Compile code script"
+                                        >
+                                            <i
+                                                class="mdi mdi-code-braces-box"
+                                                role="link"
+                                                tabindex="0"
+                                                on:keydown={() => {}}
+                                                on:click={() => compileCodeScript(rule)}
+                                            />
+                                        </div>
+                                        {/if}
+                                    </div>
                                 </div>
                                 <div class="utility-value">
                                     <div class="utility-input line-align-center">
                                         <Input
-                                            type="text"
+                                            type="textarea"
+                                            style="resize: none;"
+                                            rows={5}
                                             disabled={rule.disabled}
                                             maxlength={textLimit}
                                             value={rule.criteria}
                                             on:input={e => changeContent(e, uid, 'criteria')}
                                         />
                                     </div>
-                                    <div class="utility-delete line-align-center"></div>
+                                    <div class="utility-delete line-align-center">
+                                        {#if rule.json_args}
+                                            <div class="line-align-center">
+                                                <i
+                                                    class="bx bx-info-circle"
+                                                    style="font-size: 15px;"
+                                                    id={`rule-${uid}`}
+                                                    data-bs-toggle="tooltip"
+                                                    data-bs-placement="top"
+                                                    title="Rule arguments"
+                                                />
+                                                <BotsharpTooltip
+                                                    containerClasses="agent-utility-desc"
+                                                    style={`min-width: ${Math.floor(windowWidth*0.3)}px;`}
+                                                    target={`rule-${uid}`}
+                                                    placement="right"
+                                                    persist
+                                                >
+                                                    <Markdown
+                                                        rawText
+                                                        scrollable
+                                                        containerClasses={'markdown-div'}
+                                                        containerStyles={`max-width: ${Math.floor(windowWidth*0.3)}px;`}
+                                                        text={rule.json_args}
+                                                    />
+                                                </BotsharpTooltip>
+                                            </div>
+                                        {/if}
+                                    </div>
                                 </div>
                             </div>
                         </div>
diff --git a/src/routes/page/agent/[agentId]/agent-components/agent-utility.svelte b/src/routes/page/agent/[agentId]/agent-components/agent-utility.svelte
index 06230fea..86ec4439 100644
--- a/src/routes/page/agent/[agentId]/agent-components/agent-utility.svelte
+++ b/src/routes/page/agent/[agentId]/agent-components/agent-utility.svelte
@@ -4,7 +4,7 @@
     import { getAgentUtilityOptions } from '$lib/services/agent-service';
 	import { truncateByPrefix } from '$lib/helpers/utils/common';
 	import Markdown from '$lib/common/markdown/Markdown.svelte';
-	import BotSharpTooltip from '$lib/common/tooltip/BotSharpTooltip.svelte';
+	import BotsharpTooltip from '$lib/common/tooltip/BotsharpTooltip.svelte';
 
     const limit = 100;
     const prefix = "util-";
@@ -446,7 +446,7 @@
                                                     style="font-size: 15px;"
                                                     id={`utility-${uid}-${fid}`}
                                                 />
-                                                <BotSharpTooltip
+                                                <BotsharpTooltip
                                                     containerClasses="agent-utility-desc"
                                                     style={`min-width: ${Math.floor(windowWidth*0.3)}px;`}
                                                     target={`utility-${uid}-${fid}`}
@@ -460,7 +460,7 @@
                                                         containerStyles={`max-width: ${Math.floor(windowWidth*0.55)}px;`}
                                                         text={description}
                                                     />
-                                                </BotSharpTooltip>
+                                                </BotsharpTooltip>
                                             </div>
                                             {/if}
                                         </div>
diff --git a/src/routes/page/agent/[agentId]/agent-tabs.svelte b/src/routes/page/agent/[agentId]/agent-tabs.svelte
index ac799eb9..a585c546 100644
--- a/src/routes/page/agent/[agentId]/agent-tabs.svelte
+++ b/src/routes/page/agent/[agentId]/agent-tabs.svelte
@@ -13,6 +13,9 @@
     /** @type {import('$agentTypes').AgentModel} */
     export let agent;
 
+    /** @type {import('$userTypes').UserModel} */
+	export let user;
+
     /** @type {() => void} */
     export let handleAgentChange = () => {};
 
@@ -47,7 +50,7 @@
     let selectedTab;
 
     /** @type {any[]}*/
-    let tabs = [
+    const tabs = [
         { name: 'agent-llm-config', displayText: 'LLm Configs' },
         { name: 'agent-routing-rule', displayText: 'Routing' },
         { name: 'agent-utility', displayText: 'Utilities' },
@@ -99,7 +102,7 @@
             <AgentKnowledgeBase agent={agent} bind:this={agentKnowledgeBaseCmp} {handleAgentChange} />
         </div>
         <div class:hide={selectedTab !== 'agent-event-rule'}>
-            <AgentEventRule agent={agent} bind:this={agentEventRuleCmp} {handleAgentChange} />
+            <AgentEventRule agent={agent} user={user} bind:this={agentEventRuleCmp} {handleAgentChange} />
         </div>
         <div class:hide={selectedTab !== 'agent-mcp-tool'}>
             <AgentMcpTool agent={agent} bind:this={agentMcpToolCmp} {handleAgentChange} />
diff --git a/src/routes/page/agent/card-agent.svelte b/src/routes/page/agent/card-agent.svelte
index a4b3bd17..9a0bcd77 100644
--- a/src/routes/page/agent/card-agent.svelte
+++ b/src/routes/page/agent/card-agent.svelte
@@ -3,7 +3,7 @@
   import { Badge, Card, CardBody, Col } from '@sveltestrap/sveltestrap';
   import { utcToLocal } from '$lib/helpers/datetime';
   import { _ } from 'svelte-i18n';
-	import { LEARNER_ID } from "$lib/helpers/constants";
+	import { LEARNER_AGENT_ID } from "$lib/helpers/constants";
 	import { AgentExtensions } from "$lib/helpers/utils/agent";
 
   /** @type {import('$agentTypes').AgentModel[]} */
@@ -108,7 +108,7 @@
           </li>
           {#if agent.is_public }      
           <li class="list-inline-item me-1 mt-1 mb-1">
-            <Link href={`/chat/${LEARNER_ID}`} class="btn btn-primary btn-sm" target="_blank" disabled>
+            <Link href={`/chat/${LEARNER_AGENT_ID}`} class="btn btn-primary btn-sm" target="_blank" disabled>
               <i class="bx bx-book-open" /> {$_('Train')}
             </Link>
           </li>