Feat: Scratch MCP tool calling support. (#8263)

### What problem does this PR solve?

This is a cherry-pick from #7781 as requested.

### Type of change

- [x] New Feature (non-breaking change which adds functionality)

Co-authored-by: Kevin Hu <kevinhu.sh@gmail.com>

web/src/interfaces/database/mcp-server.ts

@@ -0,0 +1,19 @@
+export enum McpServerType {
+    Sse = 'sse',
+    StreamableHttp = 'streamable-http',
+}
+
+export interface IMcpServerVariable {
+    key: string;
+    name: string;
+}
+
+export interface IMcpServerInfo {
+    id: string;
+    name: string;
+    url: string;
+    server_type: McpServerType;
+    description?: string;
+    variables?: IMcpServerVariable[];
+    headers: Map<string, string>;
+}

web/src/services/mcp-server-service.ts

@@ -0,0 +1,41 @@
+import api from '@/utils/api';
+import registerServer from '@/utils/register-server';
+import request from '@/utils/request';
+
+const {
+  getMcpServerList,
+  getMultipleMcpServers,
+  createMcpServer,
+  updateMcpServer,
+  deleteMcpServer,
+} = api;
+
+const methods = {
+  get_list: {
+    url: getMcpServerList,
+    method: 'get',
+  },
+  get_multiple: {
+    url: getMultipleMcpServers,
+    method: 'post',
+  },
+  add: {
+    url: createMcpServer,
+    method: 'post'
+  },
+  update: {
+    url: updateMcpServer,
+    method: 'post'
+  },
+  rm: {
+    url: deleteMcpServer,
+    method: 'post'
+  },
+} as const;
+
+const mcpServerService = registerServer<keyof typeof methods>(methods, request);
+
+export const getMcpServer = (serverId: string) =>
+  request.get(api.getMcpServer(serverId));
+
+export default mcpServerService;

web/src/utils/api.ts

@@ -143,4 +143,12 @@ export default {
   testDbConnect: `${api_host}/canvas/test_db_connect`,
   getInputElements: `${api_host}/canvas/input_elements`,
   debug: `${api_host}/canvas/debug`,
+
+  // mcp server
+  getMcpServerList: `${api_host}/mcp_server/list`,
+  getMultipleMcpServers: `${api_host}/mcp_server/get_multiple`,
+  getMcpServer: (serverId: string) => `${api_host}/mcp_server/get/${serverId}`,
+  createMcpServer: `${api_host}/mcp_server/create`,
+  updateMcpServer: `${api_host}/mcp_server/update`,
+  deleteMcpServer: `${api_host}/mcp_server/rm`,
 };