✨ feat: Implement MCP Server Management API and UI Components

- Added API endpoints for managing MCP servers: create, read, update, and delete functionalities.
- Introduced new UI components for MCP server configuration, including MCPFormPanel and MCPConfig.
- Updated existing types and data provider to support MCP operations.
- Enhanced the side panel to include MCP server management options.
- Refactored related components and hooks for better integration with the new MCP features.
- Added tests for the new MCP server API functionalities.

packages/data-provider/src/api-endpoints.ts

@@ -185,6 +185,21 @@ export const agents = ({ path = '', options }: { path?: string; options?: object
   return url;
 };
 
+export const mcps = ({ path = '', options }: { path?: string; options?: object }) => {
+  let url = '/api/mcp';
+
+  if (path && path !== '') {
+    url += `/${path}`;
+  }
+
+  if (options && Object.keys(options).length > 0) {
+    const queryParams = new URLSearchParams(options as Record<string, string>).toString();
+    url += `?${queryParams}`;
+  }
+
+  return url;
+};
+
 export const revertAgentVersion = (agent_id: string) => `${agents({ path: `${agent_id}/revert` })}`;
 
 export const files = () => '/api/files';

packages/data-provider/src/data-service.ts

@@ -832,3 +832,41 @@ export const createMemory = (data: {
 }): Promise<{ created: boolean; memory: q.TUserMemory }> => {
   return request.post(endpoints.memories(), data);
 };
+
+export const createMCP = (mcp: ag.MCP): Promise<ag.MCP> => {
+  return request.post(
+    endpoints.mcps({
+      path: 'add',
+    }),
+    mcp,
+  );
+};
+
+export const getMCPServers = (): Promise<ag.MCP[]> => {
+  return request.get(endpoints.mcps({}));
+};
+
+export const getMCP = (mcp_id: string): Promise<ag.MCP> => {
+  return request.get(
+    endpoints.mcps({
+      path: mcp_id,
+    }),
+  );
+};
+
+export const updateMCP = ({ mcp_id, data }: { mcp_id: string; data: ag.MCP }): Promise<ag.MCP> => {
+  return request.put(
+    endpoints.mcps({
+      path: mcp_id,
+    }),
+    data,
+  );
+};
+
+export const deleteMCP = ({ mcp_id }: { mcp_id: string }): Promise<Record<string, unknown>> => {
+  return request.delete(
+    endpoints.mcps({
+      path: mcp_id,
+    }),
+  );
+};

packages/data-provider/src/keys.ts

@@ -48,6 +48,7 @@ export enum QueryKeys {
   banner = 'banner',
   /* Memories */
   memories = 'memories',
+  mcpServers = 'mcpServers',
 }
 
 export enum MutationKeys {

packages/data-provider/src/types/agents.ts

@@ -337,18 +337,22 @@ export type MCP = {
   metadata: MCPMetadata;
 } & ({ assistant_id: string; agent_id?: never } | { assistant_id?: never; agent_id: string });
 
-export type MCPMetadata = Omit<ActionMetadata, 'auth'> & {
-  name?: string;
+export type MCPMetadata = {
+  name: string;
   description?: string;
-  url?: string;
-  tools?: string[];
-  auth?: MCPAuth;
+  url: string;
+  tools?: TPlugin[];
   icon?: string;
   trust?: boolean;
+  customHeaders?: Array<{
+    id: string;
+    name: string;
+    value: string;
+  }>;
+  requestTimeout?: number;
+  connectionTimeout?: number;
 };
 
-export type MCPAuth = ActionAuth;
-
 export type AgentToolType = {
   tool_id: string;
   metadata: ToolMetadata;

packages/data-provider/src/types/mutations.ts

@@ -12,7 +12,7 @@ import {
   AgentCreateParams,
   AgentUpdateParams,
 } from './assistants';
-import { Action, ActionMetadata } from './agents';
+import { Action, ActionMetadata, MCP } from './agents';
 
 export type MutationOptions<
   Response,
@@ -319,6 +319,15 @@ export type AcceptTermsMutationOptions = MutationOptions<
 /* Tools */
 export type UpdatePluginAuthOptions = MutationOptions<types.TUser, types.TUpdateUserPlugins>;
 
+export type CreateMCPMutationOptions = MutationOptions<Record<string, unknown>, MCP>;
+
+export type UpdateMCPMutationOptions = MutationOptions<
+  Record<string, unknown>,
+  { mcp_id: string; data: MCP }
+>;
+
+export type DeleteMCPMutationOptions = MutationOptions<Record<string, unknown>, { mcp_id: string }>;
+
 export type ToolParamsMap = {
   [Tools.execute_code]: {
     lang: string;