mirror of
https://github.com/danny-avila/LibreChat.git
synced 2025-12-16 16:30:15 +01:00
nicely refactored mcp add done
This commit is contained in:
parent
234827dc57
commit
568ec2f7d5
5 changed files with 22 additions and 240 deletions
|
|
@ -1,17 +1,17 @@
|
|||
import React, { useState, useCallback, useMemo, useEffect } from 'react';
|
||||
import { ChevronLeft } from 'lucide-react';
|
||||
import { Constants } from 'librechat-data-provider';
|
||||
import { useForm, Controller } from 'react-hook-form';
|
||||
import React, { useState, useCallback, useMemo, useEffect } from 'react';
|
||||
import { useUpdateUserPluginsMutation } from 'librechat-data-provider/react-query';
|
||||
import type { TUpdateUserPlugins } from 'librechat-data-provider';
|
||||
import type { MCP } from 'librechat-data-provider';
|
||||
import { useCreateMCPMutation } from '~/data-provider';
|
||||
import { Button, Input, Label } from '~/components/ui';
|
||||
import { useGetStartupConfig } from '~/data-provider';
|
||||
import { useAddToolMutation } from '~/data-provider/Tools/mutations';
|
||||
import MCPPanelSkeleton from './MCPPanelSkeleton';
|
||||
import { useToastContext } from '~/Providers';
|
||||
import { useLocalize } from '~/hooks';
|
||||
import MCPFormPanel from './MCPFormPanel';
|
||||
import { useLocalize } from '~/hooks';
|
||||
|
||||
interface ServerConfigWithVars {
|
||||
serverName: string;
|
||||
|
|
@ -61,7 +61,7 @@ export default function MCPPanel() {
|
|||
},
|
||||
});
|
||||
|
||||
const createMCPMutation = useAddToolMutation({
|
||||
const create = useCreateMCPMutation({
|
||||
onSuccess: () => {
|
||||
showToast({
|
||||
message: localize('com_ui_update_mcp_success'),
|
||||
|
|
@ -119,20 +119,7 @@ export default function MCPPanel() {
|
|||
};
|
||||
|
||||
const handleSaveMCP = (mcp: MCP) => {
|
||||
// Transform MCP data to match the expected format
|
||||
const mcpData = {
|
||||
name: mcp.metadata.name || '',
|
||||
description: mcp.metadata.description || '',
|
||||
url: mcp.metadata.url || '',
|
||||
icon: mcp.metadata.icon || '',
|
||||
tools: mcp.metadata.tools || [],
|
||||
trust: mcp.metadata.trust ?? false,
|
||||
customHeaders: mcp.metadata.customHeaders || [],
|
||||
requestTimeout: mcp.metadata.requestTimeout,
|
||||
connectionTimeout: mcp.metadata.connectionTimeout,
|
||||
};
|
||||
|
||||
createMCPMutation.mutate(mcpData);
|
||||
create.mutate(mcp);
|
||||
};
|
||||
|
||||
if (showMCPForm) {
|
||||
|
|
|
|||
|
|
@ -41,32 +41,14 @@ export const useToolCallMutation = <T extends t.ToolId>(
|
|||
);
|
||||
};
|
||||
|
||||
interface CreateToolData {
|
||||
name: string;
|
||||
description: string;
|
||||
metadata?: Record<string, unknown>;
|
||||
// MCP-specific fields
|
||||
url?: string;
|
||||
icon?: string;
|
||||
tools?: string[];
|
||||
trust?: boolean;
|
||||
customHeaders?: Array<{
|
||||
id: string;
|
||||
name: string;
|
||||
value: string;
|
||||
}>;
|
||||
requestTimeout?: number;
|
||||
connectionTimeout?: number;
|
||||
}
|
||||
|
||||
export const useAddToolMutation = (
|
||||
options?: t.MutationOptions<Record<string, unknown>, CreateToolData>,
|
||||
): UseMutationResult<Record<string, unknown>, Error, CreateToolData> => {
|
||||
export const useCreateMCPMutation = (
|
||||
options?: t.CreateMCPMutationOptions,
|
||||
): UseMutationResult<Record<string, unknown>, Error, t.MCP> => {
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
return useMutation(
|
||||
(toolData: CreateToolData) => {
|
||||
return dataService.createTool(toolData);
|
||||
(mcp: t.MCP) => {
|
||||
return dataService.createMCP(mcp);
|
||||
},
|
||||
{
|
||||
onMutate: (variables) => options?.onMutate?.(variables),
|
||||
|
|
@ -74,7 +56,7 @@ export const useAddToolMutation = (
|
|||
onSuccess: (data, variables, context) => {
|
||||
// Invalidate tools list to trigger refetch
|
||||
queryClient.invalidateQueries([QueryKeys.tools]);
|
||||
queryClient.invalidateQueries([QueryKeys.mcpTools]);
|
||||
// queryClient.invalidateQueries([QueryKeys.mcpTools]);
|
||||
return options?.onSuccess?.(data, variables, context);
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,154 +1,8 @@
|
|||
import { Request, Response } from 'express';
|
||||
import { logger } from '@librechat/data-schemas';
|
||||
import { MCP } from 'librechat-data-provider';
|
||||
import { Response } from 'express';
|
||||
|
||||
interface MCPCreateRequest extends Request {
|
||||
body: {
|
||||
name: string;
|
||||
description: string;
|
||||
url: string;
|
||||
icon?: string;
|
||||
tools?: string[];
|
||||
trust: boolean;
|
||||
customHeaders?: Array<{
|
||||
id: string;
|
||||
name: string;
|
||||
value: string;
|
||||
}>;
|
||||
requestTimeout?: number;
|
||||
connectionTimeout?: number;
|
||||
};
|
||||
user?: {
|
||||
id: string;
|
||||
};
|
||||
}
|
||||
|
||||
export interface MCPCreateResponse {
|
||||
mcp_id: string;
|
||||
metadata: {
|
||||
name: string;
|
||||
description: string;
|
||||
url: string;
|
||||
icon?: string;
|
||||
tools?: string[];
|
||||
trust: boolean;
|
||||
customHeaders?: Array<{
|
||||
id: string;
|
||||
name: string;
|
||||
value: string;
|
||||
}>;
|
||||
requestTimeout?: number;
|
||||
connectionTimeout?: number;
|
||||
};
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
export interface MCPCreateError {
|
||||
error: string;
|
||||
message?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add a new tool/MCP to the system
|
||||
* @route POST /agents/tools/add
|
||||
* @param {object} req.body - Request body containing tool/MCP data
|
||||
* @param {string} req.body.name - Tool/MCP name
|
||||
* @param {string} req.body.description - Tool/MCP description
|
||||
* @param {string} req.body.url - Tool/MCP server URL
|
||||
* @param {string} [req.body.icon] - Tool/MCP icon (base64)
|
||||
* @param {string[]} [req.body.tools] - Available tools
|
||||
* @param {boolean} req.body.trust - Trust flag
|
||||
* @param {string[]} [req.body.customHeaders] - Custom headers
|
||||
* @param {string} [req.body.requestTimeout] - Request timeout
|
||||
* @param {string} [req.body.connectionTimeout] - Connection timeout
|
||||
* @returns {object} Created tool/MCP object
|
||||
*/
|
||||
export const addTool = async (req: MCPCreateRequest, res: Response) => {
|
||||
try {
|
||||
const {
|
||||
name,
|
||||
description,
|
||||
url,
|
||||
icon,
|
||||
tools,
|
||||
trust,
|
||||
customHeaders,
|
||||
requestTimeout,
|
||||
connectionTimeout,
|
||||
} = req.body;
|
||||
|
||||
// Log the raw request body for debugging
|
||||
logger.info('Raw request body: ' + JSON.stringify(req.body, null, 2));
|
||||
|
||||
// Log the incoming tool/MCP request for development
|
||||
const logData = {
|
||||
name,
|
||||
description,
|
||||
url,
|
||||
icon: icon ? 'base64_icon_provided' : 'no_icon',
|
||||
tools: tools || [],
|
||||
trust,
|
||||
customHeaders: customHeaders || [],
|
||||
timeouts: {
|
||||
requestTimeout: requestTimeout || 'default',
|
||||
connectionTimeout: connectionTimeout || 'default',
|
||||
},
|
||||
userId: req.user?.id,
|
||||
timestamp: new Date().toISOString(),
|
||||
};
|
||||
|
||||
logger.info('Add Tool/MCP Request: ' + JSON.stringify(logData, null, 2));
|
||||
|
||||
// Validate required fields
|
||||
if (!name || !description || !url) {
|
||||
return res.status(400).json({
|
||||
error: 'Missing required fields: name, description, and url are required',
|
||||
});
|
||||
}
|
||||
|
||||
// Validate URL format
|
||||
try {
|
||||
new URL(url);
|
||||
} catch {
|
||||
return res.status(400).json({
|
||||
error: 'Invalid URL format',
|
||||
});
|
||||
}
|
||||
|
||||
// Validate trust flag
|
||||
if (typeof trust !== 'boolean') {
|
||||
return res.status(400).json({
|
||||
error: 'Trust flag must be a boolean value',
|
||||
});
|
||||
}
|
||||
|
||||
// For now, return a mock successful response
|
||||
// TODO: Implement actual tool/MCP creation logic
|
||||
const mockTool = {
|
||||
mcp_id: `mcp-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
|
||||
metadata: {
|
||||
name,
|
||||
description,
|
||||
url,
|
||||
icon: icon || undefined,
|
||||
tools: tools || [],
|
||||
trust,
|
||||
customHeaders: customHeaders || [],
|
||||
requestTimeout,
|
||||
connectionTimeout,
|
||||
},
|
||||
created_at: new Date().toISOString(),
|
||||
updated_at: new Date().toISOString(),
|
||||
};
|
||||
|
||||
logger.info('Tool/MCP created successfully:', JSON.stringify(mockTool, null, 2));
|
||||
|
||||
res.status(201).json(mockTool);
|
||||
} catch (error) {
|
||||
logger.error('Error adding tool/MCP:', error);
|
||||
res.status(500).json({
|
||||
error: 'Internal server error while adding tool/MCP',
|
||||
message: error instanceof Error ? error.message : 'Unknown error',
|
||||
});
|
||||
}
|
||||
// just log the request
|
||||
export const addTool = (req: { body: MCP }, res: Response) => {
|
||||
console.log(JSON.stringify(req.body, null, 2));
|
||||
res.send('ok');
|
||||
};
|
||||
|
|
|
|||
|
|
@ -833,54 +833,11 @@ export const createMemory = (data: {
|
|||
return request.post(endpoints.memories(), data);
|
||||
};
|
||||
|
||||
export const createTool = (toolData: {
|
||||
name: string;
|
||||
description: string;
|
||||
metadata?: Record<string, unknown>;
|
||||
// MCP-specific fields
|
||||
url?: string;
|
||||
icon?: string;
|
||||
tools?: string[];
|
||||
trust?: boolean;
|
||||
customHeaders?: Array<{
|
||||
id: string;
|
||||
name: string;
|
||||
value: string;
|
||||
}>;
|
||||
requestTimeout?: number;
|
||||
connectionTimeout?: number;
|
||||
}): Promise<{
|
||||
id?: string;
|
||||
mcp_id?: string;
|
||||
type?: string;
|
||||
function?: {
|
||||
name: string;
|
||||
description: string;
|
||||
};
|
||||
metadata:
|
||||
| Record<string, unknown>
|
||||
| {
|
||||
name: string;
|
||||
description: string;
|
||||
url?: string;
|
||||
icon?: string;
|
||||
tools?: string[];
|
||||
trust?: boolean;
|
||||
customHeaders?: Array<{
|
||||
id: string;
|
||||
name: string;
|
||||
value: string;
|
||||
}>;
|
||||
requestTimeout?: number;
|
||||
connectionTimeout?: number;
|
||||
};
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}> => {
|
||||
export const createMCP = (mcp: ag.MCP): Promise<Record<string, unknown>> => {
|
||||
return request.post(
|
||||
endpoints.agents({
|
||||
path: 'tools/add',
|
||||
}),
|
||||
toolData,
|
||||
mcp,
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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,8 @@ export type AcceptTermsMutationOptions = MutationOptions<
|
|||
/* Tools */
|
||||
export type UpdatePluginAuthOptions = MutationOptions<types.TUser, types.TUpdateUserPlugins>;
|
||||
|
||||
export type CreateMCPMutationOptions = MutationOptions<Record<string, unknown>, MCP>;
|
||||
|
||||
export type ToolParamsMap = {
|
||||
[Tools.execute_code]: {
|
||||
lang: string;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue