Skip to content

Commit 5c1575d

Browse files
author
Jicheng Lu
committed
refine mcp
1 parent feb3b42 commit 5c1575d

File tree

3 files changed

+50
-42
lines changed

3 files changed

+50
-42
lines changed

‎src/lib/helpers/types/mcpTypes.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
/**
2-
* @typedef {Object} McpServerConfigModel
2+
* @typedef {Object} McpServerOptionModel
33
* @property {string} id - The server id.
44
* @property {string} name - The server name.
5-
* @property {string} transport_type - The transport type.
5+
* @property {string[]} tools - The tools.
66
*/
77

88
export default {};

‎src/lib/services/mcp-service.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import axios from 'axios';
33

44
/**
55
* Get mcp server configs
6-
* @returns {Promise<import('$mcpTypes').McpServerConfigModel[]>}
6+
* @returns {Promise<import('$mcpTypes').McpServerOptionModel[]>}
77
*/
88
export async function getServerConfigs() {
99
const url = endpoints.mcpServerConfigsUrl;

‎src/routes/page/agent/[agentId]/agent-components/agent-mcp-tool.svelte‎

Lines changed: 47 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44
import { getServerConfigs } from '$lib/services/mcp-service';
55
66
const limit = 10;
7-
const textLimit = 100;
87
98
/** @type {import('$agentTypes').AgentModel} */
109
export let agent;
@@ -36,17 +35,17 @@
3635
});
3736
3837
/** @type {import('$agentTypes').AgentMcpTool[]} */
39-
const tools = [];
38+
const mcps = [];
4039
const unique = new Set();
4140
candidates.forEach(x => {
4241
if (!unique.has(x.name)) {
43-
tools.push(x);
42+
mcps.push(x);
4443
unique.add(x.name);
4544
}
4645
});
4746
48-
innerRefresh(tools);
49-
return tools;
47+
innerRefresh(mcps);
48+
return mcps;
5049
}
5150
5251
export const fetchOriginalMcpTools = () => {
@@ -67,13 +66,18 @@
6766
const list = res?.map(x => {
6867
return {
6968
id: x.id,
70-
name: x.name
69+
name: x.name,
70+
tools: [
71+
'',
72+
...x.tools
73+
]
7174
};
7275
}) || [];
7376
mcpOptions = [
7477
{
7578
id: '',
76-
name: ''
79+
name: '',
80+
tools: ['']
7781
},
7882
...list
7983
];
@@ -109,7 +113,7 @@
109113
* @param {any} e
110114
* @param {number} idx
111115
*/
112-
function changeTool(e, idx) {
116+
function changeMcp(e, idx) {
113117
const found = innerMcps.find((_, index) => index === idx);
114118
if (!found) return;
115119
@@ -118,11 +122,12 @@
118122
119123
found.name = name;
120124
found.server_id = val;
125+
found.functions = [];
121126
innerRefresh(innerMcps);
122127
handleAgentChange();
123128
}
124129
125-
function addTool() {
130+
function addMcp() {
126131
innerMcps = [
127132
...innerMcps,
128133
{
@@ -136,7 +141,7 @@
136141
}
137142
138143
/** @param {number} idx */
139-
function deleteTool(idx) {
144+
function deleteMcp(idx) {
140145
innerMcps = innerMcps.filter((_, index) => index !== idx);
141146
handleAgentChange();
142147
}
@@ -145,7 +150,7 @@
145150
* @param {any} e
146151
* @param {number} uid
147152
*/
148-
function toggleTool(e, uid) {
153+
function toggleMcp(e, uid) {
149154
const found = innerMcps.find((_, index) => index === uid);
150155
if (!found) return;
151156
@@ -156,22 +161,21 @@
156161
157162
/**
158163
* @param {any} e
159-
* @param {number} tid
160-
* @param {number} id
164+
* @param {number} id
165+
* @param {number} refId
161166
* @param {string} type
162167
*/
163-
function changeContent(e, tid, id, type) {
164-
const found = innerMcps.find((_, index) => index === tid);
168+
function changeMcpContent(e, id, refId, type) {
169+
const found = innerMcps.find((_, index) => index === id);
165170
if (!found) return;
166171
167172
const val = e.target.value;
168173
if (type === 'function') {
169-
const fn = found.functions.find((_, index) => index == id);
174+
const fn = found.functions.find((_, index) => index == refId);
170175
if (fn) {
171176
fn.name = val;
172177
}
173178
}
174-
175179
innerRefresh(innerMcps);
176180
handleAgentChange();
177181
}
@@ -180,7 +184,7 @@
180184
* @param {number} id
181185
* @param {string} type
182186
*/
183-
function addToolContent(id, type) {
187+
function addMcpContent(id, type) {
184188
const found = innerMcps.find((_, index) => index === id);
185189
if (!found || found.disabled) return;
186190
@@ -197,7 +201,7 @@
197201
* @param {number} id
198202
* @param {string} type
199203
*/
200-
function deleteToolContent(uid, id, type) {
204+
function deleteMcpContent(uid, id, type) {
201205
const found = innerMcps.find((_, index) => index === uid);
202206
if (!found || found.disabled) return;
203207
@@ -218,7 +222,7 @@
218222
</div>
219223
220224
<div class="agent-utility-container">
221-
{#each innerMcps as tool, uid (uid)}
225+
{#each innerMcps as mcp, uid (uid)}
222226
<div class="utility-wrapper">
223227
<div class="utility-row utility-row-primary">
224228
<div class="utility-label fw-bold">
@@ -227,8 +231,8 @@
227231
<div class="line-align-center">
228232
<Input
229233
type="checkbox"
230-
checked={!tool.disabled}
231-
on:change={e => toggleTool(e, uid)}
234+
checked={!mcp.disabled}
235+
on:change={e => toggleMcp(e, uid)}
232236
/>
233237
</div>
234238
<div
@@ -245,11 +249,11 @@
245249
<div class="utility-input line-align-center">
246250
<Input
247251
type="select"
248-
disabled={tool.disabled}
249-
on:change={e => changeTool(e, uid)}
252+
disabled={mcp.disabled}
253+
on:change={e => changeMcp(e, uid)}
250254
>
251255
{#each [...mcpOptions] as option}
252-
<option value={option.id} selected={option.id == tool.server_id}>
256+
<option value={option.id} selected={option.id == mcp.server_id}>
253257
{option.displayName || option.name}
254258
</option>
255259
{/each}
@@ -261,7 +265,7 @@
261265
role="link"
262266
tabindex="0"
263267
on:keydown={() => {}}
264-
on:click={() => deleteTool(uid)}
268+
on:click={() => deleteMcp(uid)}
265269
/>
266270
</div>
267271
</div>
@@ -278,54 +282,58 @@
278282
<Input
279283
type="text"
280284
disabled
281-
value={tool.server_id}
285+
value={mcp.server_id}
282286
/>
283287
</div>
284288
<div class="utility-delete line-align-center"></div>
285289
</div>
286290
</div>
287291
</div>
288292
<div class="utility-content">
289-
{#each tool.functions as fn, fid (fid)}
293+
{#each mcp.functions as fn, fid (fid)}
290294
<div class="utility-list-item">
291295
<div class="utility-label line-align-center">
292296
{fid === 0 ? 'Tools' : ''}
293297
</div>
294298
<div class="utility-value">
295299
<div class="utility-input line-align-center">
296300
<Input
297-
type="text"
298-
maxlength={textLimit}
299-
disabled={tool.disabled}
300-
value={fn.name}
301-
on:change={e => changeContent(e, uid, fid, 'function')}
302-
/>
301+
type="select"
302+
disabled={mcp.disabled}
303+
on:change={e => changeMcpContent(e, uid, fid, 'function')}
304+
>
305+
{#each [...mcpOptions.find(x => x.id === mcp.server_id)?.tools || []] as option}
306+
<option value={option} selected={option == fn.name}>
307+
{option}
308+
</option>
309+
{/each}
310+
</Input>
303311
</div>
304312
<div class="utility-delete line-align-center">
305313
<i
306314
class="bx bxs-no-entry text-danger clickable"
307315
role="link"
308316
tabindex="0"
309317
on:keydown={() => {}}
310-
on:click={() => deleteToolContent(uid, fid, 'function')}
318+
on:click={() => deleteMcpContent(uid, fid, 'function')}
311319
/>
312320
</div>
313321
</div>
314322
</div>
315323
{/each}
316324
317-
{#if tool.functions?.length < limit}
325+
{#if mcp.functions?.length < limit}
318326
<div class="utility-list-item">
319327
<div class="utility-label">
320-
{tool.functions.length === 0 ? 'Functions' : ''}
328+
{mcp.functions.length === 0 ? 'Functions' : ''}
321329
</div>
322330
<div class="utility-value">
323331
<i
324332
class="bx bx-list-plus add-list clickable"
325333
role="link"
326334
tabindex="0"
327335
on:keydown={() => {}}
328-
on:click={() => addToolContent(uid, 'function')}
336+
on:click={() => addMcpContent(uid, 'function')}
329337
/>
330338
</div>
331339
</div>
@@ -337,7 +345,7 @@
337345
338346
{#if innerMcps.length < limit}
339347
<div class="add-utility">
340-
<Button color="primary" on:click={() => addTool()}>
348+
<Button color="primary" on:click={() => addMcp()}>
341349
<span>
342350
<i class="bx bx-plus" />
343351
<span>Add MCP</span>

0 commit comments

Comments
 (0)