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
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user