mirror of
https://github.com/danny-avila/LibreChat.git
synced 2026-02-04 00:31:50 +01:00
mcp example, mock i/o for client-to-server communications
This commit is contained in:
Danny Avila
parent
799f0e5810
commit
7251308244
9 changed files with 343 additions and 22 deletions
|
|
@ -6,6 +6,7 @@ import { useUpdateUserPluginsMutation } from 'librechat-data-provider/react-quer
|
|||
import type { TUpdateUserPlugins } from 'librechat-data-provider';
|
||||
import { Button, Input, Label } from '~/components/ui';
|
||||
import { useGetStartupConfig } from '~/data-provider';
|
||||
import { useAddToolMutation } from '~/data-provider/Tools';
|
||||
import MCPPanelSkeleton from './MCPPanelSkeleton';
|
||||
import { useToastContext } from '~/Providers';
|
||||
import { useLocalize } from '~/hooks';
|
||||
|
|
@ -17,6 +18,12 @@ interface ServerConfigWithVars {
|
|||
};
|
||||
}
|
||||
|
||||
interface AddToolFormData {
|
||||
name: string;
|
||||
description: string;
|
||||
type: 'function' | 'code_interpreter' | 'file_search';
|
||||
}
|
||||
|
||||
export default function MCPPanel() {
|
||||
const localize = useLocalize();
|
||||
const { showToast } = useToastContext();
|
||||
|
|
@ -24,6 +31,7 @@ export default function MCPPanel() {
|
|||
const [selectedServerNameForEditing, setSelectedServerNameForEditing] = useState<string | null>(
|
||||
null,
|
||||
);
|
||||
const [showAddToolForm, setShowAddToolForm] = useState(true);
|
||||
|
||||
const mcpServerDefinitions = useMemo(() => {
|
||||
if (!startupConfig?.mcpServers) {
|
||||
|
|
@ -87,19 +95,25 @@ export default function MCPPanel() {
|
|||
|
||||
const handleGoBackToList = () => {
|
||||
setSelectedServerNameForEditing(null);
|
||||
setShowAddToolForm(false);
|
||||
};
|
||||
|
||||
const handleShowAddToolForm = () => {
|
||||
setShowAddToolForm(true);
|
||||
setSelectedServerNameForEditing(null);
|
||||
};
|
||||
|
||||
if (startupConfigLoading) {
|
||||
return <MCPPanelSkeleton />;
|
||||
}
|
||||
|
||||
if (mcpServerDefinitions.length === 0) {
|
||||
return (
|
||||
<div className="p-4 text-center text-sm text-gray-500">
|
||||
{localize('com_sidepanel_mcp_no_servers_with_vars')}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
// if (mcpServerDefinitions.length === 0) {
|
||||
// return (
|
||||
// <div className="p-4 text-center text-sm text-gray-500">
|
||||
// {localize('com_sidepanel_mcp_no_servers_with_vars')}
|
||||
// </div>
|
||||
// );
|
||||
// }
|
||||
|
||||
if (selectedServerNameForEditing) {
|
||||
// Editing View
|
||||
|
|
@ -138,10 +152,32 @@ export default function MCPPanel() {
|
|||
/>
|
||||
</div>
|
||||
);
|
||||
} else if (showAddToolForm) {
|
||||
// Add Tool Form View
|
||||
return (
|
||||
<div className="h-auto max-w-full overflow-x-hidden p-3">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={handleGoBackToList}
|
||||
className="mb-3 flex items-center px-3 py-2 text-sm"
|
||||
>
|
||||
<ChevronLeft className="mr-1 h-4 w-4" />
|
||||
{localize('com_ui_back')}
|
||||
</Button>
|
||||
<h3 className="mb-3 text-lg font-medium">{localize('com_ui_add_tool')}</h3>
|
||||
<AddToolForm onCancel={handleGoBackToList} />
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
// Server List View
|
||||
return (
|
||||
<div className="h-auto max-w-full overflow-x-hidden p-3">
|
||||
<div className="mb-3 flex items-center justify-between">
|
||||
<h3 className="text-lg font-medium">{localize('com_ui_mcp_servers')}</h3>
|
||||
<Button variant="outline" onClick={handleShowAddToolForm} className="text-sm">
|
||||
{localize('com_ui_add_tool')}
|
||||
</Button>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
{mcpServerDefinitions.map((server) => (
|
||||
<Button
|
||||
|
|
@ -251,3 +287,131 @@ function MCPVariableEditor({ server, onSave, onRevoke, isSubmitting }: MCPVariab
|
|||
</form>
|
||||
);
|
||||
}
|
||||
|
||||
interface AddToolFormProps {
|
||||
onCancel: () => void;
|
||||
}
|
||||
|
||||
function AddToolForm({ onCancel }: AddToolFormProps) {
|
||||
const localize = useLocalize();
|
||||
const { showToast } = useToastContext();
|
||||
|
||||
const addToolMutation = useAddToolMutation({
|
||||
onSuccess: (data) => {
|
||||
showToast({
|
||||
message: localize('com_ui_tool_added_success', { '0': data.function?.name || 'Unknown' }),
|
||||
status: 'success',
|
||||
});
|
||||
onCancel();
|
||||
},
|
||||
onError: (error) => {
|
||||
console.error('Error adding tool:', error);
|
||||
showToast({
|
||||
message: localize('com_ui_tool_add_error'),
|
||||
status: 'error',
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const {
|
||||
control,
|
||||
handleSubmit,
|
||||
formState: { errors, isDirty },
|
||||
} = useForm<AddToolFormData>({
|
||||
defaultValues: {
|
||||
name: '',
|
||||
description: '',
|
||||
type: 'function',
|
||||
},
|
||||
});
|
||||
|
||||
const onFormSubmit = (data: AddToolFormData) => {
|
||||
addToolMutation.mutate(data);
|
||||
};
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit(onFormSubmit)} className="mb-4 mt-2 space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="tool-name" className="text-sm font-medium">
|
||||
{localize('com_ui_tool_name')}
|
||||
</Label>
|
||||
<Controller
|
||||
name="name"
|
||||
control={control}
|
||||
rules={{ required: localize('com_ui_tool_name_required') }}
|
||||
render={({ field }) => (
|
||||
<Input
|
||||
id="tool-name"
|
||||
type="text"
|
||||
{...field}
|
||||
placeholder={localize('com_ui_enter_tool_name')}
|
||||
className="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white sm:text-sm"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
{errors.name && <p className="text-xs text-red-500">{errors.name.message}</p>}
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="tool-description" className="text-sm font-medium">
|
||||
{localize('com_ui_description')}
|
||||
</Label>
|
||||
<Controller
|
||||
name="description"
|
||||
control={control}
|
||||
rules={{ required: localize('com_ui_description_required') }}
|
||||
render={({ field }) => (
|
||||
<Input
|
||||
id="tool-description"
|
||||
type="text"
|
||||
{...field}
|
||||
placeholder={localize('com_ui_enter_description')}
|
||||
className="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white sm:text-sm"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
{errors.description && <p className="text-xs text-red-500">{errors.description.message}</p>}
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="tool-type" className="text-sm font-medium">
|
||||
{localize('com_ui_tool_type')}
|
||||
</Label>
|
||||
<Controller
|
||||
name="type"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<select
|
||||
id="tool-type"
|
||||
{...field}
|
||||
className="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white sm:text-sm"
|
||||
>
|
||||
<option value="function">{localize('com_ui_function')}</option>
|
||||
<option value="code_interpreter">{localize('com_ui_code_interpreter')}</option>
|
||||
<option value="file_search">{localize('com_ui_file_search')}</option>
|
||||
</select>
|
||||
)}
|
||||
/>
|
||||
{errors.type && <p className="text-xs text-red-500">{errors.type.message}</p>}
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-2 pt-2">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={onCancel}
|
||||
disabled={addToolMutation.isLoading}
|
||||
>
|
||||
{localize('com_ui_cancel')}
|
||||
</Button>
|
||||
<Button
|
||||
type="submit"
|
||||
className="bg-green-500 text-white hover:bg-green-600"
|
||||
disabled={addToolMutation.isLoading || !isDirty}
|
||||
>
|
||||
{addToolMutation.isLoading ? localize('com_ui_saving') : localize('com_ui_save')}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -40,3 +40,44 @@ export const useToolCallMutation = <T extends t.ToolId>(
|
|||
},
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* Interface for creating a new tool
|
||||
*/
|
||||
interface CreateToolData {
|
||||
name: string;
|
||||
description: string;
|
||||
type: 'function' | 'code_interpreter' | 'file_search';
|
||||
metadata?: Record<string, unknown>;
|
||||
}
|
||||
|
||||
/**
|
||||
* Mutation hook for adding a new tool to the system
|
||||
* Note: Requires corresponding backend implementation of dataService.createTool
|
||||
*/
|
||||
export const useAddToolMutation = (
|
||||
// options?:
|
||||
// {
|
||||
// onMutate?: (variables: CreateToolData) => void | Promise<unknown>;
|
||||
// onError?: (error: Error, variables: CreateToolData, context: unknown) => void;
|
||||
// onSuccess?: (data: t.Tool, variables: CreateToolData, context: unknown) => void;
|
||||
// }
|
||||
options?: t.MutationOptions<Record<string, unknown>, CreateToolData>,
|
||||
): UseMutationResult<Record<string, unknown>, Error, CreateToolData> => {
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
return useMutation(
|
||||
(toolData: CreateToolData) => {
|
||||
return dataService.createTool(toolData);
|
||||
},
|
||||
{
|
||||
onMutate: (variables) => options?.onMutate?.(variables),
|
||||
onError: (error, variables, context) => options?.onError?.(error, variables, context),
|
||||
onSuccess: (data, variables, context) => {
|
||||
// Invalidate tools list to trigger refetch
|
||||
queryClient.invalidateQueries([QueryKeys.tools]);
|
||||
return options?.onSuccess?.(data, variables, context);
|
||||
},
|
||||
},
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -194,7 +194,7 @@ export const useConversationTagsQuery = (
|
|||
/**
|
||||
* Hook for getting all available tools for Assistants
|
||||
*/
|
||||
export const useAvailableToolsQuery = <TData = t.TPlugin[]>(
|
||||
export const useAvailableToolsQuery = <TData = t.TPlugin[]>( // <-- this one
|
||||
endpoint: t.AssistantsEndpoint | EModelEndpoint.agents,
|
||||
config?: UseQueryOptions<t.TPlugin[], unknown, TData>,
|
||||
): QueryObserverResult<TData> => {
|
||||
|
|
|
|||
|
|
@ -152,20 +152,20 @@ export default function useSideNavLinks({
|
|||
});
|
||||
}
|
||||
|
||||
if (
|
||||
startupConfig?.mcpServers &&
|
||||
Object.values(startupConfig.mcpServers).some(
|
||||
(server) => server.customUserVars && Object.keys(server.customUserVars).length > 0,
|
||||
)
|
||||
) {
|
||||
links.push({
|
||||
title: 'com_nav_setting_mcp',
|
||||
label: '',
|
||||
icon: MCPIcon,
|
||||
id: 'mcp-settings',
|
||||
Component: MCPPanel,
|
||||
});
|
||||
}
|
||||
// if (
|
||||
// startupConfig?.mcpServers &&
|
||||
// Object.values(startupConfig.mcpServers).some(
|
||||
// (server) => server.customUserVars && Object.keys(server.customUserVars).length > 0,
|
||||
// )
|
||||
// ) {
|
||||
links.push({
|
||||
title: 'com_nav_setting_mcp',
|
||||
label: '',
|
||||
icon: MCPIcon,
|
||||
id: 'mcp-settings',
|
||||
Component: MCPPanel,
|
||||
});
|
||||
// }
|
||||
|
||||
links.push({
|
||||
title: 'com_sidepanel_hide_panel',
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue