feat: MCP Server plugin (Task 5.16) - expose LeoCRM tools to external AI clients
- New plugin app/plugins/builtins/mcp_server/ with 9 MCP tools
- Tools: search_contacts, get_contact, create_contact, list_calendar_entries,
create_calendar_entry, list_emails, send_email, list_files, upload_file
- Routes: GET /api/v1/mcp/tools, POST /api/v1/mcp/tools/{name}/execute, GET /api/v1/mcp/config
- API-token auth via session + RBAC (mcp:read, mcp:write)
- Frontend: mcp.ts API client with React Query hooks
- Frontend: SettingsMcp.tsx settings page with tool listing and execution
- i18n: de.json and en.json updated with MCP entries
- Tests: 7 tests covering tool listing, config, execution, auth, schema validation
This commit is contained in:
Agent Zero
@@ -0,0 +1,104 @@
|
||||
/**
|
||||
* MCP Server plugin API client.
|
||||
*
|
||||
* Exposes LeoCRM tools to external MCP clients (Claude Desktop, etc.).
|
||||
*/
|
||||
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { apiGet, apiPost } from './client';
|
||||
|
||||
// ─── Types ─────────────────────────────────────────────────────────────────
|
||||
|
||||
export interface McpToolParameter {
|
||||
name: string;
|
||||
type: string;
|
||||
description: string;
|
||||
required: boolean;
|
||||
default?: unknown;
|
||||
}
|
||||
|
||||
export interface McpToolDefinition {
|
||||
name: string;
|
||||
description: string;
|
||||
category: string;
|
||||
parameters: McpToolParameter[];
|
||||
required_permission: string | null;
|
||||
}
|
||||
|
||||
export interface McpToolListResponse {
|
||||
tools: McpToolDefinition[];
|
||||
count: number;
|
||||
}
|
||||
|
||||
export interface McpToolExecuteRequest {
|
||||
arguments: Record<string, unknown>;
|
||||
}
|
||||
|
||||
export interface McpToolExecuteResponse {
|
||||
tool: string;
|
||||
success: boolean;
|
||||
result: unknown;
|
||||
error: string | null;
|
||||
}
|
||||
|
||||
export interface McpServerConfig {
|
||||
server_name: string;
|
||||
server_version: string;
|
||||
protocol_version: string;
|
||||
base_url: string;
|
||||
auth_method: string;
|
||||
available_tools: string[];
|
||||
}
|
||||
|
||||
// ─── API Functions ─────────────────────────────────────────────────────────
|
||||
|
||||
export function fetchMcpTools(): Promise<McpToolListResponse> {
|
||||
return apiGet<McpToolListResponse>('/mcp/tools');
|
||||
}
|
||||
|
||||
export function executeMcpTool(
|
||||
toolName: string,
|
||||
args: Record<string, unknown>
|
||||
): Promise<McpToolExecuteResponse> {
|
||||
return apiPost<McpToolExecuteResponse>(`/mcp/tools/${toolName}/execute`, {
|
||||
arguments: args,
|
||||
});
|
||||
}
|
||||
|
||||
export function fetchMcpConfig(): Promise<McpServerConfig> {
|
||||
return apiGet<McpServerConfig>('/mcp/config');
|
||||
}
|
||||
|
||||
// ─── Hooks ─────────────────────────────────────────────────────────────────
|
||||
|
||||
export function useMcpTools() {
|
||||
return useQuery({
|
||||
queryKey: ['mcp', 'tools'],
|
||||
queryFn: fetchMcpTools,
|
||||
staleTime: 60 * 1000,
|
||||
});
|
||||
}
|
||||
|
||||
export function useMcpConfig() {
|
||||
return useQuery({
|
||||
queryKey: ['mcp', 'config'],
|
||||
queryFn: fetchMcpConfig,
|
||||
staleTime: 60 * 1000,
|
||||
});
|
||||
}
|
||||
|
||||
export function useExecuteMcpTool() {
|
||||
const queryClient = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn: ({
|
||||
toolName,
|
||||
args,
|
||||
}: {
|
||||
toolName: string;
|
||||
args: Record<string, unknown>;
|
||||
}) => executeMcpTool(toolName, args),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['mcp'] });
|
||||
},
|
||||
});
|
||||
}
|
||||
@@ -16,7 +16,8 @@
|
||||
"users": "Benutzer",
|
||||
"auditLog": "Audit-Log",
|
||||
"settings": "Einstellungen",
|
||||
"aiAssistant": "KI Assistent"
|
||||
"aiAssistant": "KI Assistent",
|
||||
"mcpSettings": "MCP Einstellungen"
|
||||
},
|
||||
"auth": {
|
||||
"login": "Anmelden",
|
||||
@@ -284,7 +285,8 @@
|
||||
"livePreview": "Live-Vorschau",
|
||||
"livePreviewDescription": "So sieht die Anwendung mit dem aktuellen Theme aus",
|
||||
"resetTheme": "Zurücksetzen",
|
||||
"saveTheme": "Theme speichern"
|
||||
"saveTheme": "Theme speichern",
|
||||
"mcp": "MCP"
|
||||
},
|
||||
"auditLog": {
|
||||
"title": "Audit-Log",
|
||||
@@ -918,5 +920,52 @@
|
||||
"tab": "Tab wechseln",
|
||||
"settings": "Einstellungen ändern"
|
||||
}
|
||||
},
|
||||
"mcp": {
|
||||
"title": "MCP Server & Client",
|
||||
"server": {
|
||||
"title": "MCP Server",
|
||||
"description": "LeoCRM als MCP-Server für externe KI-Clients",
|
||||
"tools": "Verfügbare Tools",
|
||||
"toolCount": "Anzahl Tools",
|
||||
"toolName": "Tool",
|
||||
"toolDescription": "Beschreibung",
|
||||
"toolCategory": "Kategorie",
|
||||
"toolPermission": "Berechtigung",
|
||||
"execute": "Ausführen",
|
||||
"executeTool": "Tool ausführen",
|
||||
"arguments": "Argumente (JSON)",
|
||||
"result": "Ergebnis",
|
||||
"error": "Fehler",
|
||||
"success": "Erfolgreich",
|
||||
"config": "Server-Konfiguration",
|
||||
"serverName": "Server-Name",
|
||||
"serverVersion": "Version",
|
||||
"protocolVersion": "Protokoll-Version",
|
||||
"authMethod": "Authentifizierung",
|
||||
"availableTools": "Verfügbare Tools",
|
||||
"noTools": "Keine Tools verfügbar"
|
||||
},
|
||||
"client": {
|
||||
"title": "MCP Client",
|
||||
"description": "Beschreibung",
|
||||
"servers": "Server-Konfigurationen",
|
||||
"addServer": "Server hinzufügen",
|
||||
"editServer": "Server bearbeiten",
|
||||
"deleteServer": "Server löschen",
|
||||
"serverName": "Name",
|
||||
"serverUrl": "URL",
|
||||
"apiToken": "API-Token",
|
||||
"enabled": "Aktiviert",
|
||||
"lastConnected": "Zuletzt verbunden",
|
||||
"noServers": "Keine Server konfiguriert",
|
||||
"deleteConfirm": "Möchten Sie diesen Server wirklich löschen?",
|
||||
"serverCreated": "Server erfolgreich erstellt.",
|
||||
"serverUpdated": "Server erfolgreich aktualisiert.",
|
||||
"serverDeleted": "Server erfolgreich gelöscht.",
|
||||
"viewTools": "Tools anzeigen",
|
||||
"tools": "Tools",
|
||||
"noTools": "Keine Tools verfügbar"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -16,7 +16,8 @@
|
||||
"users": "Users",
|
||||
"auditLog": "Audit Log",
|
||||
"settings": "Settings",
|
||||
"aiAssistant": "AI Assistant"
|
||||
"aiAssistant": "AI Assistant",
|
||||
"mcpSettings": "MCP Settings"
|
||||
},
|
||||
"auth": {
|
||||
"login": "Sign In",
|
||||
@@ -284,7 +285,8 @@
|
||||
"livePreview": "Live Preview",
|
||||
"livePreviewDescription": "This is how the app looks with the current theme",
|
||||
"resetTheme": "Reset",
|
||||
"saveTheme": "Save theme"
|
||||
"saveTheme": "Save theme",
|
||||
"mcp": "MCP"
|
||||
},
|
||||
"auditLog": {
|
||||
"title": "Audit Log",
|
||||
@@ -918,5 +920,52 @@
|
||||
"tab": "Switch tab",
|
||||
"settings": "Change settings"
|
||||
}
|
||||
},
|
||||
"mcp": {
|
||||
"title": "MCP Server & Client",
|
||||
"server": {
|
||||
"title": "MCP Server",
|
||||
"description": "LeoCRM as MCP Server for external AI clients",
|
||||
"tools": "Available Tools",
|
||||
"toolCount": "Tool Count",
|
||||
"toolName": "Tool",
|
||||
"toolDescription": "Description",
|
||||
"toolCategory": "Category",
|
||||
"toolPermission": "Permission",
|
||||
"execute": "Execute",
|
||||
"executeTool": "Execute Tool",
|
||||
"arguments": "Arguments (JSON)",
|
||||
"result": "Result",
|
||||
"error": "Error",
|
||||
"success": "Success",
|
||||
"config": "Server Configuration",
|
||||
"serverName": "Server Name",
|
||||
"serverVersion": "Version",
|
||||
"protocolVersion": "Protocol Version",
|
||||
"authMethod": "Authentication",
|
||||
"availableTools": "Available Tools",
|
||||
"noTools": "No tools available"
|
||||
},
|
||||
"client": {
|
||||
"title": "MCP Client",
|
||||
"description": "Description",
|
||||
"servers": "Server Configurations",
|
||||
"addServer": "Add Server",
|
||||
"editServer": "Edit Server",
|
||||
"deleteServer": "Delete Server",
|
||||
"serverName": "Name",
|
||||
"serverUrl": "URL",
|
||||
"apiToken": "API Token",
|
||||
"enabled": "Enabled",
|
||||
"lastConnected": "Last Connected",
|
||||
"noServers": "No servers configured",
|
||||
"deleteConfirm": "Are you sure you want to delete this server?",
|
||||
"serverCreated": "Server created successfully.",
|
||||
"serverUpdated": "Server updated successfully.",
|
||||
"serverDeleted": "Server deleted successfully.",
|
||||
"viewTools": "View Tools",
|
||||
"tools": "Tools",
|
||||
"noTools": "No tools available"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -22,6 +22,7 @@ export function SettingsPage() {
|
||||
{ to: '/settings/ai-proactive', label: 'Proaktive KI', icon: '\ud83e\udd16' },
|
||||
{ to: '/settings/notifications', label: t('settings.notifications'), icon: '\ud83d\udd14' },
|
||||
{ to: '/settings/theme', label: t('settings.theme', 'Theme'), icon: '\ud83c\udfa8' },
|
||||
{ to: '/settings/mcp', label: t('settings.mcp', 'MCP'), icon: '\ud83d\udd27' },
|
||||
];
|
||||
|
||||
const existingPaths = new Set(hardcodedNavItems.map(item => item.to));
|
||||
|
||||
@@ -0,0 +1,268 @@
|
||||
import React, { useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useMcpTools, useMcpConfig, useExecuteMcpTool } from '@/api/mcp';
|
||||
import {
|
||||
useMcpServers,
|
||||
useCreateMcpServer,
|
||||
useUpdateMcpServer,
|
||||
useDeleteMcpServer,
|
||||
useMcpServerTools,
|
||||
type McpServerConfigEntry,
|
||||
type McpServerConfigCreate,
|
||||
} from '@/api/mcpClient';
|
||||
|
||||
export function SettingsMcpPage() {
|
||||
const { t } = useTranslation();
|
||||
const { data: toolsData, isLoading: toolsLoading } = useMcpTools();
|
||||
const { data: config } = useMcpConfig();
|
||||
const executeMutation = useExecuteMcpTool();
|
||||
|
||||
const { data: servers, isLoading: serversLoading } = useMcpServers();
|
||||
const createMutation = useCreateMcpServer();
|
||||
const updateMutation = useUpdateMcpServer();
|
||||
const deleteMutation = useDeleteMcpServer();
|
||||
|
||||
const [showAddForm, setShowAddForm] = useState(false);
|
||||
const [editingServer, setEditingServer] = useState<McpServerConfigEntry | null>(null);
|
||||
const [selectedServerForTools, setSelectedServerForTools] = useState<string | null>(null);
|
||||
const [formData, setFormData] = useState<McpServerConfigCreate>({ name: '', url: '', api_token: '', enabled: true, description: '' });
|
||||
const [executeToolName, setExecuteToolName] = useState('');
|
||||
const [executeArgs, setExecuteArgs] = useState('{}');
|
||||
const [executeResult, setExecuteResult] = useState<string | null>(null);
|
||||
|
||||
const { data: serverTools } = useMcpServerTools(selectedServerForTools);
|
||||
|
||||
const handleAddServer = async () => {
|
||||
try {
|
||||
await createMutation.mutateAsync(formData);
|
||||
setShowAddForm(false);
|
||||
setFormData({ name: '', url: '', api_token: '', enabled: true, description: '' });
|
||||
} catch { /* error handled by mutation */ }
|
||||
};
|
||||
|
||||
const handleUpdateServer = async () => {
|
||||
if (!editingServer) return;
|
||||
try {
|
||||
await updateMutation.mutateAsync({
|
||||
id: editingServer.id,
|
||||
payload: { name: formData.name, url: formData.url, api_token: formData.api_token, enabled: formData.enabled, description: formData.description },
|
||||
});
|
||||
setEditingServer(null);
|
||||
setShowAddForm(false);
|
||||
setFormData({ name: '', url: '', api_token: '', enabled: true, description: '' });
|
||||
} catch { /* error handled by mutation */ }
|
||||
};
|
||||
|
||||
const handleDeleteServer = async (id: string) => {
|
||||
if (window.confirm(t('mcp.client.deleteConfirm'))) {
|
||||
await deleteMutation.mutateAsync(id);
|
||||
}
|
||||
};
|
||||
|
||||
const handleEditServer = (server: McpServerConfigEntry) => {
|
||||
setEditingServer(server);
|
||||
setFormData({ name: server.name, url: server.url, api_token: server.api_token || '', enabled: server.enabled, description: server.description || '' });
|
||||
setShowAddForm(true);
|
||||
};
|
||||
|
||||
const handleExecuteTool = async () => {
|
||||
if (!executeToolName) return;
|
||||
try {
|
||||
const args = JSON.parse(executeArgs);
|
||||
const result = await executeMutation.mutateAsync({ toolName: executeToolName, args });
|
||||
setExecuteResult(JSON.stringify(result, null, 2));
|
||||
} catch (e) {
|
||||
setExecuteResult(`Error: ${e}`);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-8" data-testid="settings-mcp-page">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-secondary-900">{t('mcp.title')}</h2>
|
||||
</div>
|
||||
|
||||
{/* MCP Server Section */}
|
||||
<section className="bg-white rounded-lg border border-secondary-200 p-6">
|
||||
<h3 className="text-lg font-semibold mb-2">{t('mcp.server.title')}</h3>
|
||||
<p className="text-sm text-secondary-600 mb-4">{t('mcp.server.description')}</p>
|
||||
|
||||
{config && (
|
||||
<div className="mb-4 p-3 bg-secondary-50 rounded text-sm">
|
||||
<div><strong>{t('mcp.server.serverName')}:</strong> {config.server_name}</div>
|
||||
<div><strong>{t('mcp.server.serverVersion')}:</strong> {config.server_version}</div>
|
||||
<div><strong>{t('mcp.server.protocolVersion')}:</strong> {config.protocol_version}</div>
|
||||
<div><strong>{t('mcp.server.authMethod')}:</strong> {config.auth_method}</div>
|
||||
<div><strong>{t('mcp.server.availableTools')}:</strong> {config.available_tools.join(', ')}</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{toolsLoading ? (
|
||||
<div className="text-secondary-500">Loading...</div>
|
||||
) : toolsData && toolsData.tools.length > 0 ? (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="min-w-full text-sm">
|
||||
<thead>
|
||||
<tr className="border-b border-secondary-200 text-left">
|
||||
<th className="py-2 pr-4">{t('mcp.server.toolName')}</th>
|
||||
<th className="py-2 pr-4">{t('mcp.server.toolDescription')}</th>
|
||||
<th className="py-2 pr-4">{t('mcp.server.toolCategory')}</th>
|
||||
<th className="py-2 pr-4">{t('mcp.server.toolPermission')}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{toolsData.tools.map((tool) => (
|
||||
<tr key={tool.name} className="border-b border-secondary-100">
|
||||
<td className="py-2 pr-4 font-mono text-xs">{tool.name}</td>
|
||||
<td className="py-2 pr-4">{tool.description}</td>
|
||||
<td className="py-2 pr-4"><span className="px-2 py-0.5 bg-primary-100 text-primary-700 rounded text-xs">{tool.category}</span></td>
|
||||
<td className="py-2 pr-4 font-mono text-xs">{tool.required_permission || '-'}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-secondary-500 text-sm">{t('mcp.server.noTools')}</div>
|
||||
)}
|
||||
|
||||
{/* Tool Execution */}
|
||||
<div className="mt-6 pt-4 border-t border-secondary-200">
|
||||
<h4 className="font-medium mb-2">{t('mcp.server.executeTool')}</h4>
|
||||
<div className="flex gap-2 items-start">
|
||||
<select
|
||||
value={executeToolName}
|
||||
onChange={(e) => setExecuteToolName(e.target.value)}
|
||||
className="border border-secondary-300 rounded px-3 py-1.5 text-sm"
|
||||
>
|
||||
<option value="">-- Select --</option>
|
||||
{toolsData?.tools.map((tool) => (
|
||||
<option key={tool.name} value={tool.name}>{tool.name}</option>
|
||||
))}
|
||||
</select>
|
||||
<input
|
||||
type="text"
|
||||
value={executeArgs}
|
||||
onChange={(e) => setExecuteArgs(e.target.value)}
|
||||
placeholder={t('mcp.server.arguments')}
|
||||
className="flex-1 border border-secondary-300 rounded px-3 py-1.5 text-sm font-mono"
|
||||
/>
|
||||
<button
|
||||
onClick={handleExecuteTool}
|
||||
disabled={!executeToolName || executeMutation.isPending}
|
||||
className="px-4 py-1.5 bg-primary-600 text-white rounded text-sm hover:bg-primary-700 disabled:opacity-50"
|
||||
>
|
||||
{t('mcp.server.execute')}
|
||||
</button>
|
||||
</div>
|
||||
{executeResult && (
|
||||
<pre className="mt-2 p-3 bg-secondary-900 text-secondary-100 rounded text-xs overflow-x-auto max-h-60">{executeResult}</pre>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* MCP Client Section */}
|
||||
<section className="bg-white rounded-lg border border-secondary-200 p-6">
|
||||
<div className="flex justify-between items-center mb-2">
|
||||
<h3 className="text-lg font-semibold">{t('mcp.client.title')}</h3>
|
||||
<button
|
||||
onClick={() => { setShowAddForm(!showAddForm); setEditingServer(null); setFormData({ name: '', url: '', api_token: '', enabled: true, description: '' }); }}
|
||||
className="px-3 py-1.5 bg-primary-600 text-white rounded text-sm hover:bg-primary-700"
|
||||
>
|
||||
{t('mcp.client.addServer')}
|
||||
</button>
|
||||
</div>
|
||||
<p className="text-sm text-secondary-600 mb-4">{t('mcp.client.description')}</p>
|
||||
|
||||
{showAddForm && (
|
||||
<div className="mb-4 p-4 border border-secondary-200 rounded space-y-3">
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1">{t('mcp.client.serverName')}</label>
|
||||
<input type="text" value={formData.name} onChange={(e) => setFormData({ ...formData, name: e.target.value })} className="w-full border border-secondary-300 rounded px-3 py-1.5 text-sm" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1">{t('mcp.client.serverUrl')}</label>
|
||||
<input type="text" value={formData.url} onChange={(e) => setFormData({ ...formData, url: e.target.value })} className="w-full border border-secondary-300 rounded px-3 py-1.5 text-sm" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1">{t('mcp.client.apiToken')}</label>
|
||||
<input type="password" value={formData.api_token || ''} onChange={(e) => setFormData({ ...formData, api_token: e.target.value })} className="w-full border border-secondary-300 rounded px-3 py-1.5 text-sm" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1">{t('mcp.client.description')}</label>
|
||||
<input type="text" value={formData.description || ''} onChange={(e) => setFormData({ ...formData, description: e.target.value })} className="w-full border border-secondary-300 rounded px-3 py-1.5 text-sm" />
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<input type="checkbox" id="mcp-enabled" checked={formData.enabled} onChange={(e) => setFormData({ ...formData, enabled: e.target.checked })} />
|
||||
<label htmlFor="mcp-enabled" className="text-sm">{t('mcp.client.enabled')}</label>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<button onClick={editingServer ? handleUpdateServer : handleAddServer} className="px-4 py-1.5 bg-primary-600 text-white rounded text-sm hover:bg-primary-700">
|
||||
{editingServer ? t('mcp.client.editServer') : t('mcp.client.addServer')}
|
||||
</button>
|
||||
<button onClick={() => { setShowAddForm(false); setEditingServer(null); }} className="px-4 py-1.5 border border-secondary-300 rounded text-sm hover:bg-secondary-100">
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{serversLoading ? (
|
||||
<div className="text-secondary-500">Loading...</div>
|
||||
) : servers && servers.length > 0 ? (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="min-w-full text-sm">
|
||||
<thead>
|
||||
<tr className="border-b border-secondary-200 text-left">
|
||||
<th className="py-2 pr-4">{t('mcp.client.serverName')}</th>
|
||||
<th className="py-2 pr-4">{t('mcp.client.serverUrl')}</th>
|
||||
<th className="py-2 pr-4">{t('mcp.client.enabled')}</th>
|
||||
<th className="py-2 pr-4">{t('mcp.client.lastConnected')}</th>
|
||||
<th className="py-2 pr-4">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{servers.map((server) => (
|
||||
<tr key={server.id} className="border-b border-secondary-100">
|
||||
<td className="py-2 pr-4 font-medium">{server.name}</td>
|
||||
<td className="py-2 pr-4 font-mono text-xs">{server.url}</td>
|
||||
<td className="py-2 pr-4">
|
||||
<span className={`px-2 py-0.5 rounded text-xs ${server.enabled ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'}`}>
|
||||
{server.enabled ? '✓' : '✗'}
|
||||
</span>
|
||||
</td>
|
||||
<td className="py-2 pr-4 text-xs text-secondary-500">{server.last_connected_at || '-'}</td>
|
||||
<td className="py-2 pr-4">
|
||||
<div className="flex gap-2">
|
||||
<button onClick={() => handleEditServer(server)} className="text-xs text-primary-600 hover:underline">{t('mcp.client.editServer')}</button>
|
||||
<button onClick={() => setSelectedServerForTools(selectedServerForTools === server.id ? null : server.id)} className="text-xs text-primary-600 hover:underline">{t('mcp.client.viewTools')}</button>
|
||||
<button onClick={() => handleDeleteServer(server.id)} className="text-xs text-red-600 hover:underline">{t('mcp.client.deleteServer')}</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-secondary-500 text-sm">{t('mcp.client.noServers')}</div>
|
||||
)}
|
||||
|
||||
{selectedServerForTools && serverTools && (
|
||||
<div className="mt-4 p-3 bg-secondary-50 rounded">
|
||||
<h4 className="font-medium text-sm mb-2">{t('mcp.client.tools')} ({serverTools.count})</h4>
|
||||
{serverTools.tools.length > 0 ? (
|
||||
<ul className="text-xs space-y-1">
|
||||
{serverTools.tools.map((tool) => (
|
||||
<li key={tool.name} className="font-mono"><strong>{tool.name}</strong>: {tool.description}</li>
|
||||
))}
|
||||
</ul>
|
||||
) : (
|
||||
<span className="text-xs text-secondary-500">{t('mcp.client.noTools')}</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -35,6 +35,7 @@ const AIAssistantPage = React.lazy(() => import('@/pages/AIAssistant').then(m =>
|
||||
const AISettingsPage = React.lazy(() => import('@/pages/AISettings').then(m => ({ default: m.AISettingsPage })));
|
||||
const ProactiveAISettings = React.lazy(() => import('@/pages/ProactiveAISettings').then(m => ({ default: m.ProactiveAISettings })));
|
||||
const SettingsThemePage = React.lazy(() => import('@/pages/SettingsTheme').then(m => ({ default: m.SettingsThemePage })));
|
||||
const SettingsMcpPage = React.lazy(() => import('@/pages/SettingsMcp').then(m => ({ default: m.SettingsMcpPage })));
|
||||
const AutomationDashboardPage = React.lazy(() => import('@/pages/AutomationDashboard').then(m => ({ default: m.AutomationDashboardPage })));
|
||||
const AgentDashboardPage = React.lazy(() => import('@/pages/AgentDashboard').then(m => ({ default: m.AgentDashboardPage })));
|
||||
const AutomationSettingsPage = React.lazy(() => import('@/pages/AutomationSettings').then(m => ({ default: m.AutomationSettingsPage })));
|
||||
@@ -107,6 +108,7 @@ const router = createBrowserRouter([
|
||||
{ path: 'ai-proactive', element: withSuspense(<ProactiveAISettings />) },
|
||||
{ path: 'theme', element: withSuspense(<SettingsThemePage />) },
|
||||
{ path: 'automation', element: withSuspense(<AutomationSettingsPage />) },
|
||||
{ path: 'mcp', element: withSuspense(<SettingsMcpPage />) },
|
||||
{ path: '*', element: <PluginRouteRenderer /> },
|
||||
],
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user