From 6a57878ff47ce104db51330763e231fc29a56fd8 Mon Sep 17 00:00:00 2001
From: Jicheng Lu <103353@smsassist.com>
Date: Tue, 1 Apr 2025 14:36:38 -0500
Subject: [PATCH 1/2] add mcp tool config

---
 src/lib/helpers/http.js                       |   3 +-
 src/lib/helpers/types/agentTypes.js           |  19 +-
 src/lib/helpers/types/commonTypes.js          |   6 +
 src/lib/helpers/types/mcpTypes.js             |   8 +
 src/lib/services/api-endpoints.js             |   4 +-
 src/lib/services/mcp-service.js               |  12 +
 src/routes/page/agent/[agentId]/+page.svelte  |   4 +-
 .../agent-components/agent-instruction.svelte |   9 +-
 .../agent-knowledge-base.svelte               |   6 +-
 .../agent-components/agent-mcp-tool.svelte    | 350 ++++++++++++++++++
 .../agent-components/agent-overview.svelte    |  12 +-
 .../agent-components/agent-rule.svelte        |   6 +-
 .../agent-components/agent-template.svelte    |   9 +-
 .../agent-components/agent-utility.svelte     |  31 +-
 .../page/agent/[agentId]/agent-tabs.svelte    |  20 +-
 svelte.config.js                              |   3 +-
 16 files changed, 458 insertions(+), 44 deletions(-)
 create mode 100644 src/lib/helpers/types/mcpTypes.js
 create mode 100644 src/lib/services/mcp-service.js
 create mode 100644 src/routes/page/agent/[agentId]/agent-components/agent-mcp-tool.svelte

diff --git a/src/lib/helpers/http.js b/src/lib/helpers/http.js
index 0a6c09a0..772494bc 100644
--- a/src/lib/helpers/http.js
+++ b/src/lib/helpers/http.js
@@ -110,7 +110,8 @@ function skipLoader(config) {
         new RegExp('http(s*)://(.*?)/conversation/state/keys', 'g'),
         new RegExp('http(s*)://(.*?)/logger/instruction/log/keys', 'g'),
         new RegExp('http(s*)://(.*?)/logger/conversation/(.*?)/content-log', 'g'),
-        new RegExp('http(s*)://(.*?)/logger/conversation/(.*?)/state-log', 'g')
+        new RegExp('http(s*)://(.*?)/logger/conversation/(.*?)/state-log', 'g'),
+        new RegExp('http(s*)://(.*?)/mcp/server-configs', 'g')
     ];
 
     if (config.method === 'post' && postRegexes.some(regex => regex.test(config.url || ''))) {
diff --git a/src/lib/helpers/types/agentTypes.js b/src/lib/helpers/types/agentTypes.js
index 34b06f1f..161ec9b4 100644
--- a/src/lib/helpers/types/agentTypes.js
+++ b/src/lib/helpers/types/agentTypes.js
@@ -57,6 +57,7 @@
  * @property {boolean} merge_utility - Merge utility
  * @property {number?} [max_message_count]
  * @property {AgentUtility[]} utilities - The agent utilities.
+ * @property {any[]} mcp_tools - The agent mcp tools
  * @property {AgentKnowledgeBase[]} knowledge_bases - The agent knowledge bases.
  * @property {Date} created_datetime
  * @property {Date} updated_datetime
@@ -131,8 +132,16 @@
  * @typedef {Object} AgentUtility
  * @property {string} name 
  * @property {boolean} disabled 
- * @property {UtilityBase[]} functions
- * @property {UtilityBase[]} templates
+ * @property {import('$commonTypes').NameBase[]} functions
+ * @property {import('$commonTypes').NameBase[]} templates
+ */
+
+/**
+ * @typedef {Object} AgentMcpTool
+ * @property {string} name
+ * @property {string} server_id 
+ * @property {boolean} disabled 
+ * @property {import('$commonTypes').NameBase[]} functions
  */
 
 /**
@@ -152,12 +161,6 @@
  * @property {boolean} disabled
  */
 
-/**
- * @typedef {Object} UtilityBase
- * @property {string} name
- * @property {string?} [displayName]
- */
-
 
 /**
  * @typedef {Object} AgentTaskSearchOption
diff --git a/src/lib/helpers/types/commonTypes.js b/src/lib/helpers/types/commonTypes.js
index e4125825..de0db5a0 100644
--- a/src/lib/helpers/types/commonTypes.js
+++ b/src/lib/helpers/types/commonTypes.js
@@ -58,4 +58,10 @@
  * @property {any} payload
  */
 
+/**
+ * @typedef {Object} NameBase
+ * @property {string} name
+ * @property {string?} [displayName]
+ */
+
 export default {};
\ No newline at end of file
diff --git a/src/lib/helpers/types/mcpTypes.js b/src/lib/helpers/types/mcpTypes.js
new file mode 100644
index 00000000..58a16afe
--- /dev/null
+++ b/src/lib/helpers/types/mcpTypes.js
@@ -0,0 +1,8 @@
+/**
+ * @typedef {Object} McpServerConfigModel
+ * @property {string} id - The server id.
+ * @property {string} name - The server name.
+ * @property {string} transportType - The transport type.
+ */
+
+export default {};
\ No newline at end of file
diff --git a/src/lib/services/api-endpoints.js b/src/lib/services/api-endpoints.js
index 170df44e..1028d860 100644
--- a/src/lib/services/api-endpoints.js
+++ b/src/lib/services/api-endpoints.js
@@ -112,6 +112,8 @@ export const endpoints = {
     dashConversationInstructionUrl: `${host}/dashboard/component/conversation`,
 
     // Google geocode api
-    addressUrl: `${host}/address/options`
+    addressUrl: `${host}/address/options`,
+
+    mcpServerConfigsUrl: `${host}/mcp/server-configs`
 }
 
diff --git a/src/lib/services/mcp-service.js b/src/lib/services/mcp-service.js
new file mode 100644
index 00000000..449c342d
--- /dev/null
+++ b/src/lib/services/mcp-service.js
@@ -0,0 +1,12 @@
+import { endpoints } from '$lib/services/api-endpoints.js';
+import axios from 'axios';
+
+/**
+ * Get mcp server configs
+ * @returns {Promise<import('$mcpTypes').McpServerConfigModel[]>}
+ */
+export async function getServerConfigs() {
+    const url = endpoints.mcpServerConfigsUrl;
+    const response = await axios.get(url);
+    return response.data;
+}
\ No newline at end of file
diff --git a/src/routes/page/agent/[agentId]/+page.svelte b/src/routes/page/agent/[agentId]/+page.svelte
index 0d51b1db..ddbf636c 100644
--- a/src/routes/page/agent/[agentId]/+page.svelte
+++ b/src/routes/page/agent/[agentId]/+page.svelte
@@ -187,7 +187,8 @@
         return data ? {
             utilities: data.utilities || [],
             knowledge_bases: data.knwoledgebases || [],
-            rules: data.rules || []
+            rules: data.rules || [],
+            mcp_tools: data.mcpTools || []
         } : null;
     }
 
@@ -198,6 +199,7 @@
             agent.utilities = data.utilities || [];
             agent.knowledge_bases = data.knwoledgebases || [];
             agent.rules = data.rules || [];
+            agent.mcp_tools = data.mcpTools || [];
         }
     }
 
diff --git a/src/routes/page/agent/[agentId]/agent-components/agent-instruction.svelte b/src/routes/page/agent/[agentId]/agent-components/agent-instruction.svelte
index 1530513b..ca35a3ad 100644
--- a/src/routes/page/agent/[agentId]/agent-components/agent-instruction.svelte
+++ b/src/routes/page/agent/[agentId]/agent-components/agent-instruction.svelte
@@ -94,6 +94,7 @@
         e.preventDefault();
         const value = e.target.value;
         selected_instruction.instruction = value || '';
+        handleAgentChange();
     }
 
     function addChannel() {
@@ -107,6 +108,7 @@
         ];
 
         selected_instruction = inner_instructions[inner_instructions.length-1];
+        handleAgentChange();
     }
 
     /** @param {string | undefined} uid */
@@ -115,6 +117,7 @@
         if (selected_instruction.uid === uid) {
             selected_instruction = inner_instructions[0];
         }
+        handleAgentChange();
     }
 </script>
 
@@ -161,7 +164,7 @@
                     data-bs-placement="top"
                     title="Add channel instruction"
                     style="font-size: 16px;"
-                    on:click={() => { addChannel(); handleAgentChange(); }}
+                    on:click={() => addChannel()}
                 >
                     <i class="mdi mdi-plus-circle-outline" />
                 </div>
@@ -187,7 +190,7 @@
                     maxEditLength={20}
                     editPlaceholder={'Type a channel here...'}
                     onClick={() => selectChannel(inst.uid)}
-                    onDelete={() => { deleteChannel(inst.uid); handleAgentChange(); }}
+                    onDelete={() => deleteChannel(inst.uid)}
                     onInput={handleAgentChange}
                 />
                 {/each}
@@ -199,7 +202,7 @@
                 style="scrollbar-width: thin; resize: none;"
                 value={selected_instruction.instruction}
                 rows={20}
-                on:input={(e) => { changePrompt(e); handleAgentChange(); }}
+                on:input={(e) => changePrompt(e)}
                 placeholder="Enter your instruction"
             />
         </FormGroup>
diff --git a/src/routes/page/agent/[agentId]/agent-components/agent-knowledge-base.svelte b/src/routes/page/agent/[agentId]/agent-components/agent-knowledge-base.svelte
index 553c3911..98a5c154 100644
--- a/src/routes/page/agent/[agentId]/agent-components/agent-knowledge-base.svelte
+++ b/src/routes/page/agent/[agentId]/agent-components/agent-knowledge-base.svelte
@@ -96,8 +96,8 @@
         const vals = e.target.value.split("#");
         found.name = vals[0];
         found.type = vals[1];
-        handleAgentChange();
         innerRefresh(innerKnowledgeBases);
+        handleAgentChange();
     }
 
     /**
@@ -111,8 +111,8 @@
         const value = e.target.value;
 		const confidence = validateConfidenceNumber(value);
         found.confidence = confidence;
-        handleAgentChange();
         innerRefresh(innerKnowledgeBases);
+        handleAgentChange();
     }
 
     /** @param {any} e */
@@ -166,8 +166,8 @@
         if (!found) return;
 
         found.disabled = !e.target.checked;
-        handleAgentChange();
         innerRefresh(innerKnowledgeBases);
+        handleAgentChange();
     }
 
 
diff --git a/src/routes/page/agent/[agentId]/agent-components/agent-mcp-tool.svelte b/src/routes/page/agent/[agentId]/agent-components/agent-mcp-tool.svelte
new file mode 100644
index 00000000..61793de4
--- /dev/null
+++ b/src/routes/page/agent/[agentId]/agent-components/agent-mcp-tool.svelte
@@ -0,0 +1,350 @@
+<script>
+    import { onMount } from 'svelte';
+    import { Card, CardBody, Input, Button } from '@sveltestrap/sveltestrap';
+	import { getServerConfigs } from '$lib/services/mcp-service';
+    
+    const limit = 10;
+    const textLimit = 100;
+
+    /** @type {import('$agentTypes').AgentModel} */
+    export let agent;
+
+    /** @type {() => void} */
+    export let handleAgentChange = () => {};
+
+    export const fetchMcpTools = () => {
+        const candidates = innerTools?.filter(x => !!x.name)?.map(x => {
+            /** @type {import('$commonTypes').NameBase[]} */
+            const functions = [];
+
+            const uniqueFns = new Set();
+            const fns = x.functions.filter(f => !!f.name);
+
+            fns.forEach(f => {
+                if (!uniqueFns.has(f.name)) {
+                    functions.push({ ...f });
+                    uniqueFns.add(f.name);
+                }
+            });
+
+           return {
+                ...x,
+                name: x.name,
+                disabled: x.disabled,
+                functions: functions,
+           };
+        });
+
+        /** @type {import('$agentTypes').AgentMcpTool[]} */
+        const tools = [];
+        const unique = new Set();
+        candidates.forEach(x => {
+            if (!unique.has(x.name)) {
+                tools.push(x);
+                unique.add(x.name);
+            }
+        });
+
+        innerRefresh(tools);
+        return tools;
+    }
+
+    export const fetchOriginalMcpTools = () => {
+        return innerTools;
+    }
+
+    export const refresh = () => init();
+
+    /** @type {any[]} */
+    let toolOptions = [];
+
+    /** @type {import('$agentTypes').AgentMcpTool[]} */
+    let innerTools = [];
+
+
+    onMount(async () => {
+        getServerConfigs().then(res => {
+            const list = res?.map(x => {
+                return {
+                    id: x.id,
+                    name: x.name
+                };
+            }) || [];
+            toolOptions = [
+                {
+                    id: '',
+                    name: ''
+                },
+                ...list
+            ];
+        }).catch(() => {
+            toolOptions = [];
+        });
+        init();
+    });
+
+    function init() {
+        const list = agent.mcp_tools?.map(x => {
+            return {
+                ...x,
+                displayName: ""
+            };
+        }) || [];
+        innerRefresh(list);
+    }
+
+    /** @param {import('$agentTypes').AgentMcpTool[]} list */
+    function innerRefresh(list) {
+        innerTools = list?.map(x => {
+            return {
+                name: x.name,
+                server_id: x.server_id,
+                disabled: x.disabled,
+                functions: x.functions?.map(x => ({ ...x })) || []
+            }
+        }) || [];
+    }
+
+    /**
+	 * @param {any} e
+	 * @param {number} idx
+	 */
+     function changeTool(e, idx) {
+        const found = innerTools.find((_, index) => index === idx);
+        if (!found) return;
+        
+        const val = e.target.value;
+        const name = toolOptions.find(x => x.id == val)?.name || '';
+
+        found.name = name;
+        found.server_id = val;
+        innerRefresh(innerTools);
+        handleAgentChange();
+    }
+
+    function addTool() {
+        innerTools = [
+            ...innerTools,
+            {
+                name: '',
+                server_id: '',
+                disabled: false,
+                functions: []
+            }
+        ];
+        handleAgentChange();
+    }
+
+    /** @param {number} idx */
+    function deleteTool(idx) {
+        innerTools = innerTools.filter((_, index) => index !== idx);
+        handleAgentChange();
+    }
+
+    /**
+     * @param {any} e
+	 * @param {number} uid
+	 */
+    function toggleTool(e, uid) {
+        const found = innerTools.find((_, index) => index === uid);
+        if (!found) return;
+
+        found.disabled = !e.target.checked;
+        innerRefresh(innerTools);
+        handleAgentChange();
+    }
+
+    /**
+     * @param {any} e
+	 * @param {number} tid
+     * @param {number} id
+     * @param {string} type
+	 */
+    function changeContent(e, tid, id, type) {
+        const found = innerTools.find((_, index) => index === tid);
+        if (!found) return;
+
+        const val = e.target.value;
+        if (type === 'function') {
+            const fn = found.functions.find((_, index) => index == id);
+            if (fn) {
+                fn.name = val;
+            }
+        }
+
+        innerRefresh(innerTools);
+        handleAgentChange();
+    }
+
+    /**
+	 * @param {number} id
+	 * @param {string} type
+	 */
+     function addToolContent(id, type) {
+        const found = innerTools.find((_, index) => index === id);
+        if (!found || found.disabled) return;
+
+        if (type === 'function') {
+            found.functions.push({ name: '' });
+        }
+
+        innerRefresh(innerTools);
+        handleAgentChange();
+    }
+
+    /**
+	 * @param {number} uid
+	 * @param {number} id
+     * @param {string} type
+	 */
+     function deleteToolContent(uid, id, type) {
+        const found = innerTools.find((_, index) => index === uid);
+        if (!found || found.disabled) return;
+
+        if (type === 'function') {
+            const fns = found.functions?.filter((_, index) => index !== id) || [];
+            found.functions = fns;
+        }
+        
+        innerRefresh(innerTools);
+        handleAgentChange();
+    }
+</script>
+
+<Card>
+    <CardBody>
+        <div class="text-center">
+            <h5 class="mt-1 mb-3">MCP Tools</h5>
+        </div>
+
+        <div class="agent-utility-container">
+            {#each innerTools as tool, uid (uid)}
+                <div class="utility-wrapper">
+                    <div class="utility-row utility-row-primary">
+                        <div class="utility-label fw-bold">
+                            <div class="line-align-center">{`Tool #${uid + 1}`}</div>
+                            <div class="utility-tooltip">
+                                <div class="line-align-center">
+                                    <Input
+                                        type="checkbox"
+                                        checked={!tool.disabled}
+                                        on:change={e => toggleTool(e, uid)}
+                                    />
+                                </div>
+                                <div
+                                    class="line-align-center"
+                                    data-bs-toggle="tooltip"
+                                    data-bs-placement="top"
+                                    title="Uncheck to disable tool"
+                                >
+                                    <i class="bx bx-info-circle" />
+                                </div>
+                            </div>
+                        </div>
+                        <div class="utility-value">
+                            <div class="utility-input line-align-center">
+                                <Input
+                                    type="select"
+                                    disabled={tool.disabled}
+                                    on:change={e => changeTool(e, uid)}
+                                >
+                                    {#each [...toolOptions] as option}
+                                        <option value={option.id} selected={option.id == tool.server_id}>
+                                            {option.displayName || option.name}
+                                        </option>
+                                    {/each}
+                                </Input>
+                            </div>
+                            <div class="utility-delete line-align-center">
+                                <i
+                                    class="bx bxs-no-entry text-danger clickable"
+                                    role="link"
+                                    tabindex="0"
+                                    on:keydown={() => {}}
+                                    on:click={() => deleteTool(uid)}
+                                />
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="utility-row utility-row-secondary">
+                        <div class="utility-content">
+                            <div class="utility-list-item">
+                                <div class="utility-label line-align-center">
+                                    {'Server'}
+                                </div>
+                                <div class="utility-value">
+                                    <div class="utility-input line-align-center">
+                                        <Input
+                                            type="text"
+                                            disabled
+                                            value={tool.server_id}
+                                        />
+                                    </div>
+                                    <div class="utility-delete line-align-center"></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="utility-content">
+                            {#each tool.functions as fn, fid (fid)}
+                                <div class="utility-list-item">
+                                    <div class="utility-label line-align-center">
+                                        {fid === 0 ? 'Functions' : ''}
+                                    </div>
+                                    <div class="utility-value">
+                                        <div class="utility-input line-align-center">
+                                            <Input
+                                                type="text"
+                                                maxlength={textLimit}
+                                                disabled={tool.disabled}
+                                                value={fn.name}
+                                                on:change={e => changeContent(e, uid, fid, 'function')}
+                                            />
+                                        </div>
+                                        <div class="utility-delete line-align-center">
+                                            <i
+                                                class="bx bxs-no-entry text-danger clickable"
+                                                role="link"
+                                                tabindex="0"
+                                                on:keydown={() => {}}
+                                                on:click={() => deleteToolContent(uid, fid, 'function')}
+                                            />
+                                        </div>
+                                    </div>
+                                </div>
+                            {/each}
+
+                            {#if tool.functions?.length < limit}
+                                <div class="utility-list-item">
+                                    <div class="utility-label">
+                                        {tool.functions.length === 0 ? 'Functions' : ''}
+                                    </div>
+                                    <div class="utility-value">
+                                        <i
+                                            class="bx bx-list-plus add-list clickable"
+                                            role="link"
+                                            tabindex="0"
+                                            on:keydown={() => {}}
+                                            on:click={() => addToolContent(uid, 'function')}
+                                        />
+                                    </div>
+                                </div>
+                            {/if}
+                        </div>
+                    </div>
+                </div>
+            {/each}
+
+            {#if innerTools.length < limit}
+                <div class="add-utility">
+                    <Button color="primary" on:click={() => addTool()}>
+                        <span>
+                            <i class="bx bx-plus" />
+                            <span>Add Tool</span>
+                        </span>
+                    </Button>
+                </div>
+            {/if}
+        </div>
+    </CardBody>
+</Card>
\ No newline at end of file
diff --git a/src/routes/page/agent/[agentId]/agent-components/agent-overview.svelte b/src/routes/page/agent/[agentId]/agent-components/agent-overview.svelte
index 7b4b679e..04e92970 100644
--- a/src/routes/page/agent/[agentId]/agent-components/agent-overview.svelte
+++ b/src/routes/page/agent/[agentId]/agent-components/agent-overview.svelte
@@ -35,6 +35,7 @@
 
         profiles = [...profiles, ''];
         agent.profiles = profiles;
+        handleAgentChange();
     }
 
     /**
@@ -43,6 +44,7 @@
     function removeProfile(index) {
         profiles = profiles.filter((x, idx) => idx !== index);
         agent.profiles = profiles;
+        handleAgentChange();
     }
 
     function addLabel() {
@@ -50,6 +52,7 @@
 
         labels = [...labels, ''];
         agent.labels = labels;
+        handleAgentChange();
     }
 
     /**
@@ -58,6 +61,7 @@
     function removeLabel(index) {
         labels = labels.filter((x, idx) => idx !== index);
         agent.labels = labels;
+        handleAgentChange();
     }
 
     function chatWithAgent() {
@@ -192,7 +196,7 @@
                                             role="link"
                                             tabindex="0"
                                             on:keydown={() => {}}
-                                            on:click={() => { removeProfile(index); handleAgentChange(); }}
+                                            on:click={() => removeProfile(index)}
                                         />
                                     </div>
                                 </div>
@@ -204,7 +208,7 @@
                                         role="link"
                                         tabindex="0"
                                         on:keydown={() => {}}
-                                        on:click={() => { addProfile(); handleAgentChange(); }}
+                                        on:click={() => addProfile()}
                                     />
                                 </div>
                                 {/if}
@@ -235,7 +239,7 @@
                                             role="link"
                                             tabindex="0"
                                             on:keydown={() => {}}
-                                            on:click={() => { removeLabel(index); handleAgentChange(); }}
+                                            on:click={() => removeLabel(index)}
                                         />
                                     </div>
                                 </div>
@@ -247,7 +251,7 @@
                                         role="link"
                                         tabindex="0"
                                         on:keydown={() => {}}
-                                        on:click={() => { addLabel(); handleAgentChange(); }}
+                                        on:click={() => addLabel()}
                                     />
                                 </div>
                                 {/if}
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 4c8d1290..6c9a14ca 100644
--- a/src/routes/page/agent/[agentId]/agent-components/agent-rule.svelte
+++ b/src/routes/page/agent/[agentId]/agent-components/agent-rule.svelte
@@ -83,8 +83,8 @@
         
         const val = e.target.value;
         found.trigger_name = val;
-        handleAgentChange();
         innerRefresh(innerRules);
+        handleAgentChange();
     }
 
     function addRule() {
@@ -115,8 +115,8 @@
         if (!found) return;
 
         found.disabled = !e.target.checked;
-        handleAgentChange();
         innerRefresh(innerRules);
+        handleAgentChange();
     }
 
     /**
@@ -132,8 +132,8 @@
         if (field === 'criteria') {
             found.criteria = val;
         }
-        handleAgentChange();
         innerRefresh(innerRules);
+        handleAgentChange();
     }
 
 
diff --git a/src/routes/page/agent/[agentId]/agent-components/agent-template.svelte b/src/routes/page/agent/[agentId]/agent-components/agent-template.svelte
index 2615a31b..c192d707 100644
--- a/src/routes/page/agent/[agentId]/agent-components/agent-template.svelte
+++ b/src/routes/page/agent/[agentId]/agent-components/agent-template.svelte
@@ -90,6 +90,7 @@
         e.preventDefault();
         const value = e.target.value;
         selected_template.content = value || '';
+        handleAgentChange();
     }
 
     function addTemplate() {
@@ -103,6 +104,7 @@
         ];
 
         selected_template = inner_templates[inner_templates.length-1];
+        handleAgentChange();
     }
 
     /** @param {string | undefined | null} uid */
@@ -113,6 +115,7 @@
                 ...defaultTemplate
             };
         }
+        handleAgentChange();
     }
 </script>
 
@@ -139,7 +142,7 @@
                     data-bs-placement="top"
                     title="Add templates"
                     style="font-size: 16px;"
-                    on:click={() => { addTemplate(); handleAgentChange(); }}
+                    on:click={() => addTemplate()}
                 >
                     <i class="mdi mdi-plus-circle-outline" />
                 </div>
@@ -165,7 +168,7 @@
                     maxEditLength={50}
                     editPlaceholder={'Type a title here...'}
                     onClick={() => selectTemplate(template.uid)}
-                    onDelete={() => { deleteTemplate(template.uid); handleAgentChange(); }}
+                    onDelete={() => deleteTemplate(template.uid)}
                     onInput={() => handleAgentChange()}
                 />
                 {/each}
@@ -176,7 +179,7 @@
                 style="scrollbar-width: thin; resize: none;"
                 value={selected_template.content}
                 rows={15}
-                on:input={(e) => { changePrompt(e); handleAgentChange(); }}
+                on:input={(e) => changePrompt(e)}
                 placeholder="Enter your template"
             />
             {/if}
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 948afecf..c119dc9e 100644
--- a/src/routes/page/agent/[agentId]/agent-components/agent-utility.svelte
+++ b/src/routes/page/agent/[agentId]/agent-components/agent-utility.svelte
@@ -15,9 +15,9 @@
 
     export const fetchUtilities = () => {
         const candidates = innerUtilities?.filter(x => !!x.name)?.map(x => {
-            /** @type {import('$agentTypes').UtilityBase[]} */
+            /** @type {import('$commonTypes').NameBase[]} */
             const functions = [];
-            /** @type {import('$agentTypes').UtilityBase[]} */
+            /** @type {import('$commonTypes').NameBase[]} */
             const templates = [];
 
             const uniqueFns = new Set();
@@ -143,6 +143,7 @@
             ...utilityMapper[name].templates?.filter(x => !!x.name) || []
         ];
         innerRefresh(innerUtilities);
+        handleAgentChange();
     }
 
     function addUtility() {
@@ -160,6 +161,7 @@
     /** @param {number} idx */
     function deleteUtility(idx) {
         innerUtilities = innerUtilities.filter((_, index) => index !== idx);
+        handleAgentChange();
     }
 
     /**
@@ -177,6 +179,7 @@
         }
 
         innerRefresh(innerUtilities);
+        handleAgentChange();
     }
 
     /**
@@ -197,6 +200,7 @@
         }
         
         innerRefresh(innerUtilities);
+        handleAgentChange();
     }
 
     
@@ -225,6 +229,7 @@
             }
         }
         innerRefresh(innerUtilities);
+        handleAgentChange();
     }
 
     /**
@@ -237,6 +242,7 @@
 
         found.disabled = !e.target.checked;
         innerRefresh(innerUtilities);
+        handleAgentChange();
     }
 
 
@@ -259,6 +265,7 @@
         if (!!agent) {
             agent.merge_utility = checked;
         }
+        handleAgentChange();
     }
 </script>
 
@@ -274,7 +281,7 @@
                     <Input
                         type="checkbox"
                         checked={agent?.merge_utility || false}
-                        on:change={e => { toggleMergeUtility(e); handleAgentChange(); }}
+                        on:change={e => { toggleMergeUtility(e);}}
                     />
                     <div class="fw-bold">
                         Merge utilities
@@ -300,7 +307,7 @@
                                     <Input
                                         type="checkbox"
                                         checked={!utility.disabled}
-                                        on:change={e => { toggleUtility(e, uid); handleAgentChange(); }}
+                                        on:change={e => { toggleUtility(e, uid); }}
                                     />
                                 </div>
                                 <div
@@ -319,7 +326,7 @@
                                     type="select"
                                     value={utility.name}
                                     disabled={utility.disabled}
-                                    on:change={e => { changeUtility(e, uid); handleAgentChange(); }}
+                                    on:change={e => { changeUtility(e, uid); }}
                                 >
                                     {#each utilityOptions as option}
                                         <option value={option} selected={option == utility.name}>{option}</option>
@@ -332,7 +339,7 @@
                                     role="link"
                                     tabindex="0"
                                     on:keydown={() => {}}
-                                    on:click={() => { deleteUtility(uid); handleAgentChange(); }}
+                                    on:click={() => { deleteUtility(uid); }}
                                 />
                             </div>
                         </div>
@@ -350,7 +357,7 @@
                                             <Input
                                                 type="select"
                                                 disabled={utility.disabled}
-                                                on:change={e => { selectContent(e, uid, fid, 'function'); handleAgentChange(); }}
+                                                on:change={e => { selectContent(e, uid, fid, 'function'); }}
                                             >
                                                 {#each (utilityMapper[utility.name]?.functions || []) as option}
                                                     <option value={`${option.name}#${option.displayName}`} selected={option.name == fn.name}>{option.displayName}</option>
@@ -363,7 +370,7 @@
                                                 role="link"
                                                 tabindex="0"
                                                 on:keydown={() => {}}
-                                                on:click={() => { deleteUtilityContent(uid, fid, 'function'); handleAgentChange(); }}
+                                                on:click={() => { deleteUtilityContent(uid, fid, 'function'); }}
                                             />
                                         </div>
                                     </div>
@@ -381,7 +388,7 @@
                                             role="link"
                                             tabindex="0"
                                             on:keydown={() => {}}
-                                            on:click={() => { addUtilityContent(uid, 'function'); handleAgentChange(); }}
+                                            on:click={() => { addUtilityContent(uid, 'function'); }}
                                         />
                                     </div>
                                 </div>
@@ -399,7 +406,7 @@
                                             <Input
                                                 type="select"
                                                 disabled={utility.disabled}
-                                                on:change={e => { selectContent(e, uid, tid, 'template'); handleAgentChange(); }}
+                                                on:change={e => { selectContent(e, uid, tid, 'template'); }}
                                             >
                                                 {#each (utilityMapper[utility.name]?.templates || []) as option}
                                                     <option value={`${option.name}#${option.displayName}`} selected={option.name == tp.name}>
@@ -414,7 +421,7 @@
                                                 role="link"
                                                 tabindex="0"
                                                 on:keydown={() => {}}
-                                                on:click={() => { deleteUtilityContent(uid, tid, 'template'); handleAgentChange(); }}
+                                                on:click={() => { deleteUtilityContent(uid, tid, 'template'); }}
                                             />
                                         </div>
                                     </div>
@@ -432,7 +439,7 @@
                                             role="link"
                                             tabindex="0"
                                             on:keydown={() => {}}
-                                            on:click={() => { addUtilityContent(uid, 'template'); handleAgentChange(); }}
+                                            on:click={() => { addUtilityContent(uid, 'template'); }}
                                         />
                                     </div>
                                 </div>
diff --git a/src/routes/page/agent/[agentId]/agent-tabs.svelte b/src/routes/page/agent/[agentId]/agent-tabs.svelte
index 74929978..cb90e696 100644
--- a/src/routes/page/agent/[agentId]/agent-tabs.svelte
+++ b/src/routes/page/agent/[agentId]/agent-tabs.svelte
@@ -8,6 +8,7 @@
 	import AgentKnowledgeBase from './agent-components/agent-knowledge-base.svelte';
 	import AgentRouting from './agent-components/agent-routing.svelte';
 	import AgentEventRule from './agent-components/agent-rule.svelte';
+	import AgentMcpTool from './agent-components/agent-mcp-tool.svelte';
 
     /** @type {import('$agentTypes').AgentModel} */
     export let agent;
@@ -20,12 +21,14 @@
         const utilities = agentUtilityCmp?.fetchUtilities();
         const knwoledgebases = agentKnowledgeBaseCmp?.fetchKnowledgeBases();
         const rules = agentEventRuleCmp?.fetchRules();
+        const mcpTools = agentMcpToolCmp?.fetchMcpTools();
 
         return {
             llmConfig,
             utilities: utilities || [],
             knwoledgebases: knwoledgebases || [],
-            rules: rules || []
+            rules: rules || [],
+            mcpTools: mcpTools || []
         };
     };
 
@@ -33,11 +36,13 @@
         const utilities = agentUtilityCmp?.fetchOriginalUtilities();
         const knwoledgebases = agentKnowledgeBaseCmp?.fetchOriginalKnowledgeBases();
         const rules = agentEventRuleCmp?.fetchOriginalRules();
+        const mcpTools = agentMcpToolCmp?.fetchOriginalMcpTools();
 
         return {
             utilities: utilities || [],
             knwoledgebases: knwoledgebases || [],
-            rules: rules || []
+            rules: rules || [],
+            mcpTools: mcpTools || []
         };
     }
 
@@ -46,6 +51,7 @@
         agentUtilityCmp?.refresh();
         agentKnowledgeBaseCmp?.refresh();
         agentEventRuleCmp?.refresh();
+        agentMcpToolCmp?.refresh();
     }
 
     /** @type {any} */
@@ -56,6 +62,8 @@
     let agentKnowledgeBaseCmp = null;
     /** @type {any} */
     let agentEventRuleCmp = null;
+    /** @type {any} */
+    let agentMcpToolCmp = null;
 
     /** @type {string}*/
     let selectedTab;
@@ -66,11 +74,12 @@
         { name: 'agent-routing-rule', displayText: 'Routing' },
         { name: 'agent-utility', displayText: 'Utilities' },
         { name: 'agent-knowledgebase', displayText: 'Knowledge Base' },
-        { name: 'agent-event-rule', displayText: 'Rules' }
+        { name: 'agent-event-rule', displayText: 'Rules' },
+        { name: 'agent-mcp-tool', displayText: 'MCP' }
     ];
 
     onMount(() => {
-        selectedTab = tabs[0]?.name;
+        selectedTab = tabs[5]?.name;
     });
 
     /** @param {string} selected */
@@ -114,5 +123,8 @@
         <div class:hide={selectedTab !== 'agent-event-rule'}>
             <AgentEventRule agent={agent} bind:this={agentEventRuleCmp} {handleAgentChange} />
         </div>
+        <div class:hide={selectedTab !== 'agent-mcp-tool'}>
+            <AgentMcpTool agent={agent} bind:this={agentMcpToolCmp} {handleAgentChange} />
+        </div>
     </CardBody>
 </Card>
\ No newline at end of file
diff --git a/svelte.config.js b/svelte.config.js
index 15b7ce18..7f8a0383 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -17,7 +17,8 @@ const config = {
 			$roleTypes: './src/lib/helpers/types/roleTypes.js',
 			$pluginTypes: './src/lib/helpers/types/pluginTypes.js',
 			$realtimeTypes: './src/lib/helpers/types/realtimeTypes.js',
-			$instructTypes: './src/lib/helpers/types/instructTypes.js'
+			$instructTypes: './src/lib/helpers/types/instructTypes.js',
+			$mcpTypes: './src/lib/helpers/types/mcpTypes.js'
 		},
 
 		// for static deployment

From 3fb9b47e7419f2ed99db0dc3cc390c0691e46d26 Mon Sep 17 00:00:00 2001
From: Jicheng Lu <103353@smsassist.com>
Date: Tue, 1 Apr 2025 15:00:54 -0500
Subject: [PATCH 2/2] change type

---
 src/lib/helpers/types/agentTypes.js | 2 +-
 src/lib/helpers/types/mcpTypes.js   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/helpers/types/agentTypes.js b/src/lib/helpers/types/agentTypes.js
index 161ec9b4..aa199b54 100644
--- a/src/lib/helpers/types/agentTypes.js
+++ b/src/lib/helpers/types/agentTypes.js
@@ -57,7 +57,7 @@
  * @property {boolean} merge_utility - Merge utility
  * @property {number?} [max_message_count]
  * @property {AgentUtility[]} utilities - The agent utilities.
- * @property {any[]} mcp_tools - The agent mcp tools
+ * @property {AgentMcpTool[]} mcp_tools - The agent mcp tools
  * @property {AgentKnowledgeBase[]} knowledge_bases - The agent knowledge bases.
  * @property {Date} created_datetime
  * @property {Date} updated_datetime
diff --git a/src/lib/helpers/types/mcpTypes.js b/src/lib/helpers/types/mcpTypes.js
index 58a16afe..4f8cc838 100644
--- a/src/lib/helpers/types/mcpTypes.js
+++ b/src/lib/helpers/types/mcpTypes.js
@@ -2,7 +2,7 @@
  * @typedef {Object} McpServerConfigModel
  * @property {string} id - The server id.
  * @property {string} name - The server name.
- * @property {string} transportType - The transport type.
+ * @property {string} transport_type - The transport type.
  */
 
 export default {};
\ No newline at end of file