mirror of
https://github.com/samanhappy/mcphub.git
synced 2025-12-24 02:39:19 -05:00
feat: introduce cloud server market (#260)
This commit is contained in:
samanhappy
@@ -12,6 +12,7 @@ import GroupsPage from './pages/GroupsPage';
|
|||||||
import UsersPage from './pages/UsersPage';
|
import UsersPage from './pages/UsersPage';
|
||||||
import SettingsPage from './pages/SettingsPage';
|
import SettingsPage from './pages/SettingsPage';
|
||||||
import MarketPage from './pages/MarketPage';
|
import MarketPage from './pages/MarketPage';
|
||||||
|
import CloudPage from './pages/CloudPage';
|
||||||
import LogsPage from './pages/LogsPage';
|
import LogsPage from './pages/LogsPage';
|
||||||
import { getBasePath } from './utils/runtime';
|
import { getBasePath } from './utils/runtime';
|
||||||
|
|
||||||
@@ -35,6 +36,8 @@ function App() {
|
|||||||
<Route path="/users" element={<UsersPage />} />
|
<Route path="/users" element={<UsersPage />} />
|
||||||
<Route path="/market" element={<MarketPage />} />
|
<Route path="/market" element={<MarketPage />} />
|
||||||
<Route path="/market/:serverName" element={<MarketPage />} />
|
<Route path="/market/:serverName" element={<MarketPage />} />
|
||||||
|
<Route path="/cloud" element={<CloudPage />} />
|
||||||
|
<Route path="/cloud/:serverName" element={<CloudPage />} />
|
||||||
<Route path="/logs" element={<LogsPage />} />
|
<Route path="/logs" element={<LogsPage />} />
|
||||||
<Route path="/settings" element={<SettingsPage />} />
|
<Route path="/settings" element={<SettingsPage />} />
|
||||||
</Route>
|
</Route>
|
||||||
|
|||||||
144
frontend/src/components/CloudServerCard.tsx
Normal file
144
frontend/src/components/CloudServerCard.tsx
Normal file
@@ -0,0 +1,144 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import { CloudServer } from '@/types';
|
||||||
|
|
||||||
|
interface CloudServerCardProps {
|
||||||
|
server: CloudServer;
|
||||||
|
onClick: (server: CloudServer) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const CloudServerCard: React.FC<CloudServerCardProps> = ({ server, onClick }) => {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
|
||||||
|
const handleClick = () => {
|
||||||
|
onClick(server);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Extract a brief description from content if description is too long
|
||||||
|
const getDisplayDescription = () => {
|
||||||
|
if (server.description && server.description.length <= 150) {
|
||||||
|
return server.description;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Try to extract a summary from content
|
||||||
|
if (server.content) {
|
||||||
|
const lines = server.content.split('\n').filter(line => line.trim());
|
||||||
|
for (const line of lines) {
|
||||||
|
if (line.length > 50 && line.length <= 150) {
|
||||||
|
return line;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return server.description ?
|
||||||
|
server.description.slice(0, 150) + '...' :
|
||||||
|
t('cloud.noDescription');
|
||||||
|
};
|
||||||
|
|
||||||
|
// Format date for display
|
||||||
|
const formatDate = (dateString: string) => {
|
||||||
|
try {
|
||||||
|
const date = new Date(dateString);
|
||||||
|
const year = date.getFullYear();
|
||||||
|
const month = (date.getMonth() + 1).toString().padStart(2, '0');
|
||||||
|
const day = date.getDate().toString().padStart(2, '0');
|
||||||
|
return `${year}/${month}/${day}`;
|
||||||
|
} catch {
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Get initials for avatar
|
||||||
|
const getAuthorInitials = (name: string) => {
|
||||||
|
return name
|
||||||
|
.split(' ')
|
||||||
|
.map(word => word.charAt(0))
|
||||||
|
.join('')
|
||||||
|
.toUpperCase()
|
||||||
|
.slice(0, 2);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className="bg-white border border-gray-200 rounded-xl p-6 hover:shadow-lg hover:border-blue-400 hover:-translate-y-1 transition-all duration-300 cursor-pointer group relative overflow-hidden h-full flex flex-col"
|
||||||
|
onClick={handleClick}
|
||||||
|
>
|
||||||
|
{/* Background gradient overlay on hover */}
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-br from-blue-50/0 to-purple-50/0 group-hover:from-blue-50/30 group-hover:to-purple-50/30 transition-all duration-300 pointer-events-none" />
|
||||||
|
|
||||||
|
{/* Server Header */}
|
||||||
|
<div className="relative z-10 flex-1 flex flex-col">
|
||||||
|
<div className="flex items-start justify-between mb-4">
|
||||||
|
<div className="flex-1">
|
||||||
|
<h3 className="text-xl font-bold text-gray-900 group-hover:text-blue-600 transition-colors duration-200 mb-2 line-clamp-2">
|
||||||
|
{server.title || server.name}
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
{/* Author Section */}
|
||||||
|
<div className="flex items-center space-x-3 mb-3">
|
||||||
|
<div className="w-8 h-8 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full flex items-center justify-center text-white text-sm font-semibold">
|
||||||
|
{getAuthorInitials(server.author_name)}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-sm font-medium text-gray-700">{server.author_name}</p>
|
||||||
|
{server.updated_at && (
|
||||||
|
<p className="text-xs text-gray-500">
|
||||||
|
{t('cloud.updated')} {formatDate(server.updated_at)}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Server Type Badge */}
|
||||||
|
<div className="flex flex-col items-end space-y-2">
|
||||||
|
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
|
||||||
|
MCP Server
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Description */}
|
||||||
|
<div className="mb-4 flex-1">
|
||||||
|
<p className="text-gray-600 text-sm leading-relaxed line-clamp-3">
|
||||||
|
{getDisplayDescription()}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Tools Info */}
|
||||||
|
{server.tools && server.tools.length > 0 && (
|
||||||
|
<div className="mb-4">
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<svg className="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||||
|
</svg>
|
||||||
|
<span className="text-sm text-gray-600 font-medium">
|
||||||
|
{server.tools.length} {server.tools.length === 1 ? t('cloud.tool') : t('cloud.tools')}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Footer - 固定在底部 */}
|
||||||
|
<div className="flex items-center justify-between pt-4 border-t border-gray-100 mt-auto">
|
||||||
|
<div className="flex items-center space-x-2 text-xs text-gray-500">
|
||||||
|
<svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path fillRule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clipRule="evenodd" />
|
||||||
|
</svg>
|
||||||
|
<span>{formatDate(server.created_at)}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center text-blue-600 text-sm font-medium group-hover:text-blue-700 transition-colors">
|
||||||
|
<span>{t('cloud.viewDetails')}</span>
|
||||||
|
<svg className="w-4 h-4 ml-1 transform group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default CloudServerCard;
|
||||||
573
frontend/src/components/CloudServerDetail.tsx
Normal file
573
frontend/src/components/CloudServerDetail.tsx
Normal file
@@ -0,0 +1,573 @@
|
|||||||
|
import React, { useState, useEffect } from 'react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import { CloudServer, CloudServerTool, ServerConfig } from '@/types';
|
||||||
|
import { apiGet } from '@/utils/fetchInterceptor';
|
||||||
|
import { useSettingsData } from '@/hooks/useSettingsData';
|
||||||
|
import MCPRouterApiKeyError from './MCPRouterApiKeyError';
|
||||||
|
import ServerForm from './ServerForm';
|
||||||
|
|
||||||
|
interface CloudServerDetailProps {
|
||||||
|
serverName: string;
|
||||||
|
onBack: () => void;
|
||||||
|
onCallTool?: (serverName: string, toolName: string, args: Record<string, any>) => Promise<any>;
|
||||||
|
fetchServerTools?: (serverName: string) => Promise<CloudServerTool[]>;
|
||||||
|
onInstall?: (server: CloudServer, config: ServerConfig) => void;
|
||||||
|
installing?: boolean;
|
||||||
|
isInstalled?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
const CloudServerDetail: React.FC<CloudServerDetailProps> = ({
|
||||||
|
serverName,
|
||||||
|
onBack,
|
||||||
|
onCallTool,
|
||||||
|
fetchServerTools,
|
||||||
|
onInstall,
|
||||||
|
installing = false,
|
||||||
|
isInstalled = false
|
||||||
|
}) => {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const { mcpRouterConfig } = useSettingsData();
|
||||||
|
const [server, setServer] = useState<CloudServer | null>(null);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
const [tools, setTools] = useState<CloudServerTool[]>([]);
|
||||||
|
const [loadingTools, setLoadingTools] = useState(false);
|
||||||
|
const [toolsApiKeyError, setToolsApiKeyError] = useState(false);
|
||||||
|
const [toolCallLoading, setToolCallLoading] = useState<string | null>(null);
|
||||||
|
const [toolCallResults, setToolCallResults] = useState<Record<string, any>>({});
|
||||||
|
const [toolArgs, setToolArgs] = useState<Record<string, Record<string, any>>>({});
|
||||||
|
const [expandedSchemas, setExpandedSchemas] = useState<Record<string, boolean>>({});
|
||||||
|
const [modalVisible, setModalVisible] = useState(false);
|
||||||
|
const [installError, setInstallError] = useState<string | null>(null);
|
||||||
|
|
||||||
|
// Helper function to check if error is MCPRouter API key not configured
|
||||||
|
const isMCPRouterApiKeyError = (errorMessage: string) => {
|
||||||
|
console.error('Checking for MCPRouter API key error:', errorMessage);
|
||||||
|
return errorMessage === 'MCPROUTER_API_KEY_NOT_CONFIGURED' ||
|
||||||
|
errorMessage.toLowerCase().includes('mcprouter api key not configured');
|
||||||
|
};
|
||||||
|
|
||||||
|
// Helper function to determine button state for install
|
||||||
|
const getInstallButtonProps = () => {
|
||||||
|
if (isInstalled) {
|
||||||
|
return {
|
||||||
|
className: "bg-green-600 cursor-default px-4 py-2 rounded text-sm font-medium text-white",
|
||||||
|
disabled: true,
|
||||||
|
text: t('market.installed')
|
||||||
|
};
|
||||||
|
} else if (installing) {
|
||||||
|
return {
|
||||||
|
className: "bg-gray-400 cursor-not-allowed px-4 py-2 rounded text-sm font-medium text-white",
|
||||||
|
disabled: true,
|
||||||
|
text: t('market.installing')
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
return {
|
||||||
|
className: "bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded text-sm font-medium text-white transition-colors",
|
||||||
|
disabled: false,
|
||||||
|
text: t('market.install')
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Handle install button click
|
||||||
|
const handleInstall = () => {
|
||||||
|
if (!isInstalled && onInstall) {
|
||||||
|
setModalVisible(true);
|
||||||
|
setInstallError(null);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Handle modal close
|
||||||
|
const handleModalClose = () => {
|
||||||
|
setModalVisible(false);
|
||||||
|
setInstallError(null);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Handle install form submission
|
||||||
|
const handleInstallSubmit = async (payload: any) => {
|
||||||
|
try {
|
||||||
|
if (!server || !onInstall) return;
|
||||||
|
|
||||||
|
setInstallError(null);
|
||||||
|
onInstall(server, payload.config);
|
||||||
|
setModalVisible(false);
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Error installing server:', err);
|
||||||
|
setInstallError(t('errors.serverInstall'));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Load server details
|
||||||
|
useEffect(() => {
|
||||||
|
const loadServerDetails = async () => {
|
||||||
|
try {
|
||||||
|
setLoading(true);
|
||||||
|
setError(null);
|
||||||
|
const response = await apiGet(`/cloud/servers/${serverName}`);
|
||||||
|
|
||||||
|
if (response && response.success && response.data) {
|
||||||
|
setServer(response.data);
|
||||||
|
setTools(response.data.tools || []);
|
||||||
|
} else {
|
||||||
|
setError(t('cloud.serverNotFound'));
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Failed to load server details:', err);
|
||||||
|
setError(err instanceof Error ? err.message : String(err));
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
loadServerDetails();
|
||||||
|
}, [serverName, t]);
|
||||||
|
|
||||||
|
// Load tools if not already loaded
|
||||||
|
useEffect(() => {
|
||||||
|
const loadTools = async () => {
|
||||||
|
if (server && (!server.tools || server.tools.length === 0) && fetchServerTools) {
|
||||||
|
setLoadingTools(true);
|
||||||
|
setToolsApiKeyError(false);
|
||||||
|
try {
|
||||||
|
const fetchedTools = await fetchServerTools(server.name);
|
||||||
|
setTools(fetchedTools);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to load tools:', error);
|
||||||
|
const errorMessage = error instanceof Error ? error.message : String(error);
|
||||||
|
if (isMCPRouterApiKeyError(errorMessage)) {
|
||||||
|
setToolsApiKeyError(true);
|
||||||
|
}
|
||||||
|
} finally {
|
||||||
|
setLoadingTools(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
loadTools();
|
||||||
|
}, [server?.name, server?.tools, fetchServerTools]);
|
||||||
|
|
||||||
|
// Format creation date
|
||||||
|
const formatDate = (dateStr: string) => {
|
||||||
|
try {
|
||||||
|
const date = new Date(dateStr);
|
||||||
|
const year = date.getFullYear();
|
||||||
|
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||||
|
const day = String(date.getDate()).padStart(2, '0');
|
||||||
|
const hours = String(date.getHours()).padStart(2, '0');
|
||||||
|
const minutes = String(date.getMinutes()).padStart(2, '0');
|
||||||
|
const seconds = String(date.getSeconds()).padStart(2, '0');
|
||||||
|
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
||||||
|
} catch {
|
||||||
|
return dateStr;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Handle tool argument changes
|
||||||
|
const handleArgChange = (toolName: string, argName: string, value: any) => {
|
||||||
|
setToolArgs(prev => ({
|
||||||
|
...prev,
|
||||||
|
[toolName]: {
|
||||||
|
...prev[toolName],
|
||||||
|
[argName]: value
|
||||||
|
}
|
||||||
|
}));
|
||||||
|
};
|
||||||
|
|
||||||
|
// Handle tool call
|
||||||
|
const handleCallTool = async (toolName: string) => {
|
||||||
|
if (!onCallTool || !server) return;
|
||||||
|
|
||||||
|
setToolCallLoading(toolName);
|
||||||
|
try {
|
||||||
|
const args = toolArgs[toolName] || {};
|
||||||
|
const result = await onCallTool(server.server_key, toolName, args);
|
||||||
|
setToolCallResults(prev => ({
|
||||||
|
...prev,
|
||||||
|
[toolName]: result
|
||||||
|
}));
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Tool call failed:', error);
|
||||||
|
const errorMessage = error instanceof Error ? error.message : String(error);
|
||||||
|
setToolCallResults(prev => ({
|
||||||
|
...prev,
|
||||||
|
[toolName]: { error: errorMessage }
|
||||||
|
}));
|
||||||
|
} finally {
|
||||||
|
setToolCallLoading(null);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Toggle schema visibility
|
||||||
|
const toggleSchema = (toolName: string) => {
|
||||||
|
setExpandedSchemas(prev => ({
|
||||||
|
...prev,
|
||||||
|
[toolName]: !prev[toolName]
|
||||||
|
}));
|
||||||
|
};
|
||||||
|
|
||||||
|
// Render tool input field based on schema
|
||||||
|
const renderToolInput = (tool: CloudServerTool, propName: string, propSchema: any) => {
|
||||||
|
const currentValue = toolArgs[tool.name]?.[propName] || '';
|
||||||
|
|
||||||
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
|
||||||
|
let value: any = e.target.value;
|
||||||
|
|
||||||
|
// Convert value based on schema type
|
||||||
|
if (propSchema.type === 'number' || propSchema.type === 'integer') {
|
||||||
|
value = value === '' ? undefined : Number(value);
|
||||||
|
} else if (propSchema.type === 'boolean') {
|
||||||
|
value = e.target.value === 'true';
|
||||||
|
}
|
||||||
|
|
||||||
|
handleArgChange(tool.name, propName, value);
|
||||||
|
};
|
||||||
|
|
||||||
|
if (propSchema.type === 'boolean') {
|
||||||
|
return (
|
||||||
|
<select
|
||||||
|
value={currentValue === true ? 'true' : currentValue === false ? 'false' : ''}
|
||||||
|
onChange={handleChange}
|
||||||
|
className="w-full border rounded-md px-3 py-2 border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 form-input"
|
||||||
|
>
|
||||||
|
<option value=""></option>
|
||||||
|
<option value="true">True</option>
|
||||||
|
<option value="false">False</option>
|
||||||
|
</select>
|
||||||
|
);
|
||||||
|
} else if (propSchema.type === 'number' || propSchema.type === 'integer') {
|
||||||
|
return (
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
step={propSchema.type === 'integer' ? '1' : 'any'}
|
||||||
|
value={currentValue || ''}
|
||||||
|
onChange={handleChange}
|
||||||
|
className="w-full border rounded-md px-3 py-2 border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 form-input"
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
return (
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={currentValue || ''}
|
||||||
|
onChange={handleChange}
|
||||||
|
className="w-full border rounded-md px-3 py-2 border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 form-input"
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="bg-white rounded-lg shadow-md p-6">
|
||||||
|
<div className="mb-6">
|
||||||
|
<button
|
||||||
|
onClick={onBack}
|
||||||
|
className="inline-flex items-center text-gray-600 hover:text-gray-900 transition-colors group"
|
||||||
|
>
|
||||||
|
<svg className="h-5 w-5 mr-2 transform group-hover:-translate-x-1 transition-transform" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||||
|
<path fillRule="evenodd" d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z" clipRule="evenodd" />
|
||||||
|
</svg>
|
||||||
|
{t('cloud.backToList')}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{loading ? (
|
||||||
|
<div className="bg-white rounded-xl shadow-sm p-12">
|
||||||
|
<div className="flex flex-col items-center">
|
||||||
|
<svg className="animate-spin h-12 w-12 text-blue-500 mb-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
||||||
|
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
|
||||||
|
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||||||
|
</svg>
|
||||||
|
<p className="text-gray-600 text-lg">{t('app.loading')}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : error && !isMCPRouterApiKeyError(error) ? (
|
||||||
|
<div className="bg-white rounded-xl shadow-sm p-6">
|
||||||
|
<div className="bg-red-50 border border-red-200 rounded-lg p-4">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<svg className="h-5 w-5 text-red-400 mr-3" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
|
||||||
|
</svg>
|
||||||
|
<p className="text-red-700">{error}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : !server ? (
|
||||||
|
<div className="bg-white rounded-xl shadow-sm p-12">
|
||||||
|
<div className="text-center">
|
||||||
|
<svg className="h-12 w-12 text-gray-400 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1} d="M9.172 16.172a4 4 0 015.656 0M9 12h6m-6-4h6m2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
|
||||||
|
</svg>
|
||||||
|
<p className="text-gray-600 text-lg">{t('cloud.serverNotFound')}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="space-y-6">
|
||||||
|
{/* Server Header Card */}
|
||||||
|
<div className="bg-white rounded-xl shadow-sm overflow-hidden">
|
||||||
|
<div className="bg-gradient-to-r from-gray-100 to-gray-200 px-6 py-4">
|
||||||
|
<div className="flex justify-between items-end">
|
||||||
|
<div className="flex-1">
|
||||||
|
<h1 className="text-2xl font-bold text-gray-800 mb-2">
|
||||||
|
{server.title || server.name}
|
||||||
|
</h1>
|
||||||
|
<div className="flex flex-wrap items-center gap-4 text-gray-600">
|
||||||
|
<span className="text-sm bg-white/60 text-gray-700 px-3 py-1 rounded-full">
|
||||||
|
{server.name}
|
||||||
|
</span>
|
||||||
|
<div className="flex items-center">
|
||||||
|
<svg className="h-4 w-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path fillRule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clipRule="evenodd" />
|
||||||
|
</svg>
|
||||||
|
{t('cloud.by')} {server.author_name}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="text-right flex flex-col items-end gap-3">
|
||||||
|
<div className="text-xs text-gray-500">
|
||||||
|
{t('cloud.updated')}: {formatDate(server.updated_at)}
|
||||||
|
</div>
|
||||||
|
{onInstall && !isMCPRouterApiKeyError(error || '') && !toolsApiKeyError && (
|
||||||
|
<button
|
||||||
|
onClick={handleInstall}
|
||||||
|
disabled={getInstallButtonProps().disabled}
|
||||||
|
className={getInstallButtonProps().className}
|
||||||
|
>
|
||||||
|
{getInstallButtonProps().text}
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Description Card */}
|
||||||
|
<div className="bg-white rounded-xl shadow-sm p-6">
|
||||||
|
<h2 className="text-xl font-semibold text-gray-900 mb-4 flex items-center">
|
||||||
|
<svg className="h-5 w-5 text-gray-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||||
|
</svg>
|
||||||
|
{t('cloud.description')}
|
||||||
|
</h2>
|
||||||
|
<p className="text-gray-700 leading-relaxed">{server.description}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Content Card */}
|
||||||
|
{server.content && (
|
||||||
|
<div className="bg-white rounded-xl shadow-sm p-6">
|
||||||
|
<h2 className="text-xl font-semibold text-gray-900 mb-4 flex items-center">
|
||||||
|
<svg className="h-5 w-5 text-gray-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
|
||||||
|
</svg>
|
||||||
|
{t('cloud.details')}
|
||||||
|
</h2>
|
||||||
|
<div className="bg-gray-50 border border-gray-200 rounded-lg p-4 overflow-auto">
|
||||||
|
<pre className="text-sm text-gray-800 whitespace-pre-wrap">{server.content}</pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Tools Card */}
|
||||||
|
<div className="bg-white rounded-xl shadow-sm p-6">
|
||||||
|
<h2 className="text-xl font-semibold text-gray-900 mb-4 flex items-center">
|
||||||
|
<svg className="h-5 w-5 text-gray-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||||
|
</svg>
|
||||||
|
{t('cloud.tools')}
|
||||||
|
{tools.length > 0 && (
|
||||||
|
<span className="ml-2 bg-blue-100 text-blue-800 text-sm font-medium px-2.5 py-0.5 rounded-full">
|
||||||
|
{tools.length}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
{/* Check for API key error */}
|
||||||
|
{toolsApiKeyError && (
|
||||||
|
<MCPRouterApiKeyError />
|
||||||
|
)}
|
||||||
|
|
||||||
|
{loadingTools ? (
|
||||||
|
<div className="flex items-center justify-center py-12">
|
||||||
|
<svg className="animate-spin h-8 w-8 text-blue-500 mr-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
||||||
|
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
|
||||||
|
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||||||
|
</svg>
|
||||||
|
<span className="text-gray-600">{t('cloud.loadingTools')}</span>
|
||||||
|
</div>
|
||||||
|
) : tools.length === 0 && !toolsApiKeyError ? (
|
||||||
|
<div className="text-center py-12">
|
||||||
|
<svg className="h-12 w-12 text-gray-400 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1} d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
|
||||||
|
</svg>
|
||||||
|
<p className="text-gray-600">{t('cloud.noTools')}</p>
|
||||||
|
</div>
|
||||||
|
) : tools.length > 0 ? (
|
||||||
|
<div className="space-y-4">
|
||||||
|
{tools.map((tool, index) => (
|
||||||
|
<div key={index} className="border border-gray-200 rounded-lg p-6 hover:border-gray-300 transition-colors">
|
||||||
|
<div className="flex justify-between items-start mb-4">
|
||||||
|
<div className="flex-1">
|
||||||
|
<h3 className="text-lg font-medium text-gray-900 mb-2 flex items-center">
|
||||||
|
<span className="bg-blue-100 text-blue-800 text-xs font-medium px-2 py-1 rounded mr-3">
|
||||||
|
TOOL
|
||||||
|
</span>
|
||||||
|
{tool.name}
|
||||||
|
</h3>
|
||||||
|
<p className="text-gray-600 leading-relaxed whitespace-pre-wrap">{tool.description}</p>
|
||||||
|
</div>
|
||||||
|
{onCallTool && (
|
||||||
|
<button
|
||||||
|
onClick={() => handleCallTool(tool.name)}
|
||||||
|
disabled={toolCallLoading === tool.name}
|
||||||
|
className="ml-4 bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors flex items-center min-w-[100px] justify-center"
|
||||||
|
>
|
||||||
|
{toolCallLoading === tool.name ? (
|
||||||
|
<>
|
||||||
|
<svg className="animate-spin h-4 w-4 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
||||||
|
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
|
||||||
|
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||||||
|
</svg>
|
||||||
|
{t('cloud.calling')}
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<svg className="h-4 w-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14.828 14.828a4 4 0 01-5.656 0M9 10h6m2 8l4-4H7l4 4z" />
|
||||||
|
</svg>
|
||||||
|
{t('cloud.callTool')}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Tool inputs */}
|
||||||
|
{tool.inputSchema && tool.inputSchema.properties && Object.keys(tool.inputSchema.properties).length > 0 && (
|
||||||
|
<div className="border-t border-gray-100 pt-4">
|
||||||
|
<div className="flex items-center gap-3 mb-4">
|
||||||
|
<h4 className="text-sm font-medium text-gray-700">{t('cloud.parameters')}</h4>
|
||||||
|
<button
|
||||||
|
onClick={() => toggleSchema(tool.name)}
|
||||||
|
className="text-sm text-blue-600 hover:text-blue-800 focus:outline-none flex items-center gap-1 transition-colors"
|
||||||
|
>
|
||||||
|
{t('cloud.viewSchema')}
|
||||||
|
<svg
|
||||||
|
className={`h-3 w-3 transition-transform duration-200 ${expandedSchemas[tool.name] ? 'rotate-90' : 'rotate-0'}`}
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
fill="currentColor"
|
||||||
|
>
|
||||||
|
<path fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Schema content */}
|
||||||
|
{expandedSchemas[tool.name] && (
|
||||||
|
<div className="mb-4">
|
||||||
|
<div className="bg-gray-50 border border-gray-200 rounded-lg p-3 overflow-auto">
|
||||||
|
<pre className="text-sm text-gray-800">
|
||||||
|
{JSON.stringify(tool.inputSchema, null, 2)}
|
||||||
|
</pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="space-y-4">
|
||||||
|
{Object.entries(tool.inputSchema.properties).map(([propName, propSchema]: [string, any]) => (
|
||||||
|
<div key={propName} className="space-y-2">
|
||||||
|
<label className="block text-sm font-medium text-gray-700">
|
||||||
|
{propName}
|
||||||
|
{tool.inputSchema.required?.includes(propName) && (
|
||||||
|
<span className="text-red-500 ml-1">*</span>
|
||||||
|
)}
|
||||||
|
</label>
|
||||||
|
{propSchema.description && (
|
||||||
|
<p className="text-xs text-gray-500">{propSchema.description}</p>
|
||||||
|
)}
|
||||||
|
{renderToolInput(tool, propName, propSchema)}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Tool call result */}
|
||||||
|
{toolCallResults[tool.name] && (
|
||||||
|
<div className="border-t border-gray-100 pt-4 mt-4">
|
||||||
|
{toolCallResults[tool.name].error ? (
|
||||||
|
<>
|
||||||
|
{isMCPRouterApiKeyError(toolCallResults[tool.name].error) ? (
|
||||||
|
<MCPRouterApiKeyError />
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<h4 className="text-sm font-medium text-red-600 mb-3 flex items-center">
|
||||||
|
<svg className="h-4 w-4 text-red-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
|
||||||
|
</svg>
|
||||||
|
{t('cloud.error')}
|
||||||
|
</h4>
|
||||||
|
<div className="bg-red-50 border border-red-200 rounded-lg p-4">
|
||||||
|
<pre className="text-sm text-red-800 whitespace-pre-wrap overflow-auto">
|
||||||
|
{toolCallResults[tool.name].error}
|
||||||
|
</pre>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<h4 className="text-sm font-medium text-gray-700 mb-3 flex items-center">
|
||||||
|
<svg className="h-4 w-4 text-green-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
|
||||||
|
</svg>
|
||||||
|
{t('cloud.result')}
|
||||||
|
</h4>
|
||||||
|
<div className="bg-gray-50 border border-gray-200 rounded-lg p-4">
|
||||||
|
<pre className="text-sm text-gray-800 whitespace-pre-wrap overflow-auto">
|
||||||
|
{JSON.stringify(toolCallResults[tool.name], null, 2)}
|
||||||
|
</pre>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Install Modal */}
|
||||||
|
{modalVisible && server && (
|
||||||
|
<div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
|
||||||
|
<ServerForm
|
||||||
|
onSubmit={handleInstallSubmit}
|
||||||
|
onCancel={handleModalClose}
|
||||||
|
modalTitle={t('cloud.installServer', { name: server.title || server.name })}
|
||||||
|
formError={installError}
|
||||||
|
initialData={{
|
||||||
|
name: server.name,
|
||||||
|
status: 'disconnected',
|
||||||
|
config: {
|
||||||
|
type: 'streamable-http',
|
||||||
|
url: server.server_url,
|
||||||
|
headers: {
|
||||||
|
'Authorization': `Bearer ${mcpRouterConfig.apiKey || '<MCPROUTER_API_KEY>'}`,
|
||||||
|
'HTTP-Referer': mcpRouterConfig.referer || '<YOUR_APP_URL>',
|
||||||
|
'X-Title': mcpRouterConfig.title || '<YOUR_APP_NAME>'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default CloudServerDetail;
|
||||||
92
frontend/src/components/MCPRouterApiKeyError.tsx
Normal file
92
frontend/src/components/MCPRouterApiKeyError.tsx
Normal file
@@ -0,0 +1,92 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import { useNavigate } from 'react-router-dom';
|
||||||
|
|
||||||
|
const MCPRouterApiKeyError: React.FC = () => {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const navigate = useNavigate();
|
||||||
|
|
||||||
|
const handleConfigureSettings = () => {
|
||||||
|
navigate('/settings');
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleGetApiKey = () => {
|
||||||
|
window.open('https://mcprouter.co', '_blank', 'noopener,noreferrer');
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="bg-amber-50 border border-amber-200 rounded-lg p-6 mb-6">
|
||||||
|
<div className="flex items-start">
|
||||||
|
<div className="flex-shrink-0">
|
||||||
|
<svg
|
||||||
|
className="h-5 w-5 text-amber-400"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
fill="currentColor"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
fillRule="evenodd"
|
||||||
|
d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
|
||||||
|
clipRule="evenodd"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div className="ml-3 flex-1">
|
||||||
|
<h3 className="text-sm font-medium text-amber-800">
|
||||||
|
{t('cloud.apiKeyNotConfigured')}
|
||||||
|
</h3>
|
||||||
|
<div className="mt-2 text-sm text-amber-700">
|
||||||
|
<p>{t('cloud.apiKeyNotConfiguredDescription')}</p>
|
||||||
|
</div>
|
||||||
|
<div className="mt-4 flex flex-wrap gap-2">
|
||||||
|
<button
|
||||||
|
onClick={handleGetApiKey}
|
||||||
|
className="inline-flex items-center px-3 py-2 text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors duration-200"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
className="w-4 h-4 mr-1.5"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth={2}
|
||||||
|
d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
{t('cloud.getApiKey')}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={handleConfigureSettings}
|
||||||
|
className="inline-flex items-center px-3 py-2 text-sm font-medium text-amber-800 bg-amber-100 border border-amber-300 rounded-md hover:bg-amber-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 transition-colors duration-200"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
className="w-4 h-4 mr-1.5"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth={2}
|
||||||
|
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth={2}
|
||||||
|
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
{t('cloud.configureInSettings')}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default MCPRouterApiKeyError;
|
||||||
@@ -61,6 +61,15 @@ const Sidebar: React.FC<SidebarProps> = ({ collapsed }) => {
|
|||||||
</svg>
|
</svg>
|
||||||
),
|
),
|
||||||
}] : []),
|
}] : []),
|
||||||
|
{
|
||||||
|
path: '/cloud',
|
||||||
|
label: t('nav.cloud'),
|
||||||
|
icon: (
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
|
||||||
|
<path fillRule="evenodd" d="M5.5 17a4.5 4.5 0 01-1.44-8.765 4.5 4.5 0 018.302-3.046 3.5 3.5 0 014.504 4.272A4 4 0 0115 17H5.5zm3.75-2.75a.75.75 0 001.5 0V9.66l1.95 2.1a.75.75 0 101.1-1.02l-3.25-3.5a.75.75 0 00-1.1 0l-3.25 3.5a.75.75 0 101.1 1.02l1.95-2.1v4.59z" clipRule="evenodd" />
|
||||||
|
</svg>
|
||||||
|
),
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: '/market',
|
path: '/market',
|
||||||
label: t('nav.market'),
|
label: t('nav.market'),
|
||||||
|
|||||||
350
frontend/src/hooks/useCloudData.ts
Normal file
350
frontend/src/hooks/useCloudData.ts
Normal file
@@ -0,0 +1,350 @@
|
|||||||
|
import { useState, useEffect, useCallback } from 'react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import { CloudServer, ApiResponse, CloudServerTool } from '@/types';
|
||||||
|
import { apiGet, apiPost } from '../utils/fetchInterceptor';
|
||||||
|
|
||||||
|
export const useCloudData = () => {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const [servers, setServers] = useState<CloudServer[]>([]);
|
||||||
|
const [allServers, setAllServers] = useState<CloudServer[]>([]);
|
||||||
|
const [categories, setCategories] = useState<string[]>([]);
|
||||||
|
const [tags, setTags] = useState<string[]>([]);
|
||||||
|
const [selectedCategory, setSelectedCategory] = useState<string>('');
|
||||||
|
const [selectedTag, setSelectedTag] = useState<string>('');
|
||||||
|
const [searchQuery, setSearchQuery] = useState<string>('');
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
const [currentServer, setCurrentServer] = useState<CloudServer | null>(null);
|
||||||
|
|
||||||
|
// Pagination states
|
||||||
|
const [currentPage, setCurrentPage] = useState(1);
|
||||||
|
const [serversPerPage, setServersPerPage] = useState(9);
|
||||||
|
const [totalPages, setTotalPages] = useState(1);
|
||||||
|
|
||||||
|
// Fetch all cloud market servers
|
||||||
|
const fetchCloudServers = useCallback(async () => {
|
||||||
|
try {
|
||||||
|
setLoading(true);
|
||||||
|
const data: ApiResponse<CloudServer[]> = await apiGet('/cloud/servers');
|
||||||
|
|
||||||
|
if (data && data.success && Array.isArray(data.data)) {
|
||||||
|
setAllServers(data.data);
|
||||||
|
// Apply pagination to the fetched data
|
||||||
|
applyPagination(data.data, currentPage);
|
||||||
|
} else {
|
||||||
|
console.error('Invalid cloud market servers data format:', data);
|
||||||
|
setError(t('cloud.fetchError'));
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Error fetching cloud market servers:', err);
|
||||||
|
const errorMessage = err instanceof Error ? err.message : String(err);
|
||||||
|
// Keep the original error message for API key errors
|
||||||
|
if (
|
||||||
|
errorMessage === 'MCPROUTER_API_KEY_NOT_CONFIGURED' ||
|
||||||
|
errorMessage.toLowerCase().includes('mcprouter api key not configured')
|
||||||
|
) {
|
||||||
|
setError(errorMessage);
|
||||||
|
} else {
|
||||||
|
setError(errorMessage);
|
||||||
|
}
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
}, [t]);
|
||||||
|
|
||||||
|
// Apply pagination to data
|
||||||
|
const applyPagination = useCallback(
|
||||||
|
(data: CloudServer[], page: number, itemsPerPage = serversPerPage) => {
|
||||||
|
const totalItems = data.length;
|
||||||
|
const calculatedTotalPages = Math.ceil(totalItems / itemsPerPage);
|
||||||
|
setTotalPages(calculatedTotalPages);
|
||||||
|
|
||||||
|
// Ensure current page is valid
|
||||||
|
const validPage = Math.max(1, Math.min(page, calculatedTotalPages));
|
||||||
|
if (validPage !== page) {
|
||||||
|
setCurrentPage(validPage);
|
||||||
|
}
|
||||||
|
|
||||||
|
const startIndex = (validPage - 1) * itemsPerPage;
|
||||||
|
const paginatedServers = data.slice(startIndex, startIndex + itemsPerPage);
|
||||||
|
setServers(paginatedServers);
|
||||||
|
},
|
||||||
|
[serversPerPage],
|
||||||
|
);
|
||||||
|
|
||||||
|
// Change page
|
||||||
|
const changePage = useCallback(
|
||||||
|
(page: number) => {
|
||||||
|
setCurrentPage(page);
|
||||||
|
applyPagination(allServers, page, serversPerPage);
|
||||||
|
},
|
||||||
|
[allServers, applyPagination, serversPerPage],
|
||||||
|
);
|
||||||
|
|
||||||
|
// Fetch all categories
|
||||||
|
const fetchCategories = useCallback(async () => {
|
||||||
|
try {
|
||||||
|
const data: ApiResponse<string[]> = await apiGet('/cloud/categories');
|
||||||
|
|
||||||
|
if (data && data.success && Array.isArray(data.data)) {
|
||||||
|
setCategories(data.data);
|
||||||
|
} else {
|
||||||
|
console.error('Invalid cloud market categories data format:', data);
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Error fetching cloud market categories:', err);
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
// Fetch all tags
|
||||||
|
const fetchTags = useCallback(async () => {
|
||||||
|
try {
|
||||||
|
const data: ApiResponse<string[]> = await apiGet('/cloud/tags');
|
||||||
|
|
||||||
|
if (data && data.success && Array.isArray(data.data)) {
|
||||||
|
setTags(data.data);
|
||||||
|
} else {
|
||||||
|
console.error('Invalid cloud market tags data format:', data);
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Error fetching cloud market tags:', err);
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
// Fetch server by name
|
||||||
|
const fetchServerByName = useCallback(
|
||||||
|
async (name: string) => {
|
||||||
|
try {
|
||||||
|
setLoading(true);
|
||||||
|
const data: ApiResponse<CloudServer> = await apiGet(`/cloud/servers/${name}`);
|
||||||
|
|
||||||
|
if (data && data.success && data.data) {
|
||||||
|
setCurrentServer(data.data);
|
||||||
|
return data.data;
|
||||||
|
} else {
|
||||||
|
console.error('Invalid cloud server data format:', data);
|
||||||
|
setError(t('cloud.serverNotFound'));
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error(`Error fetching cloud server ${name}:`, err);
|
||||||
|
const errorMessage = err instanceof Error ? err.message : String(err);
|
||||||
|
// Keep the original error message for API key errors
|
||||||
|
if (
|
||||||
|
errorMessage === 'MCPROUTER_API_KEY_NOT_CONFIGURED' ||
|
||||||
|
errorMessage.toLowerCase().includes('mcprouter api key not configured')
|
||||||
|
) {
|
||||||
|
setError(errorMessage);
|
||||||
|
} else {
|
||||||
|
setError(errorMessage);
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[t],
|
||||||
|
);
|
||||||
|
|
||||||
|
// Search servers by query
|
||||||
|
const searchServers = useCallback(
|
||||||
|
async (query: string) => {
|
||||||
|
try {
|
||||||
|
setLoading(true);
|
||||||
|
setSearchQuery(query);
|
||||||
|
|
||||||
|
if (!query.trim()) {
|
||||||
|
// Fetch fresh data from server instead of just applying pagination
|
||||||
|
fetchCloudServers();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const data: ApiResponse<CloudServer[]> = await apiGet(
|
||||||
|
`/cloud/servers/search?query=${encodeURIComponent(query)}`,
|
||||||
|
);
|
||||||
|
|
||||||
|
if (data && data.success && Array.isArray(data.data)) {
|
||||||
|
setAllServers(data.data);
|
||||||
|
setCurrentPage(1);
|
||||||
|
applyPagination(data.data, 1);
|
||||||
|
} else {
|
||||||
|
console.error('Invalid cloud search results format:', data);
|
||||||
|
setError(t('cloud.searchError'));
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Error searching cloud servers:', err);
|
||||||
|
setError(err instanceof Error ? err.message : String(err));
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[t, allServers, applyPagination, fetchCloudServers],
|
||||||
|
);
|
||||||
|
|
||||||
|
// Filter servers by category
|
||||||
|
const filterByCategory = useCallback(
|
||||||
|
async (category: string) => {
|
||||||
|
try {
|
||||||
|
setLoading(true);
|
||||||
|
setSelectedCategory(category);
|
||||||
|
setSelectedTag(''); // Reset tag filter when filtering by category
|
||||||
|
|
||||||
|
if (!category) {
|
||||||
|
fetchCloudServers();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const data: ApiResponse<CloudServer[]> = await apiGet(
|
||||||
|
`/cloud/categories/${encodeURIComponent(category)}`,
|
||||||
|
);
|
||||||
|
|
||||||
|
if (data && data.success && Array.isArray(data.data)) {
|
||||||
|
setAllServers(data.data);
|
||||||
|
setCurrentPage(1);
|
||||||
|
applyPagination(data.data, 1);
|
||||||
|
} else {
|
||||||
|
console.error('Invalid cloud category filter results format:', data);
|
||||||
|
setError(t('cloud.filterError'));
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Error filtering cloud servers by category:', err);
|
||||||
|
setError(err instanceof Error ? err.message : String(err));
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[t, fetchCloudServers, applyPagination],
|
||||||
|
);
|
||||||
|
|
||||||
|
// Filter servers by tag
|
||||||
|
const filterByTag = useCallback(
|
||||||
|
async (tag: string) => {
|
||||||
|
try {
|
||||||
|
setLoading(true);
|
||||||
|
setSelectedTag(tag);
|
||||||
|
setSelectedCategory(''); // Reset category filter when filtering by tag
|
||||||
|
|
||||||
|
if (!tag) {
|
||||||
|
fetchCloudServers();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const data: ApiResponse<CloudServer[]> = await apiGet(
|
||||||
|
`/cloud/tags/${encodeURIComponent(tag)}`,
|
||||||
|
);
|
||||||
|
|
||||||
|
if (data && data.success && Array.isArray(data.data)) {
|
||||||
|
setAllServers(data.data);
|
||||||
|
setCurrentPage(1);
|
||||||
|
applyPagination(data.data, 1);
|
||||||
|
} else {
|
||||||
|
console.error('Invalid cloud tag filter results format:', data);
|
||||||
|
setError(t('cloud.tagFilterError'));
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Error filtering cloud servers by tag:', err);
|
||||||
|
setError(err instanceof Error ? err.message : String(err));
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[t, fetchCloudServers, applyPagination],
|
||||||
|
);
|
||||||
|
|
||||||
|
// Fetch tools for a specific server
|
||||||
|
const fetchServerTools = useCallback(async (serverName: string) => {
|
||||||
|
try {
|
||||||
|
const data: ApiResponse<CloudServerTool[]> = await apiGet(
|
||||||
|
`/cloud/servers/${serverName}/tools`,
|
||||||
|
);
|
||||||
|
|
||||||
|
if (!data.success) {
|
||||||
|
console.error('Failed to fetch cloud server tools:', data);
|
||||||
|
throw new Error(data.message || 'Failed to fetch cloud server tools');
|
||||||
|
}
|
||||||
|
|
||||||
|
if (data && data.success && Array.isArray(data.data)) {
|
||||||
|
return data.data;
|
||||||
|
} else {
|
||||||
|
console.error('Invalid cloud server tools data format:', data);
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error(`Error fetching tools for cloud server ${serverName}:`, err);
|
||||||
|
const errorMessage = err instanceof Error ? err.message : String(err);
|
||||||
|
// Re-throw API key errors so they can be handled by the component
|
||||||
|
if (
|
||||||
|
errorMessage === 'MCPROUTER_API_KEY_NOT_CONFIGURED' ||
|
||||||
|
errorMessage.toLowerCase().includes('mcprouter api key not configured')
|
||||||
|
) {
|
||||||
|
throw err;
|
||||||
|
}
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
// Call a tool on a cloud server
|
||||||
|
const callServerTool = useCallback(
|
||||||
|
async (serverName: string, toolName: string, args: Record<string, any>) => {
|
||||||
|
try {
|
||||||
|
const data = await apiPost(`/cloud/servers/${serverName}/tools/${toolName}/call`, {
|
||||||
|
arguments: args,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (data && data.success) {
|
||||||
|
return data.data;
|
||||||
|
} else {
|
||||||
|
throw new Error(data.message || 'Failed to call tool');
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error(`Error calling tool ${toolName} on cloud server ${serverName}:`, err);
|
||||||
|
throw err;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[],
|
||||||
|
);
|
||||||
|
|
||||||
|
// Change servers per page
|
||||||
|
const changeServersPerPage = useCallback(
|
||||||
|
(perPage: number) => {
|
||||||
|
setServersPerPage(perPage);
|
||||||
|
setCurrentPage(1);
|
||||||
|
applyPagination(allServers, 1, perPage);
|
||||||
|
},
|
||||||
|
[allServers, applyPagination],
|
||||||
|
);
|
||||||
|
|
||||||
|
// Load initial data
|
||||||
|
useEffect(() => {
|
||||||
|
fetchCloudServers();
|
||||||
|
fetchCategories();
|
||||||
|
fetchTags();
|
||||||
|
}, [fetchCloudServers, fetchCategories, fetchTags]);
|
||||||
|
|
||||||
|
return {
|
||||||
|
servers,
|
||||||
|
allServers,
|
||||||
|
categories,
|
||||||
|
tags,
|
||||||
|
selectedCategory,
|
||||||
|
selectedTag,
|
||||||
|
searchQuery,
|
||||||
|
loading,
|
||||||
|
error,
|
||||||
|
setError,
|
||||||
|
currentServer,
|
||||||
|
fetchCloudServers: fetchCloudServers,
|
||||||
|
fetchServerByName,
|
||||||
|
searchServers,
|
||||||
|
filterByCategory,
|
||||||
|
filterByTag,
|
||||||
|
fetchServerTools,
|
||||||
|
callServerTool,
|
||||||
|
// Pagination properties and methods
|
||||||
|
currentPage,
|
||||||
|
totalPages,
|
||||||
|
serversPerPage,
|
||||||
|
changePage,
|
||||||
|
changeServersPerPage,
|
||||||
|
};
|
||||||
|
};
|
||||||
@@ -27,11 +27,19 @@ interface SmartRoutingConfig {
|
|||||||
openaiApiEmbeddingModel: string;
|
openaiApiEmbeddingModel: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
interface MCPRouterConfig {
|
||||||
|
apiKey: string;
|
||||||
|
referer: string;
|
||||||
|
title: string;
|
||||||
|
baseUrl: string;
|
||||||
|
}
|
||||||
|
|
||||||
interface SystemSettings {
|
interface SystemSettings {
|
||||||
systemConfig?: {
|
systemConfig?: {
|
||||||
routing?: RoutingConfig;
|
routing?: RoutingConfig;
|
||||||
install?: InstallConfig;
|
install?: InstallConfig;
|
||||||
smartRouting?: SmartRoutingConfig;
|
smartRouting?: SmartRoutingConfig;
|
||||||
|
mcpRouter?: MCPRouterConfig;
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -69,6 +77,13 @@ export const useSettingsData = () => {
|
|||||||
openaiApiEmbeddingModel: '',
|
openaiApiEmbeddingModel: '',
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const [mcpRouterConfig, setMCPRouterConfig] = useState<MCPRouterConfig>({
|
||||||
|
apiKey: '',
|
||||||
|
referer: 'https://mcphub.app',
|
||||||
|
title: 'MCPHub',
|
||||||
|
baseUrl: 'https://api.mcprouter.to/v1',
|
||||||
|
});
|
||||||
|
|
||||||
const [loading, setLoading] = useState(false);
|
const [loading, setLoading] = useState(false);
|
||||||
const [error, setError] = useState<string | null>(null);
|
const [error, setError] = useState<string | null>(null);
|
||||||
const [refreshKey, setRefreshKey] = useState(0);
|
const [refreshKey, setRefreshKey] = useState(0);
|
||||||
@@ -112,6 +127,14 @@ export const useSettingsData = () => {
|
|||||||
data.data.systemConfig.smartRouting.openaiApiEmbeddingModel || '',
|
data.data.systemConfig.smartRouting.openaiApiEmbeddingModel || '',
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
if (data.success && data.data?.systemConfig?.mcpRouter) {
|
||||||
|
setMCPRouterConfig({
|
||||||
|
apiKey: data.data.systemConfig.mcpRouter.apiKey || '',
|
||||||
|
referer: data.data.systemConfig.mcpRouter.referer || 'https://mcphub.app',
|
||||||
|
title: data.data.systemConfig.mcpRouter.title || 'MCPHub',
|
||||||
|
baseUrl: data.data.systemConfig.mcpRouter.baseUrl || 'https://api.mcprouter.to/v1',
|
||||||
|
});
|
||||||
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Failed to fetch settings:', error);
|
console.error('Failed to fetch settings:', error);
|
||||||
setError(error instanceof Error ? error.message : 'Failed to fetch settings');
|
setError(error instanceof Error ? error.message : 'Failed to fetch settings');
|
||||||
@@ -290,6 +313,77 @@ export const useSettingsData = () => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// Update MCPRouter configuration
|
||||||
|
const updateMCPRouterConfig = async <T extends keyof MCPRouterConfig>(
|
||||||
|
key: T,
|
||||||
|
value: MCPRouterConfig[T],
|
||||||
|
) => {
|
||||||
|
setLoading(true);
|
||||||
|
setError(null);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const data = await apiPut('/system-config', {
|
||||||
|
mcpRouter: {
|
||||||
|
[key]: value,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
if (data.success) {
|
||||||
|
setMCPRouterConfig({
|
||||||
|
...mcpRouterConfig,
|
||||||
|
[key]: value,
|
||||||
|
});
|
||||||
|
showToast(t('settings.systemConfigUpdated'));
|
||||||
|
return true;
|
||||||
|
} else {
|
||||||
|
showToast(data.message || t('errors.failedToUpdateSystemConfig'));
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to update MCPRouter config:', error);
|
||||||
|
const errorMessage =
|
||||||
|
error instanceof Error ? error.message : 'Failed to update MCPRouter config';
|
||||||
|
setError(errorMessage);
|
||||||
|
showToast(errorMessage);
|
||||||
|
return false;
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Update multiple MCPRouter configuration fields at once
|
||||||
|
const updateMCPRouterConfigBatch = async (updates: Partial<MCPRouterConfig>) => {
|
||||||
|
setLoading(true);
|
||||||
|
setError(null);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const data = await apiPut('/system-config', {
|
||||||
|
mcpRouter: updates,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (data.success) {
|
||||||
|
setMCPRouterConfig({
|
||||||
|
...mcpRouterConfig,
|
||||||
|
...updates,
|
||||||
|
});
|
||||||
|
showToast(t('settings.systemConfigUpdated'));
|
||||||
|
return true;
|
||||||
|
} else {
|
||||||
|
showToast(data.message || t('errors.failedToUpdateSystemConfig'));
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to update MCPRouter config:', error);
|
||||||
|
const errorMessage =
|
||||||
|
error instanceof Error ? error.message : 'Failed to update MCPRouter config';
|
||||||
|
setError(errorMessage);
|
||||||
|
showToast(errorMessage);
|
||||||
|
return false;
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
// Fetch settings when the component mounts or refreshKey changes
|
// Fetch settings when the component mounts or refreshKey changes
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
fetchSettings();
|
fetchSettings();
|
||||||
@@ -309,6 +403,7 @@ export const useSettingsData = () => {
|
|||||||
setTempRoutingConfig,
|
setTempRoutingConfig,
|
||||||
installConfig,
|
installConfig,
|
||||||
smartRoutingConfig,
|
smartRoutingConfig,
|
||||||
|
mcpRouterConfig,
|
||||||
loading,
|
loading,
|
||||||
error,
|
error,
|
||||||
setError,
|
setError,
|
||||||
@@ -319,5 +414,7 @@ export const useSettingsData = () => {
|
|||||||
updateSmartRoutingConfig,
|
updateSmartRoutingConfig,
|
||||||
updateSmartRoutingConfigBatch,
|
updateSmartRoutingConfigBatch,
|
||||||
updateRoutingConfigBatch,
|
updateRoutingConfigBatch,
|
||||||
|
updateMCPRouterConfig,
|
||||||
|
updateMCPRouterConfigBatch,
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -442,6 +442,30 @@ tbody tr:hover {
|
|||||||
color: rgba(239, 154, 154, 0.9) !important;
|
color: rgba(239, 154, 154, 0.9) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* External link styles */
|
||||||
|
.external-link {
|
||||||
|
color: #2563eb !important; /* Blue-600 for light mode */
|
||||||
|
text-decoration: none;
|
||||||
|
border-bottom: 1px solid transparent;
|
||||||
|
transition: all 0.2s ease-in-out;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.external-link:hover {
|
||||||
|
color: #1d4ed8 !important; /* Blue-700 for light mode */
|
||||||
|
border-bottom-color: #1d4ed8;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark .external-link {
|
||||||
|
color: #60a5fa !important; /* Blue-400 for dark mode */
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark .external-link:hover {
|
||||||
|
color: #93c5fd !important; /* Blue-300 for dark mode */
|
||||||
|
border-bottom-color: #93c5fd;
|
||||||
|
}
|
||||||
|
|
||||||
.border-red {
|
.border-red {
|
||||||
border-color: #937d7d; /* Tailwind red-800 for light mode */
|
border-color: #937d7d; /* Tailwind red-800 for light mode */
|
||||||
}
|
}
|
||||||
|
|||||||
344
frontend/src/pages/CloudPage.tsx
Normal file
344
frontend/src/pages/CloudPage.tsx
Normal file
@@ -0,0 +1,344 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import { useNavigate, useParams } from 'react-router-dom';
|
||||||
|
import { CloudServer, ServerConfig } from '@/types';
|
||||||
|
import { useCloudData } from '@/hooks/useCloudData';
|
||||||
|
import { useToast } from '@/contexts/ToastContext';
|
||||||
|
import { apiPost } from '@/utils/fetchInterceptor';
|
||||||
|
import CloudServerCard from '@/components/CloudServerCard';
|
||||||
|
import CloudServerDetail from '@/components/CloudServerDetail';
|
||||||
|
import MCPRouterApiKeyError from '@/components/MCPRouterApiKeyError';
|
||||||
|
import Pagination from '@/components/ui/Pagination';
|
||||||
|
|
||||||
|
const CloudPage: React.FC = () => {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const { serverName } = useParams<{ serverName?: string }>();
|
||||||
|
const { showToast } = useToast();
|
||||||
|
const [installing, setInstalling] = useState(false);
|
||||||
|
const [installedServers, setInstalledServers] = useState<Set<string>>(new Set());
|
||||||
|
|
||||||
|
const {
|
||||||
|
servers,
|
||||||
|
allServers,
|
||||||
|
// categories,
|
||||||
|
loading,
|
||||||
|
error,
|
||||||
|
setError,
|
||||||
|
// searchServers,
|
||||||
|
// filterByCategory,
|
||||||
|
// filterByTag,
|
||||||
|
// selectedCategory,
|
||||||
|
// selectedTag,
|
||||||
|
fetchServerTools,
|
||||||
|
callServerTool,
|
||||||
|
// Pagination
|
||||||
|
currentPage,
|
||||||
|
totalPages,
|
||||||
|
changePage,
|
||||||
|
serversPerPage,
|
||||||
|
changeServersPerPage
|
||||||
|
} = useCloudData();
|
||||||
|
|
||||||
|
// const [searchQuery, setSearchQuery] = useState('');
|
||||||
|
|
||||||
|
// const handleSearch = (e: React.FormEvent) => {
|
||||||
|
// e.preventDefault();
|
||||||
|
// searchServers(searchQuery);
|
||||||
|
// };
|
||||||
|
|
||||||
|
// const handleCategoryClick = (category: string) => {
|
||||||
|
// filterByCategory(category);
|
||||||
|
// };
|
||||||
|
|
||||||
|
// const handleClearFilters = () => {
|
||||||
|
// setSearchQuery('');
|
||||||
|
// filterByCategory('');
|
||||||
|
// filterByTag('');
|
||||||
|
// };
|
||||||
|
|
||||||
|
const handleServerClick = (server: CloudServer) => {
|
||||||
|
navigate(`/cloud/${server.name}`);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleBackToList = () => {
|
||||||
|
navigate('/cloud');
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCallTool = async (serverName: string, toolName: string, args: Record<string, any>) => {
|
||||||
|
try {
|
||||||
|
const result = await callServerTool(serverName, toolName, args);
|
||||||
|
showToast(t('cloud.toolCallSuccess', { toolName }), 'success');
|
||||||
|
return result;
|
||||||
|
} catch (error) {
|
||||||
|
const errorMessage = error instanceof Error ? error.message : String(error);
|
||||||
|
// Don't show toast for API key errors, let the component handle it
|
||||||
|
if (!isMCPRouterApiKeyError(errorMessage)) {
|
||||||
|
showToast(t('cloud.toolCallError', { toolName, error: errorMessage }), 'error');
|
||||||
|
}
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Helper function to check if error is MCPRouter API key not configured
|
||||||
|
const isMCPRouterApiKeyError = (errorMessage: string) => {
|
||||||
|
return errorMessage === 'MCPROUTER_API_KEY_NOT_CONFIGURED' ||
|
||||||
|
errorMessage.toLowerCase().includes('mcprouter api key not configured');
|
||||||
|
};
|
||||||
|
|
||||||
|
const handlePageChange = (page: number) => {
|
||||||
|
changePage(page);
|
||||||
|
// Scroll to top of page when changing pages
|
||||||
|
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleChangeItemsPerPage = (e: React.ChangeEvent<HTMLSelectElement>) => {
|
||||||
|
const newValue = parseInt(e.target.value, 10);
|
||||||
|
changeServersPerPage(newValue);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Handle cloud server installation
|
||||||
|
const handleInstallCloudServer = async (server: CloudServer, config: ServerConfig) => {
|
||||||
|
try {
|
||||||
|
setInstalling(true);
|
||||||
|
|
||||||
|
const payload = {
|
||||||
|
name: server.name,
|
||||||
|
config: config
|
||||||
|
};
|
||||||
|
|
||||||
|
const result = await apiPost('/servers', payload);
|
||||||
|
|
||||||
|
if (!result.success) {
|
||||||
|
const errorMessage = result?.message || t('server.addError');
|
||||||
|
showToast(errorMessage, 'error');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update installed servers set
|
||||||
|
setInstalledServers(prev => new Set(prev).add(server.name));
|
||||||
|
showToast(t('cloud.installSuccess', { name: server.title || server.name }), 'success');
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error installing cloud server:', error);
|
||||||
|
const errorMessage = error instanceof Error ? error.message : String(error);
|
||||||
|
showToast(t('cloud.installError', { error: errorMessage }), 'error');
|
||||||
|
} finally {
|
||||||
|
setInstalling(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Render detailed view if a server name is in the URL
|
||||||
|
if (serverName) {
|
||||||
|
return (
|
||||||
|
<CloudServerDetail
|
||||||
|
serverName={serverName}
|
||||||
|
onBack={handleBackToList}
|
||||||
|
onCallTool={handleCallTool}
|
||||||
|
fetchServerTools={fetchServerTools}
|
||||||
|
onInstall={handleInstallCloudServer}
|
||||||
|
installing={installing}
|
||||||
|
isInstalled={installedServers.has(serverName)}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<div className="flex justify-between items-center mb-8">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-2xl font-bold text-gray-900 flex items-center">
|
||||||
|
{t('cloud.title')}
|
||||||
|
<span className="text-sm text-gray-500 font-normal ml-2">
|
||||||
|
{t('cloud.subtitle').includes('提供支持') ? '由 ' : 'Powered by '}
|
||||||
|
<a
|
||||||
|
href="https://mcprouter.co/"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="external-link"
|
||||||
|
>
|
||||||
|
MCPRouter
|
||||||
|
</a>
|
||||||
|
{t('cloud.subtitle').includes('提供支持') ? ' 提供支持' : ''}
|
||||||
|
</span>
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{error && (
|
||||||
|
<>
|
||||||
|
{isMCPRouterApiKeyError(error) ? (
|
||||||
|
<MCPRouterApiKeyError />
|
||||||
|
) : (
|
||||||
|
<div className="bg-red-100 border-l-4 border-red-500 text-red-700 p-4 mb-6 error-box rounded-lg">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<p>{error}</p>
|
||||||
|
<button
|
||||||
|
onClick={() => setError(null)}
|
||||||
|
className="text-red-700 hover:text-red-900 transition-colors duration-200"
|
||||||
|
>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
|
||||||
|
<path fillRule="evenodd" d="M4.293 4.293a1 1 011.414 0L10 8.586l4.293-4.293a1 1 01.414 1.414L11.414 10l4.293 4.293a1 1 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 01-1.414-1.414L8.586 10 4.293 5.707a1 1 010-1.414z" clipRule="evenodd" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Search bar at the top
|
||||||
|
<div className="bg-white shadow rounded-lg p-6 mb-6 page-card">
|
||||||
|
<form onSubmit={handleSearch} className="flex space-x-4 mb-0">
|
||||||
|
<div className="flex-grow">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={searchQuery}
|
||||||
|
onChange={(e) => setSearchQuery(e.target.value)}
|
||||||
|
placeholder={t('cloud.searchPlaceholder')}
|
||||||
|
className="shadow appearance-none border border-gray-200 rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline form-input"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
className="px-4 py-2 bg-blue-100 text-blue-800 rounded hover:bg-blue-200 flex items-center btn-primary transition-all duration-200"
|
||||||
|
>
|
||||||
|
{t('cloud.search')}
|
||||||
|
</button>
|
||||||
|
{(searchQuery || selectedCategory || selectedTag) && (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={handleClearFilters}
|
||||||
|
className="border border-gray-300 text-gray-700 font-medium py-2 px-4 rounded hover:bg-gray-50 btn-secondary transition-all duration-200"
|
||||||
|
>
|
||||||
|
{t('cloud.clearFilters')}
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
*/}
|
||||||
|
|
||||||
|
<div className="flex flex-col md:flex-row gap-6">
|
||||||
|
{/* Left sidebar for filters
|
||||||
|
<div className="md:w-48 flex-shrink-0">
|
||||||
|
<div className="bg-white shadow rounded-lg p-4 mb-6 sticky top-4 page-card">
|
||||||
|
{categories.length > 0 ? (
|
||||||
|
<div className="mb-6">
|
||||||
|
<div className="flex justify-between items-center mb-3">
|
||||||
|
<h3 className="font-medium text-gray-900">{t('cloud.categories')}</h3>
|
||||||
|
{selectedCategory && (
|
||||||
|
<span className="text-xs text-blue-600 cursor-pointer hover:underline transition-colors duration-200" onClick={() => filterByCategory('')}>
|
||||||
|
{t('cloud.clearCategoryFilter')}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col gap-2">
|
||||||
|
{categories.map((category) => (
|
||||||
|
<button
|
||||||
|
key={category}
|
||||||
|
onClick={() => handleCategoryClick(category)}
|
||||||
|
className={`px-3 py-2 rounded text-sm text-left transition-all duration-200 ${selectedCategory === category
|
||||||
|
? 'bg-blue-100 text-blue-800 font-medium btn-primary'
|
||||||
|
: 'bg-gray-100 text-gray-800 hover:bg-gray-200 btn-secondary'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{category}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : loading ? (
|
||||||
|
<div className="mb-6">
|
||||||
|
<div className="mb-3">
|
||||||
|
<h3 className="font-medium text-gray-900">{t('cloud.categories')}</h3>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col gap-2 items-center py-4 loading-container">
|
||||||
|
<svg className="animate-spin h-6 w-6 text-blue-500 mb-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
||||||
|
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
|
||||||
|
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||||||
|
</svg>
|
||||||
|
<p className="text-sm text-gray-600">{t('app.loading')}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="mb-6">
|
||||||
|
<div className="mb-3">
|
||||||
|
<h3 className="font-medium text-gray-900">{t('cloud.categories')}</h3>
|
||||||
|
</div>
|
||||||
|
<p className="text-sm text-gray-600 py-2">{t('cloud.noCategories')}</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
*/}
|
||||||
|
|
||||||
|
{/* Main content area */}
|
||||||
|
<div className="flex-grow">
|
||||||
|
{loading ? (
|
||||||
|
<div className="bg-white shadow rounded-lg p-6 flex items-center justify-center">
|
||||||
|
<div className="flex flex-col items-center">
|
||||||
|
<svg className="animate-spin h-10 w-10 text-blue-500 mb-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
||||||
|
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
|
||||||
|
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||||||
|
</svg>
|
||||||
|
<p className="text-gray-600">{t('app.loading')}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : servers.length === 0 ? (
|
||||||
|
<div className="bg-white shadow rounded-lg p-6">
|
||||||
|
<p className="text-gray-600">{t('cloud.noServers')}</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 gap-6">
|
||||||
|
{servers.map((server, index) => (
|
||||||
|
<CloudServerCard
|
||||||
|
key={index}
|
||||||
|
server={server}
|
||||||
|
onClick={handleServerClick}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex justify-between items-center mb-4">
|
||||||
|
<div className="text-sm text-gray-500">
|
||||||
|
{t('cloud.showing', {
|
||||||
|
from: (currentPage - 1) * serversPerPage + 1,
|
||||||
|
to: Math.min(currentPage * serversPerPage, allServers.length),
|
||||||
|
total: allServers.length
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
<Pagination
|
||||||
|
currentPage={currentPage}
|
||||||
|
totalPages={totalPages}
|
||||||
|
onPageChange={handlePageChange}
|
||||||
|
/>
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<label htmlFor="perPage" className="text-sm text-gray-600">
|
||||||
|
{t('cloud.perPage')}:
|
||||||
|
</label>
|
||||||
|
<select
|
||||||
|
id="perPage"
|
||||||
|
value={serversPerPage}
|
||||||
|
onChange={handleChangeItemsPerPage}
|
||||||
|
className="border rounded p-1 text-sm btn-secondary outline-none"
|
||||||
|
>
|
||||||
|
<option value="6">6</option>
|
||||||
|
<option value="9">9</option>
|
||||||
|
<option value="12">12</option>
|
||||||
|
<option value="24">24</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-6">
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default CloudPage;
|
||||||
@@ -60,6 +60,15 @@ const ServersPage: React.FC = () => {
|
|||||||
<div className="flex justify-between items-center mb-8">
|
<div className="flex justify-between items-center mb-8">
|
||||||
<h1 className="text-2xl font-bold text-gray-900">{t('pages.servers.title')}</h1>
|
<h1 className="text-2xl font-bold text-gray-900">{t('pages.servers.title')}</h1>
|
||||||
<div className="flex space-x-4">
|
<div className="flex space-x-4">
|
||||||
|
<button
|
||||||
|
onClick={() => navigate('/cloud')}
|
||||||
|
className="px-4 py-2 bg-green-100 text-green-800 rounded hover:bg-green-200 flex items-center btn-primary transition-all duration-200"
|
||||||
|
>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 mr-2" viewBox="0 0 20 20" fill="currentColor">
|
||||||
|
<path d="M5.5 16a3.5 3.5 0 01-.369-6.98 4 4 0 117.753-1.977A4.5 4.5 0 1113.5 16H11v-3.586l.293.293a1 1 0 001.414-1.414l-2-2a1 1 0 00-1.414 0l-2 2a1 1 0 001.414 1.414L9 12.414V16H5.5z" />
|
||||||
|
</svg>
|
||||||
|
{t('nav.cloud')}
|
||||||
|
</button>
|
||||||
<button
|
<button
|
||||||
onClick={() => navigate('/market')}
|
onClick={() => navigate('/market')}
|
||||||
className="px-4 py-2 bg-blue-100 text-blue-800 rounded hover:bg-blue-200 flex items-center btn-primary transition-all duration-200"
|
className="px-4 py-2 bg-blue-100 text-blue-800 rounded hover:bg-blue-200 flex items-center btn-primary transition-all duration-200"
|
||||||
|
|||||||
@@ -36,18 +36,32 @@ const SettingsPage: React.FC = () => {
|
|||||||
openaiApiEmbeddingModel: '',
|
openaiApiEmbeddingModel: '',
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const [tempMCPRouterConfig, setTempMCPRouterConfig] = useState<{
|
||||||
|
apiKey: string;
|
||||||
|
referer: string;
|
||||||
|
title: string;
|
||||||
|
baseUrl: string;
|
||||||
|
}>({
|
||||||
|
apiKey: '',
|
||||||
|
referer: 'https://mcphub.app',
|
||||||
|
title: 'MCPHub',
|
||||||
|
baseUrl: 'https://api.mcprouter.to/v1',
|
||||||
|
});
|
||||||
|
|
||||||
const {
|
const {
|
||||||
routingConfig,
|
routingConfig,
|
||||||
tempRoutingConfig,
|
tempRoutingConfig,
|
||||||
setTempRoutingConfig,
|
setTempRoutingConfig,
|
||||||
installConfig: savedInstallConfig,
|
installConfig: savedInstallConfig,
|
||||||
smartRoutingConfig,
|
smartRoutingConfig,
|
||||||
|
mcpRouterConfig,
|
||||||
loading,
|
loading,
|
||||||
updateRoutingConfig,
|
updateRoutingConfig,
|
||||||
updateRoutingConfigBatch,
|
updateRoutingConfigBatch,
|
||||||
updateInstallConfig,
|
updateInstallConfig,
|
||||||
updateSmartRoutingConfig,
|
updateSmartRoutingConfig,
|
||||||
updateSmartRoutingConfigBatch
|
updateSmartRoutingConfigBatch,
|
||||||
|
updateMCPRouterConfig
|
||||||
} = useSettingsData();
|
} = useSettingsData();
|
||||||
|
|
||||||
// Update local installConfig when savedInstallConfig changes
|
// Update local installConfig when savedInstallConfig changes
|
||||||
@@ -69,14 +83,27 @@ const SettingsPage: React.FC = () => {
|
|||||||
}
|
}
|
||||||
}, [smartRoutingConfig]);
|
}, [smartRoutingConfig]);
|
||||||
|
|
||||||
|
// Update local tempMCPRouterConfig when mcpRouterConfig changes
|
||||||
|
useEffect(() => {
|
||||||
|
if (mcpRouterConfig) {
|
||||||
|
setTempMCPRouterConfig({
|
||||||
|
apiKey: mcpRouterConfig.apiKey || '',
|
||||||
|
referer: mcpRouterConfig.referer || 'https://mcphub.app',
|
||||||
|
title: mcpRouterConfig.title || 'MCPHub',
|
||||||
|
baseUrl: mcpRouterConfig.baseUrl || 'https://api.mcprouter.to/v1',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}, [mcpRouterConfig]);
|
||||||
|
|
||||||
const [sectionsVisible, setSectionsVisible] = useState({
|
const [sectionsVisible, setSectionsVisible] = useState({
|
||||||
routingConfig: false,
|
routingConfig: false,
|
||||||
installConfig: false,
|
installConfig: false,
|
||||||
smartRoutingConfig: false,
|
smartRoutingConfig: false,
|
||||||
|
mcpRouterConfig: false,
|
||||||
password: false
|
password: false
|
||||||
});
|
});
|
||||||
|
|
||||||
const toggleSection = (section: 'routingConfig' | 'installConfig' | 'smartRoutingConfig' | 'password') => {
|
const toggleSection = (section: 'routingConfig' | 'installConfig' | 'smartRoutingConfig' | 'mcpRouterConfig' | 'password') => {
|
||||||
setSectionsVisible(prev => ({
|
setSectionsVisible(prev => ({
|
||||||
...prev,
|
...prev,
|
||||||
[section]: !prev[section]
|
[section]: !prev[section]
|
||||||
@@ -143,6 +170,17 @@ const SettingsPage: React.FC = () => {
|
|||||||
await updateSmartRoutingConfig(key, tempSmartRoutingConfig[key]);
|
await updateSmartRoutingConfig(key, tempSmartRoutingConfig[key]);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const handleMCPRouterConfigChange = (key: 'apiKey' | 'referer' | 'title' | 'baseUrl', value: string) => {
|
||||||
|
setTempMCPRouterConfig({
|
||||||
|
...tempMCPRouterConfig,
|
||||||
|
[key]: value
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const saveMCPRouterConfig = async (key: 'apiKey' | 'referer' | 'title' | 'baseUrl') => {
|
||||||
|
await updateMCPRouterConfig(key, tempMCPRouterConfig[key]);
|
||||||
|
};
|
||||||
|
|
||||||
const handleSmartRoutingEnabledChange = async (value: boolean) => {
|
const handleSmartRoutingEnabledChange = async (value: boolean) => {
|
||||||
// If enabling Smart Routing, validate required fields and save any unsaved changes
|
// If enabling Smart Routing, validate required fields and save any unsaved changes
|
||||||
if (value) {
|
if (value) {
|
||||||
@@ -197,7 +235,7 @@ const SettingsPage: React.FC = () => {
|
|||||||
|
|
||||||
{/* Smart Routing Configuration Settings */}
|
{/* Smart Routing Configuration Settings */}
|
||||||
<PermissionChecker permissions={PERMISSIONS.SETTINGS_SMART_ROUTING}>
|
<PermissionChecker permissions={PERMISSIONS.SETTINGS_SMART_ROUTING}>
|
||||||
<div className="bg-white shadow rounded-lg py-4 px-6 mb-6 page-card">
|
<div className="bg-white shadow rounded-lg py-4 px-6 mb-6 page-card dashboard-card">
|
||||||
<div
|
<div
|
||||||
className="flex justify-between items-center cursor-pointer transition-colors duration-200 hover:text-blue-600"
|
className="flex justify-between items-center cursor-pointer transition-colors duration-200 hover:text-blue-600"
|
||||||
onClick={() => toggleSection('smartRoutingConfig')}
|
onClick={() => toggleSection('smartRoutingConfig')}
|
||||||
@@ -322,8 +360,123 @@ const SettingsPage: React.FC = () => {
|
|||||||
</div>
|
</div>
|
||||||
</PermissionChecker>
|
</PermissionChecker>
|
||||||
|
|
||||||
|
{/* MCPRouter Configuration Settings */}
|
||||||
|
<PermissionChecker permissions={PERMISSIONS.SETTINGS_INSTALL_CONFIG}>
|
||||||
|
<div className="bg-white shadow rounded-lg py-4 px-6 mb-6 page-card dashboard-card">
|
||||||
|
<div
|
||||||
|
className="flex justify-between items-center cursor-pointer transition-colors duration-200 hover:text-blue-600"
|
||||||
|
onClick={() => toggleSection('mcpRouterConfig')}
|
||||||
|
>
|
||||||
|
<h2 className="font-semibold text-gray-800">{t('settings.mcpRouterConfig')}</h2>
|
||||||
|
<span className="text-gray-500 transition-transform duration-200">
|
||||||
|
{sectionsVisible.mcpRouterConfig ? '▼' : '►'}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{sectionsVisible.mcpRouterConfig && (
|
||||||
|
<div className="space-y-4 mt-4">
|
||||||
|
<div className="p-3 bg-gray-50 rounded-md">
|
||||||
|
<div className="mb-2">
|
||||||
|
<h3 className="font-medium text-gray-700">{t('settings.mcpRouterApiKey')}</h3>
|
||||||
|
<p className="text-sm text-gray-500">{t('settings.mcpRouterApiKeyDescription')}</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
value={tempMCPRouterConfig.apiKey}
|
||||||
|
onChange={(e) => handleMCPRouterConfigChange('apiKey', e.target.value)}
|
||||||
|
placeholder={t('settings.mcpRouterApiKeyPlaceholder')}
|
||||||
|
className="flex-1 mt-1 block w-full py-2 px-3 border rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm border-gray-300 form-input"
|
||||||
|
disabled={loading}
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
onClick={() => saveMCPRouterConfig('apiKey')}
|
||||||
|
disabled={loading}
|
||||||
|
className="mt-1 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-md text-sm font-medium disabled:opacity-50 btn-primary"
|
||||||
|
>
|
||||||
|
{t('common.save')}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="p-3 bg-gray-50 rounded-md">
|
||||||
|
<div className="mb-2">
|
||||||
|
<h3 className="font-medium text-gray-700">{t('settings.mcpRouterReferer')}</h3>
|
||||||
|
<p className="text-sm text-gray-500">{t('settings.mcpRouterRefererDescription')}</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={tempMCPRouterConfig.referer}
|
||||||
|
onChange={(e) => handleMCPRouterConfigChange('referer', e.target.value)}
|
||||||
|
placeholder={t('settings.mcpRouterRefererPlaceholder')}
|
||||||
|
className="flex-1 mt-1 block w-full py-2 px-3 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm form-input"
|
||||||
|
disabled={loading}
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
onClick={() => saveMCPRouterConfig('referer')}
|
||||||
|
disabled={loading}
|
||||||
|
className="mt-1 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-md text-sm font-medium disabled:opacity-50 btn-primary"
|
||||||
|
>
|
||||||
|
{t('common.save')}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="p-3 bg-gray-50 rounded-md">
|
||||||
|
<div className="mb-2">
|
||||||
|
<h3 className="font-medium text-gray-700">{t('settings.mcpRouterTitle')}</h3>
|
||||||
|
<p className="text-sm text-gray-500">{t('settings.mcpRouterTitleDescription')}</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={tempMCPRouterConfig.title}
|
||||||
|
onChange={(e) => handleMCPRouterConfigChange('title', e.target.value)}
|
||||||
|
placeholder={t('settings.mcpRouterTitlePlaceholder')}
|
||||||
|
className="flex-1 mt-1 block w-full py-2 px-3 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm form-input"
|
||||||
|
disabled={loading}
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
onClick={() => saveMCPRouterConfig('title')}
|
||||||
|
disabled={loading}
|
||||||
|
className="mt-1 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-md text-sm font-medium disabled:opacity-50 btn-primary"
|
||||||
|
>
|
||||||
|
{t('common.save')}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="p-3 bg-gray-50 rounded-md">
|
||||||
|
<div className="mb-2">
|
||||||
|
<h3 className="font-medium text-gray-700">{t('settings.mcpRouterBaseUrl')}</h3>
|
||||||
|
<p className="text-sm text-gray-500">{t('settings.mcpRouterBaseUrlDescription')}</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={tempMCPRouterConfig.baseUrl}
|
||||||
|
onChange={(e) => handleMCPRouterConfigChange('baseUrl', e.target.value)}
|
||||||
|
placeholder={t('settings.mcpRouterBaseUrlPlaceholder')}
|
||||||
|
className="flex-1 mt-1 block w-full py-2 px-3 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm form-input"
|
||||||
|
disabled={loading}
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
onClick={() => saveMCPRouterConfig('baseUrl')}
|
||||||
|
disabled={loading}
|
||||||
|
className="mt-1 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-md text-sm font-medium disabled:opacity-50 btn-primary"
|
||||||
|
>
|
||||||
|
{t('common.save')}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</PermissionChecker>
|
||||||
|
|
||||||
{/* Route Configuration Settings */}
|
{/* Route Configuration Settings */}
|
||||||
<div className="bg-white shadow rounded-lg py-4 px-6 mb-6">
|
<div className="bg-white shadow rounded-lg py-4 px-6 mb-6 dashboard-card">
|
||||||
<div
|
<div
|
||||||
className="flex justify-between items-center cursor-pointer"
|
className="flex justify-between items-center cursor-pointer"
|
||||||
onClick={() => toggleSection('routingConfig')}
|
onClick={() => toggleSection('routingConfig')}
|
||||||
@@ -418,7 +571,7 @@ const SettingsPage: React.FC = () => {
|
|||||||
|
|
||||||
{/* Installation Configuration Settings */}
|
{/* Installation Configuration Settings */}
|
||||||
<PermissionChecker permissions={PERMISSIONS.SETTINGS_INSTALL_CONFIG}>
|
<PermissionChecker permissions={PERMISSIONS.SETTINGS_INSTALL_CONFIG}>
|
||||||
<div className="bg-white shadow rounded-lg py-4 px-6 mb-6">
|
<div className="bg-white shadow rounded-lg py-4 px-6 mb-6 dashboard-card">
|
||||||
<div
|
<div
|
||||||
className="flex justify-between items-center cursor-pointer"
|
className="flex justify-between items-center cursor-pointer"
|
||||||
onClick={() => toggleSection('installConfig')}
|
onClick={() => toggleSection('installConfig')}
|
||||||
@@ -508,7 +661,7 @@ const SettingsPage: React.FC = () => {
|
|||||||
</PermissionChecker>
|
</PermissionChecker>
|
||||||
|
|
||||||
{/* Change Password */}
|
{/* Change Password */}
|
||||||
<div className="bg-white shadow rounded-lg py-4 px-6 mb-6">
|
<div className="bg-white shadow rounded-lg py-4 px-6 mb-6 dashboard-card">
|
||||||
<div
|
<div
|
||||||
className="flex justify-between items-center cursor-pointer"
|
className="flex justify-between items-center cursor-pointer"
|
||||||
onClick={() => toggleSection('password')}
|
onClick={() => toggleSection('password')}
|
||||||
|
|||||||
@@ -55,6 +55,27 @@ export interface MarketServer {
|
|||||||
is_official?: boolean;
|
is_official?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Cloud Server types (for MCPRouter API)
|
||||||
|
export interface CloudServer {
|
||||||
|
created_at: string;
|
||||||
|
updated_at: string;
|
||||||
|
name: string;
|
||||||
|
author_name: string;
|
||||||
|
title: string;
|
||||||
|
description: string;
|
||||||
|
content: string;
|
||||||
|
server_key: string;
|
||||||
|
config_name: string;
|
||||||
|
server_url: string;
|
||||||
|
tools?: CloudServerTool[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface CloudServerTool {
|
||||||
|
name: string;
|
||||||
|
description: string;
|
||||||
|
inputSchema: Record<string, any>;
|
||||||
|
}
|
||||||
|
|
||||||
// Tool input schema types
|
// Tool input schema types
|
||||||
export interface ToolInputSchema {
|
export interface ToolInputSchema {
|
||||||
type: string;
|
type: string;
|
||||||
|
|||||||
@@ -1,12 +1,9 @@
|
|||||||
/** @type {import('tailwindcss').Config} */
|
/** @type {import('tailwindcss').Config} */
|
||||||
export default {
|
export default {
|
||||||
content: [
|
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
|
||||||
"./index.html",
|
|
||||||
"./src/**/*.{js,ts,jsx,tsx}",
|
|
||||||
],
|
|
||||||
darkMode: 'class', // Use class strategy for dark mode
|
darkMode: 'class', // Use class strategy for dark mode
|
||||||
theme: {
|
theme: {
|
||||||
extend: {},
|
extend: {},
|
||||||
},
|
},
|
||||||
plugins: [],
|
plugins: [require('@tailwindcss/line-clamp')],
|
||||||
}
|
};
|
||||||
|
|||||||
@@ -196,7 +196,8 @@
|
|||||||
"users": "Users",
|
"users": "Users",
|
||||||
"settings": "Settings",
|
"settings": "Settings",
|
||||||
"changePassword": "Change Password",
|
"changePassword": "Change Password",
|
||||||
"market": "Market",
|
"market": "Local Market",
|
||||||
|
"cloud": "Cloud Market",
|
||||||
"logs": "Logs"
|
"logs": "Logs"
|
||||||
},
|
},
|
||||||
"pages": {
|
"pages": {
|
||||||
@@ -281,7 +282,7 @@
|
|||||||
"configureTools": "Configure Tools"
|
"configureTools": "Configure Tools"
|
||||||
},
|
},
|
||||||
"market": {
|
"market": {
|
||||||
"title": "Server Market",
|
"title": "Local Market",
|
||||||
"official": "Official",
|
"official": "Official",
|
||||||
"by": "By",
|
"by": "By",
|
||||||
"unknown": "Unknown",
|
"unknown": "Unknown",
|
||||||
@@ -324,6 +325,58 @@
|
|||||||
"confirmVariablesMessage": "Please ensure these variables are properly defined in your runtime environment. Continue installing server?",
|
"confirmVariablesMessage": "Please ensure these variables are properly defined in your runtime environment. Continue installing server?",
|
||||||
"confirmAndInstall": "Confirm and Install"
|
"confirmAndInstall": "Confirm and Install"
|
||||||
},
|
},
|
||||||
|
"cloud": {
|
||||||
|
"title": "Cloud Market",
|
||||||
|
"subtitle": "Powered by MCPRouter",
|
||||||
|
"by": "By",
|
||||||
|
"server": "Server",
|
||||||
|
"config": "Config",
|
||||||
|
"created": "Created",
|
||||||
|
"updated": "Updated",
|
||||||
|
"available": "Available",
|
||||||
|
"description": "Description",
|
||||||
|
"details": "Details",
|
||||||
|
"tools": "Tools",
|
||||||
|
"tool": "tool",
|
||||||
|
"toolsAvailable": "{{count}} tool available||{{count}} tools available",
|
||||||
|
"loadingTools": "Loading tools...",
|
||||||
|
"noTools": "No tools available for this server",
|
||||||
|
"noDescription": "No description available",
|
||||||
|
"viewDetails": "View Details",
|
||||||
|
"parameters": "Parameters",
|
||||||
|
"result": "Result",
|
||||||
|
"error": "Error",
|
||||||
|
"callTool": "Call",
|
||||||
|
"calling": "Calling...",
|
||||||
|
"toolCallSuccess": "Tool {{toolName}} executed successfully",
|
||||||
|
"toolCallError": "Failed to call tool {{toolName}}: {{error}}",
|
||||||
|
"viewSchema": "View Schema",
|
||||||
|
"backToList": "Back to Cloud Market",
|
||||||
|
"search": "Search",
|
||||||
|
"searchPlaceholder": "Search cloud servers by name, title, or author",
|
||||||
|
"clearFilters": "Clear Filters",
|
||||||
|
"clearCategoryFilter": "Clear",
|
||||||
|
"clearTagFilter": "Clear",
|
||||||
|
"categories": "Categories",
|
||||||
|
"tags": "Tags",
|
||||||
|
"noCategories": "No categories found",
|
||||||
|
"noTags": "No tags found",
|
||||||
|
"noServers": "No cloud servers found",
|
||||||
|
"fetchError": "Error fetching cloud servers",
|
||||||
|
"serverNotFound": "Cloud server not found",
|
||||||
|
"searchError": "Error searching cloud servers",
|
||||||
|
"filterError": "Error filtering cloud servers by category",
|
||||||
|
"tagFilterError": "Error filtering cloud servers by tag",
|
||||||
|
"showing": "Showing {{from}}-{{to}} of {{total}} cloud servers",
|
||||||
|
"perPage": "Per page",
|
||||||
|
"apiKeyNotConfigured": "MCPRouter API key not configured",
|
||||||
|
"apiKeyNotConfiguredDescription": "To use cloud servers, you need to configure your MCPRouter API key.",
|
||||||
|
"getApiKey": "Get API Key",
|
||||||
|
"configureInSettings": "Configure in Settings",
|
||||||
|
"installServer": "Install {{name}}",
|
||||||
|
"installSuccess": "Server {{name}} installed successfully",
|
||||||
|
"installError": "Failed to install server: {{error}}"
|
||||||
|
},
|
||||||
"tool": {
|
"tool": {
|
||||||
"run": "Run",
|
"run": "Run",
|
||||||
"running": "Running...",
|
"running": "Running...",
|
||||||
@@ -394,7 +447,20 @@
|
|||||||
"openaiApiEmbeddingModelPlaceholder": "text-embedding-3-small",
|
"openaiApiEmbeddingModelPlaceholder": "text-embedding-3-small",
|
||||||
"smartRoutingConfigUpdated": "Smart routing configuration updated successfully",
|
"smartRoutingConfigUpdated": "Smart routing configuration updated successfully",
|
||||||
"smartRoutingRequiredFields": "Database URL and OpenAI API Key are required to enable smart routing",
|
"smartRoutingRequiredFields": "Database URL and OpenAI API Key are required to enable smart routing",
|
||||||
"smartRoutingValidationError": "Please fill in the required fields before enabling Smart Routing: {{fields}}"
|
"smartRoutingValidationError": "Please fill in the required fields before enabling Smart Routing: {{fields}}",
|
||||||
|
"mcpRouterConfig": "Cloud Market",
|
||||||
|
"mcpRouterApiKey": "MCPRouter API Key",
|
||||||
|
"mcpRouterApiKeyDescription": "API key for accessing MCPRouter cloud market services",
|
||||||
|
"mcpRouterApiKeyPlaceholder": "Enter MCPRouter API key",
|
||||||
|
"mcpRouterReferer": "Referer",
|
||||||
|
"mcpRouterRefererDescription": "Referer header for MCPRouter API requests",
|
||||||
|
"mcpRouterRefererPlaceholder": "https://mcphub.app",
|
||||||
|
"mcpRouterTitle": "Title",
|
||||||
|
"mcpRouterTitleDescription": "Title header for MCPRouter API requests",
|
||||||
|
"mcpRouterTitlePlaceholder": "MCPHub",
|
||||||
|
"mcpRouterBaseUrl": "Base URL",
|
||||||
|
"mcpRouterBaseUrlDescription": "Base URL for MCPRouter API",
|
||||||
|
"mcpRouterBaseUrlPlaceholder": "https://api.mcprouter.to/v1"
|
||||||
},
|
},
|
||||||
"dxt": {
|
"dxt": {
|
||||||
"upload": "Upload",
|
"upload": "Upload",
|
||||||
|
|||||||
@@ -197,7 +197,8 @@
|
|||||||
"changePassword": "修改密码",
|
"changePassword": "修改密码",
|
||||||
"groups": "分组",
|
"groups": "分组",
|
||||||
"users": "用户",
|
"users": "用户",
|
||||||
"market": "市场",
|
"market": "本地市场",
|
||||||
|
"cloud": "云端市场",
|
||||||
"logs": "日志"
|
"logs": "日志"
|
||||||
},
|
},
|
||||||
"pages": {
|
"pages": {
|
||||||
@@ -229,7 +230,7 @@
|
|||||||
"title": "用户管理"
|
"title": "用户管理"
|
||||||
},
|
},
|
||||||
"market": {
|
"market": {
|
||||||
"title": "服务器市场 - （数据来源于 mcpm.sh）"
|
"title": "本地市场 - （数据来源于 mcpm.sh）"
|
||||||
},
|
},
|
||||||
"logs": {
|
"logs": {
|
||||||
"title": "系统日志"
|
"title": "系统日志"
|
||||||
@@ -282,7 +283,7 @@
|
|||||||
"configureTools": "配置工具"
|
"configureTools": "配置工具"
|
||||||
},
|
},
|
||||||
"market": {
|
"market": {
|
||||||
"title": "服务器市场",
|
"title": "本地市场",
|
||||||
"official": "官方",
|
"official": "官方",
|
||||||
"by": "作者",
|
"by": "作者",
|
||||||
"unknown": "未知",
|
"unknown": "未知",
|
||||||
@@ -314,7 +315,7 @@
|
|||||||
"required": "必填",
|
"required": "必填",
|
||||||
"example": "示例",
|
"example": "示例",
|
||||||
"viewSchema": "查看结构",
|
"viewSchema": "查看结构",
|
||||||
"fetchError": "获取服务器市场数据失败",
|
"fetchError": "获取本地市场服务器数据失败",
|
||||||
"serverNotFound": "未找到服务器",
|
"serverNotFound": "未找到服务器",
|
||||||
"searchError": "搜索服务器失败",
|
"searchError": "搜索服务器失败",
|
||||||
"filterError": "按分类筛选服务器失败",
|
"filterError": "按分类筛选服务器失败",
|
||||||
@@ -325,6 +326,58 @@
|
|||||||
"confirmVariablesMessage": "请确保这些变量在运行环境中已正确定义。是否继续安装服务器？",
|
"confirmVariablesMessage": "请确保这些变量在运行环境中已正确定义。是否继续安装服务器？",
|
||||||
"confirmAndInstall": "确认并安装"
|
"confirmAndInstall": "确认并安装"
|
||||||
},
|
},
|
||||||
|
"cloud": {
|
||||||
|
"title": "云端市场",
|
||||||
|
"subtitle": "由 MCPRouter 提供支持",
|
||||||
|
"by": "作者",
|
||||||
|
"server": "服务器",
|
||||||
|
"config": "配置",
|
||||||
|
"created": "创建时间",
|
||||||
|
"updated": "更新时间",
|
||||||
|
"available": "可用",
|
||||||
|
"description": "描述",
|
||||||
|
"details": "详细信息",
|
||||||
|
"tools": "工具",
|
||||||
|
"tool": "个工具",
|
||||||
|
"toolsAvailable": "{{count}} 个工具可用",
|
||||||
|
"loadingTools": "加载工具中...",
|
||||||
|
"noTools": "该服务器没有可用工具",
|
||||||
|
"noDescription": "无描述信息",
|
||||||
|
"viewDetails": "查看详情",
|
||||||
|
"parameters": "参数",
|
||||||
|
"result": "结果",
|
||||||
|
"error": "错误",
|
||||||
|
"callTool": "调用",
|
||||||
|
"calling": "调用中...",
|
||||||
|
"toolCallSuccess": "工具 {{toolName}} 执行成功",
|
||||||
|
"toolCallError": "调用工具 {{toolName}} 失败：{{error}}",
|
||||||
|
"viewSchema": "查看结构",
|
||||||
|
"backToList": "返回云端市场",
|
||||||
|
"search": "搜索",
|
||||||
|
"searchPlaceholder": "搜索云端服务器名称、标题或作者",
|
||||||
|
"clearFilters": "清除筛选",
|
||||||
|
"clearCategoryFilter": "清除",
|
||||||
|
"clearTagFilter": "清除",
|
||||||
|
"categories": "分类",
|
||||||
|
"tags": "标签",
|
||||||
|
"noCategories": "未找到分类",
|
||||||
|
"noTags": "未找到标签",
|
||||||
|
"noServers": "未找到云端服务器",
|
||||||
|
"fetchError": "获取云端服务器失败",
|
||||||
|
"serverNotFound": "未找到云端服务器",
|
||||||
|
"searchError": "搜索云端服务器失败",
|
||||||
|
"filterError": "按分类筛选云端服务器失败",
|
||||||
|
"tagFilterError": "按标签筛选云端服务器失败",
|
||||||
|
"showing": "显示 {{from}}-{{to}}/{{total}} 个云端服务器",
|
||||||
|
"perPage": "每页显示",
|
||||||
|
"apiKeyNotConfigured": "MCPRouter API 密钥未配置",
|
||||||
|
"apiKeyNotConfiguredDescription": "要使用云端服务器，您需要配置 MCPRouter API 密钥。",
|
||||||
|
"getApiKey": "获取 API 密钥",
|
||||||
|
"configureInSettings": "在设置中配置",
|
||||||
|
"installServer": "安装 {{name}}",
|
||||||
|
"installSuccess": "服务器 {{name}} 安装成功",
|
||||||
|
"installError": "安装服务器失败：{{error}}"
|
||||||
|
},
|
||||||
"tool": {
|
"tool": {
|
||||||
"run": "运行",
|
"run": "运行",
|
||||||
"running": "运行中...",
|
"running": "运行中...",
|
||||||
@@ -396,7 +449,20 @@
|
|||||||
"openaiApiEmbeddingModelPlaceholder": "text-embedding-3-small",
|
"openaiApiEmbeddingModelPlaceholder": "text-embedding-3-small",
|
||||||
"smartRoutingConfigUpdated": "智能路由配置更新成功",
|
"smartRoutingConfigUpdated": "智能路由配置更新成功",
|
||||||
"smartRoutingRequiredFields": "启用智能路由需要填写数据库连接地址和 OpenAI API 密钥",
|
"smartRoutingRequiredFields": "启用智能路由需要填写数据库连接地址和 OpenAI API 密钥",
|
||||||
"smartRoutingValidationError": "启用智能路由前请先填写必要字段：{{fields}}"
|
"smartRoutingValidationError": "启用智能路由前请先填写必要字段：{{fields}}",
|
||||||
|
"mcpRouterConfig": "云端市场",
|
||||||
|
"mcpRouterApiKey": "MCPRouter API 密钥",
|
||||||
|
"mcpRouterApiKeyDescription": "用于访问 MCPRouter 云端市场服务的 API 密钥",
|
||||||
|
"mcpRouterApiKeyPlaceholder": "请输入 MCPRouter API 密钥",
|
||||||
|
"mcpRouterReferer": "引用地址",
|
||||||
|
"mcpRouterRefererDescription": "MCPRouter API 请求的引用地址头",
|
||||||
|
"mcpRouterRefererPlaceholder": "https://mcphub.app",
|
||||||
|
"mcpRouterTitle": "标题",
|
||||||
|
"mcpRouterTitleDescription": "MCPRouter API 请求的标题头",
|
||||||
|
"mcpRouterTitlePlaceholder": "MCPHub",
|
||||||
|
"mcpRouterBaseUrl": "基础地址",
|
||||||
|
"mcpRouterBaseUrlDescription": "MCPRouter API 的基础地址",
|
||||||
|
"mcpRouterBaseUrlPlaceholder": "https://api.mcprouter.to/v1"
|
||||||
},
|
},
|
||||||
"dxt": {
|
"dxt": {
|
||||||
"upload": "上传",
|
"upload": "上传",
|
||||||
|
|||||||
@@ -75,6 +75,7 @@
|
|||||||
"@shadcn/ui": "^0.0.4",
|
"@shadcn/ui": "^0.0.4",
|
||||||
"@swc/core": "^1.13.0",
|
"@swc/core": "^1.13.0",
|
||||||
"@swc/jest": "^0.2.39",
|
"@swc/jest": "^0.2.39",
|
||||||
|
"@tailwindcss/line-clamp": "^0.4.4",
|
||||||
"@tailwindcss/postcss": "^4.1.3",
|
"@tailwindcss/postcss": "^4.1.3",
|
||||||
"@tailwindcss/vite": "^4.1.7",
|
"@tailwindcss/vite": "^4.1.7",
|
||||||
"@types/bcryptjs": "^3.0.0",
|
"@types/bcryptjs": "^3.0.0",
|
||||||
|
|||||||
12
pnpm-lock.yaml
generated
12
pnpm-lock.yaml
generated
@@ -93,6 +93,9 @@ importers:
|
|||||||
'@swc/jest':
|
'@swc/jest':
|
||||||
specifier: ^0.2.39
|
specifier: ^0.2.39
|
||||||
version: 0.2.39(@swc/core@1.13.0)
|
version: 0.2.39(@swc/core@1.13.0)
|
||||||
|
'@tailwindcss/line-clamp':
|
||||||
|
specifier: ^0.4.4
|
||||||
|
version: 0.4.4(tailwindcss@4.1.11)
|
||||||
'@tailwindcss/postcss':
|
'@tailwindcss/postcss':
|
||||||
specifier: ^4.1.3
|
specifier: ^4.1.3
|
||||||
version: 4.1.11
|
version: 4.1.11
|
||||||
@@ -1445,6 +1448,11 @@ packages:
|
|||||||
'@swc/types@0.1.23':
|
'@swc/types@0.1.23':
|
||||||
resolution: {integrity: sha512-u1iIVZV9Q0jxY+yM2vw/hZGDNudsN85bBpTqzAQ9rzkxW9D+e3aEM4Han+ow518gSewkXgjmEK0BD79ZcNVgPw==}
|
resolution: {integrity: sha512-u1iIVZV9Q0jxY+yM2vw/hZGDNudsN85bBpTqzAQ9rzkxW9D+e3aEM4Han+ow518gSewkXgjmEK0BD79ZcNVgPw==}
|
||||||
|
|
||||||
|
'@tailwindcss/line-clamp@0.4.4':
|
||||||
|
resolution: {integrity: sha512-5U6SY5z8N42VtrCrKlsTAA35gy2VSyYtHWCsg1H87NU1SXnEfekTVlrga9fzUDrrHcGi2Lb5KenUWb4lRQT5/g==}
|
||||||
|
peerDependencies:
|
||||||
|
tailwindcss: '>=2.0.0 || >=3.0.0 || >=3.0.0-alpha.1'
|
||||||
|
|
||||||
'@tailwindcss/node@4.1.11':
|
'@tailwindcss/node@4.1.11':
|
||||||
resolution: {integrity: sha512-yzhzuGRmv5QyU9qLNg4GTlYI6STedBWRE7NjxP45CsFYYq9taI0zJXZBMqIC/c8fViNLhmrbpSFS57EoxUmD6Q==}
|
resolution: {integrity: sha512-yzhzuGRmv5QyU9qLNg4GTlYI6STedBWRE7NjxP45CsFYYq9taI0zJXZBMqIC/c8fViNLhmrbpSFS57EoxUmD6Q==}
|
||||||
|
|
||||||
@@ -5486,6 +5494,10 @@ snapshots:
|
|||||||
dependencies:
|
dependencies:
|
||||||
'@swc/counter': 0.1.3
|
'@swc/counter': 0.1.3
|
||||||
|
|
||||||
|
'@tailwindcss/line-clamp@0.4.4(tailwindcss@4.1.11)':
|
||||||
|
dependencies:
|
||||||
|
tailwindcss: 4.1.11
|
||||||
|
|
||||||
'@tailwindcss/node@4.1.11':
|
'@tailwindcss/node@4.1.11':
|
||||||
dependencies:
|
dependencies:
|
||||||
'@ampproject/remapping': 2.3.0
|
'@ampproject/remapping': 2.3.0
|
||||||
|
|||||||
273
src/controllers/cloudController.ts
Normal file
273
src/controllers/cloudController.ts
Normal file
@@ -0,0 +1,273 @@
|
|||||||
|
import { Request, Response } from 'express';
|
||||||
|
import { ApiResponse, CloudServer, CloudTool } from '../types/index.js';
|
||||||
|
import {
|
||||||
|
getCloudServers,
|
||||||
|
getCloudServerByName,
|
||||||
|
getCloudServerTools,
|
||||||
|
callCloudServerTool,
|
||||||
|
getCloudCategories,
|
||||||
|
getCloudTags,
|
||||||
|
searchCloudServers,
|
||||||
|
filterCloudServersByCategory,
|
||||||
|
filterCloudServersByTag,
|
||||||
|
} from '../services/cloudService.js';
|
||||||
|
|
||||||
|
// Get all cloud market servers
|
||||||
|
export const getAllCloudServers = async (_: Request, res: Response): Promise<void> => {
|
||||||
|
try {
|
||||||
|
const cloudServers = await getCloudServers();
|
||||||
|
const response: ApiResponse<CloudServer[]> = {
|
||||||
|
success: true,
|
||||||
|
data: cloudServers,
|
||||||
|
};
|
||||||
|
res.json(response);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error getting cloud market servers:', error);
|
||||||
|
const errorMessage =
|
||||||
|
error instanceof Error ? error.message : 'Failed to get cloud market servers';
|
||||||
|
res.status(500).json({
|
||||||
|
success: false,
|
||||||
|
message: errorMessage,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Get a specific cloud market server by name
|
||||||
|
export const getCloudServer = async (req: Request, res: Response): Promise<void> => {
|
||||||
|
try {
|
||||||
|
const { name } = req.params;
|
||||||
|
if (!name) {
|
||||||
|
res.status(400).json({
|
||||||
|
success: false,
|
||||||
|
message: 'Server name is required',
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const server = await getCloudServerByName(name);
|
||||||
|
if (!server) {
|
||||||
|
res.status(404).json({
|
||||||
|
success: false,
|
||||||
|
message: 'Cloud server not found',
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Fetch tools for this server
|
||||||
|
try {
|
||||||
|
const tools = await getCloudServerTools(server.server_key);
|
||||||
|
server.tools = tools;
|
||||||
|
} catch (toolError) {
|
||||||
|
console.warn(`Failed to fetch tools for server ${server.name}:`, toolError);
|
||||||
|
// Continue without tools
|
||||||
|
}
|
||||||
|
|
||||||
|
const response: ApiResponse<CloudServer> = {
|
||||||
|
success: true,
|
||||||
|
data: server,
|
||||||
|
};
|
||||||
|
res.json(response);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error getting cloud market server:', error);
|
||||||
|
const errorMessage =
|
||||||
|
error instanceof Error ? error.message : 'Failed to get cloud market server';
|
||||||
|
res.status(500).json({
|
||||||
|
success: false,
|
||||||
|
message: errorMessage,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Get all cloud market categories
|
||||||
|
export const getAllCloudCategories = async (_: Request, res: Response): Promise<void> => {
|
||||||
|
try {
|
||||||
|
const categories = await getCloudCategories();
|
||||||
|
const response: ApiResponse<string[]> = {
|
||||||
|
success: true,
|
||||||
|
data: categories,
|
||||||
|
};
|
||||||
|
res.json(response);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error getting cloud market categories:', error);
|
||||||
|
const errorMessage =
|
||||||
|
error instanceof Error ? error.message : 'Failed to get cloud market categories';
|
||||||
|
res.status(500).json({
|
||||||
|
success: false,
|
||||||
|
message: errorMessage,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Get all cloud market tags
|
||||||
|
export const getAllCloudTags = async (_: Request, res: Response): Promise<void> => {
|
||||||
|
try {
|
||||||
|
const tags = await getCloudTags();
|
||||||
|
const response: ApiResponse<string[]> = {
|
||||||
|
success: true,
|
||||||
|
data: tags,
|
||||||
|
};
|
||||||
|
res.json(response);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error getting cloud market tags:', error);
|
||||||
|
const errorMessage = error instanceof Error ? error.message : 'Failed to get cloud market tags';
|
||||||
|
res.status(500).json({
|
||||||
|
success: false,
|
||||||
|
message: errorMessage,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Search cloud market servers
|
||||||
|
export const searchCloudServersByQuery = async (req: Request, res: Response): Promise<void> => {
|
||||||
|
try {
|
||||||
|
const query = req.query.query as string;
|
||||||
|
if (!query || query.trim() === '') {
|
||||||
|
res.status(400).json({
|
||||||
|
success: false,
|
||||||
|
message: 'Search query is required',
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const servers = await searchCloudServers(query);
|
||||||
|
const response: ApiResponse<CloudServer[]> = {
|
||||||
|
success: true,
|
||||||
|
data: servers,
|
||||||
|
};
|
||||||
|
res.json(response);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error searching cloud market servers:', error);
|
||||||
|
const errorMessage =
|
||||||
|
error instanceof Error ? error.message : 'Failed to search cloud market servers';
|
||||||
|
res.status(500).json({
|
||||||
|
success: false,
|
||||||
|
message: errorMessage,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Get cloud market servers by category
|
||||||
|
export const getCloudServersByCategory = async (req: Request, res: Response): Promise<void> => {
|
||||||
|
try {
|
||||||
|
const { category } = req.params;
|
||||||
|
if (!category) {
|
||||||
|
res.status(400).json({
|
||||||
|
success: false,
|
||||||
|
message: 'Category is required',
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const servers = await filterCloudServersByCategory(category);
|
||||||
|
const response: ApiResponse<CloudServer[]> = {
|
||||||
|
success: true,
|
||||||
|
data: servers,
|
||||||
|
};
|
||||||
|
res.json(response);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error getting cloud market servers by category:', error);
|
||||||
|
const errorMessage =
|
||||||
|
error instanceof Error ? error.message : 'Failed to get cloud market servers by category';
|
||||||
|
res.status(500).json({
|
||||||
|
success: false,
|
||||||
|
message: errorMessage,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Get cloud market servers by tag
|
||||||
|
export const getCloudServersByTag = async (req: Request, res: Response): Promise<void> => {
|
||||||
|
try {
|
||||||
|
const { tag } = req.params;
|
||||||
|
if (!tag) {
|
||||||
|
res.status(400).json({
|
||||||
|
success: false,
|
||||||
|
message: 'Tag is required',
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const servers = await filterCloudServersByTag(tag);
|
||||||
|
const response: ApiResponse<CloudServer[]> = {
|
||||||
|
success: true,
|
||||||
|
data: servers,
|
||||||
|
};
|
||||||
|
res.json(response);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error getting cloud market servers by tag:', error);
|
||||||
|
const errorMessage =
|
||||||
|
error instanceof Error ? error.message : 'Failed to get cloud market servers by tag';
|
||||||
|
res.status(500).json({
|
||||||
|
success: false,
|
||||||
|
message: errorMessage,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Get tools for a specific cloud server
|
||||||
|
export const getCloudServerToolsList = async (req: Request, res: Response): Promise<void> => {
|
||||||
|
try {
|
||||||
|
const { serverName } = req.params;
|
||||||
|
if (!serverName) {
|
||||||
|
res.status(400).json({
|
||||||
|
success: false,
|
||||||
|
message: 'Server name is required',
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const tools = await getCloudServerTools(serverName);
|
||||||
|
const response: ApiResponse<CloudTool[]> = {
|
||||||
|
success: true,
|
||||||
|
data: tools,
|
||||||
|
};
|
||||||
|
res.json(response);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error getting cloud server tools:', error);
|
||||||
|
const errorMessage =
|
||||||
|
error instanceof Error ? error.message : 'Failed to get cloud server tools';
|
||||||
|
res.status(500).json({
|
||||||
|
success: false,
|
||||||
|
message: errorMessage,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Call a tool on a cloud server
|
||||||
|
export const callCloudTool = async (req: Request, res: Response): Promise<void> => {
|
||||||
|
try {
|
||||||
|
const { serverName, toolName } = req.params;
|
||||||
|
const { arguments: args } = req.body;
|
||||||
|
|
||||||
|
if (!serverName) {
|
||||||
|
res.status(400).json({
|
||||||
|
success: false,
|
||||||
|
message: 'Server name is required',
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!toolName) {
|
||||||
|
res.status(400).json({
|
||||||
|
success: false,
|
||||||
|
message: 'Tool name is required',
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const result = await callCloudServerTool(serverName, toolName, args || {});
|
||||||
|
const response: ApiResponse = {
|
||||||
|
success: true,
|
||||||
|
data: result,
|
||||||
|
};
|
||||||
|
res.json(response);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error calling cloud server tool:', error);
|
||||||
|
const errorMessage =
|
||||||
|
error instanceof Error ? error.message : 'Failed to call cloud server tool';
|
||||||
|
res.status(500).json({
|
||||||
|
success: false,
|
||||||
|
message: errorMessage,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
@@ -505,7 +505,7 @@ export const updateToolDescription = async (req: Request, res: Response): Promis
|
|||||||
|
|
||||||
export const updateSystemConfig = (req: Request, res: Response): void => {
|
export const updateSystemConfig = (req: Request, res: Response): void => {
|
||||||
try {
|
try {
|
||||||
const { routing, install, smartRouting } = req.body;
|
const { routing, install, smartRouting, mcpRouter } = req.body;
|
||||||
const currentUser = (req as any).user;
|
const currentUser = (req as any).user;
|
||||||
|
|
||||||
if (
|
if (
|
||||||
@@ -524,7 +524,12 @@ export const updateSystemConfig = (req: Request, res: Response): void => {
|
|||||||
typeof smartRouting.dbUrl !== 'string' &&
|
typeof smartRouting.dbUrl !== 'string' &&
|
||||||
typeof smartRouting.openaiApiBaseUrl !== 'string' &&
|
typeof smartRouting.openaiApiBaseUrl !== 'string' &&
|
||||||
typeof smartRouting.openaiApiKey !== 'string' &&
|
typeof smartRouting.openaiApiKey !== 'string' &&
|
||||||
typeof smartRouting.openaiApiEmbeddingModel !== 'string'))
|
typeof smartRouting.openaiApiEmbeddingModel !== 'string')) &&
|
||||||
|
(!mcpRouter ||
|
||||||
|
(typeof mcpRouter.apiKey !== 'string' &&
|
||||||
|
typeof mcpRouter.referer !== 'string' &&
|
||||||
|
typeof mcpRouter.title !== 'string' &&
|
||||||
|
typeof mcpRouter.baseUrl !== 'string'))
|
||||||
) {
|
) {
|
||||||
res.status(400).json({
|
res.status(400).json({
|
||||||
success: false,
|
success: false,
|
||||||
@@ -555,6 +560,12 @@ export const updateSystemConfig = (req: Request, res: Response): void => {
|
|||||||
openaiApiKey: '',
|
openaiApiKey: '',
|
||||||
openaiApiEmbeddingModel: '',
|
openaiApiEmbeddingModel: '',
|
||||||
},
|
},
|
||||||
|
mcpRouter: {
|
||||||
|
apiKey: '',
|
||||||
|
referer: 'https://mcphub.app',
|
||||||
|
title: 'MCPHub',
|
||||||
|
baseUrl: 'https://api.mcprouter.to/v1',
|
||||||
|
},
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -586,6 +597,15 @@ export const updateSystemConfig = (req: Request, res: Response): void => {
|
|||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (!settings.systemConfig.mcpRouter) {
|
||||||
|
settings.systemConfig.mcpRouter = {
|
||||||
|
apiKey: '',
|
||||||
|
referer: 'https://mcphub.app',
|
||||||
|
title: 'MCPHub',
|
||||||
|
baseUrl: 'https://api.mcprouter.to/v1',
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
if (routing) {
|
if (routing) {
|
||||||
if (typeof routing.enableGlobalRoute === 'boolean') {
|
if (typeof routing.enableGlobalRoute === 'boolean') {
|
||||||
settings.systemConfig.routing.enableGlobalRoute = routing.enableGlobalRoute;
|
settings.systemConfig.routing.enableGlobalRoute = routing.enableGlobalRoute;
|
||||||
@@ -676,6 +696,21 @@ export const updateSystemConfig = (req: Request, res: Response): void => {
|
|||||||
needsSync = (!wasSmartRoutingEnabled && isNowEnabled) || (isNowEnabled && hasConfigChanged);
|
needsSync = (!wasSmartRoutingEnabled && isNowEnabled) || (isNowEnabled && hasConfigChanged);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (mcpRouter) {
|
||||||
|
if (typeof mcpRouter.apiKey === 'string') {
|
||||||
|
settings.systemConfig.mcpRouter.apiKey = mcpRouter.apiKey;
|
||||||
|
}
|
||||||
|
if (typeof mcpRouter.referer === 'string') {
|
||||||
|
settings.systemConfig.mcpRouter.referer = mcpRouter.referer;
|
||||||
|
}
|
||||||
|
if (typeof mcpRouter.title === 'string') {
|
||||||
|
settings.systemConfig.mcpRouter.title = mcpRouter.title;
|
||||||
|
}
|
||||||
|
if (typeof mcpRouter.baseUrl === 'string') {
|
||||||
|
settings.systemConfig.mcpRouter.baseUrl = mcpRouter.baseUrl;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
if (saveSettings(settings, currentUser)) {
|
if (saveSettings(settings, currentUser)) {
|
||||||
res.json({
|
res.json({
|
||||||
success: true,
|
success: true,
|
||||||
|
|||||||
@@ -43,6 +43,17 @@ import {
|
|||||||
getMarketServersByCategory,
|
getMarketServersByCategory,
|
||||||
getMarketServersByTag,
|
getMarketServersByTag,
|
||||||
} from '../controllers/marketController.js';
|
} from '../controllers/marketController.js';
|
||||||
|
import {
|
||||||
|
getAllCloudServers,
|
||||||
|
getCloudServer,
|
||||||
|
getAllCloudCategories,
|
||||||
|
getAllCloudTags,
|
||||||
|
searchCloudServersByQuery,
|
||||||
|
getCloudServersByCategory,
|
||||||
|
getCloudServersByTag,
|
||||||
|
getCloudServerToolsList,
|
||||||
|
callCloudTool,
|
||||||
|
} from '../controllers/cloudController.js';
|
||||||
import { login, register, getCurrentUser, changePassword } from '../controllers/authController.js';
|
import { login, register, getCurrentUser, changePassword } from '../controllers/authController.js';
|
||||||
import { getAllLogs, clearLogs, streamLogs } from '../controllers/logController.js';
|
import { getAllLogs, clearLogs, streamLogs } from '../controllers/logController.js';
|
||||||
import { getRuntimeConfig, getPublicConfig } from '../controllers/configController.js';
|
import { getRuntimeConfig, getPublicConfig } from '../controllers/configController.js';
|
||||||
@@ -103,6 +114,17 @@ export const initRoutes = (app: express.Application): void => {
|
|||||||
router.get('/market/tags', getAllMarketTags);
|
router.get('/market/tags', getAllMarketTags);
|
||||||
router.get('/market/tags/:tag', getMarketServersByTag);
|
router.get('/market/tags/:tag', getMarketServersByTag);
|
||||||
|
|
||||||
|
// Cloud Market routes
|
||||||
|
router.get('/cloud/servers', getAllCloudServers);
|
||||||
|
router.get('/cloud/servers/search', searchCloudServersByQuery);
|
||||||
|
router.get('/cloud/servers/:name', getCloudServer);
|
||||||
|
router.get('/cloud/categories', getAllCloudCategories);
|
||||||
|
router.get('/cloud/categories/:category', getCloudServersByCategory);
|
||||||
|
router.get('/cloud/tags', getAllCloudTags);
|
||||||
|
router.get('/cloud/tags/:tag', getCloudServersByTag);
|
||||||
|
router.get('/cloud/servers/:serverName/tools', getCloudServerToolsList);
|
||||||
|
router.post('/cloud/servers/:serverName/tools/:toolName/call', callCloudTool);
|
||||||
|
|
||||||
// Log routes
|
// Log routes
|
||||||
router.get('/logs', getAllLogs);
|
router.get('/logs', getAllLogs);
|
||||||
router.delete('/logs', clearLogs);
|
router.delete('/logs', clearLogs);
|
||||||
|
|||||||
273
src/services/cloudService.ts
Normal file
273
src/services/cloudService.ts
Normal file
@@ -0,0 +1,273 @@
|
|||||||
|
import axios, { AxiosRequestConfig } from 'axios';
|
||||||
|
import {
|
||||||
|
CloudServer,
|
||||||
|
CloudTool,
|
||||||
|
MCPRouterResponse,
|
||||||
|
MCPRouterListServersResponse,
|
||||||
|
MCPRouterListToolsResponse,
|
||||||
|
MCPRouterCallToolResponse,
|
||||||
|
} from '../types/index.js';
|
||||||
|
import { loadOriginalSettings } from '../config/index.js';
|
||||||
|
|
||||||
|
// MCPRouter API default base URL
|
||||||
|
const DEFAULT_MCPROUTER_API_BASE = 'https://api.mcprouter.to/v1';
|
||||||
|
|
||||||
|
// Get MCPRouter API config from system configuration
|
||||||
|
const getMCPRouterConfig = () => {
|
||||||
|
const settings = loadOriginalSettings();
|
||||||
|
const mcpRouterConfig = settings.systemConfig?.mcpRouter;
|
||||||
|
|
||||||
|
return {
|
||||||
|
apiKey: mcpRouterConfig?.apiKey || process.env.MCPROUTER_API_KEY || '',
|
||||||
|
referer: mcpRouterConfig?.referer || process.env.MCPROUTER_REFERER || 'https://mcphub.app',
|
||||||
|
title: mcpRouterConfig?.title || process.env.MCPROUTER_TITLE || 'MCPHub',
|
||||||
|
baseUrl:
|
||||||
|
mcpRouterConfig?.baseUrl || process.env.MCPROUTER_API_BASE || DEFAULT_MCPROUTER_API_BASE,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
// Get axios config with MCPRouter headers
|
||||||
|
const getAxiosConfig = (): AxiosRequestConfig => {
|
||||||
|
const mcpRouterConfig = getMCPRouterConfig();
|
||||||
|
|
||||||
|
return {
|
||||||
|
headers: {
|
||||||
|
Authorization: mcpRouterConfig.apiKey ? `Bearer ${mcpRouterConfig.apiKey}` : '',
|
||||||
|
'HTTP-Referer': mcpRouterConfig.referer || 'https://mcphub.app',
|
||||||
|
'X-Title': mcpRouterConfig.title || 'MCPHub',
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
// List all available cloud servers
|
||||||
|
export const getCloudServers = async (): Promise<CloudServer[]> => {
|
||||||
|
try {
|
||||||
|
const axiosConfig = getAxiosConfig();
|
||||||
|
const mcpRouterConfig = getMCPRouterConfig();
|
||||||
|
|
||||||
|
const response = await axios.post<MCPRouterResponse<MCPRouterListServersResponse>>(
|
||||||
|
`${mcpRouterConfig.baseUrl}/list-servers`,
|
||||||
|
{},
|
||||||
|
axiosConfig,
|
||||||
|
);
|
||||||
|
|
||||||
|
const data = response.data;
|
||||||
|
|
||||||
|
if (data.code !== 0) {
|
||||||
|
throw new Error(data.message || 'Failed to fetch servers');
|
||||||
|
}
|
||||||
|
|
||||||
|
return data.data.servers || [];
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error fetching cloud market servers:', error);
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Get a specific cloud server by name
|
||||||
|
export const getCloudServerByName = async (name: string): Promise<CloudServer | null> => {
|
||||||
|
try {
|
||||||
|
const servers = await getCloudServers();
|
||||||
|
return servers.find((server) => server.name === name || server.config_name === name) || null;
|
||||||
|
} catch (error) {
|
||||||
|
console.error(`Error fetching cloud server ${name}:`, error);
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// List tools for a specific cloud server
|
||||||
|
export const getCloudServerTools = async (serverKey: string): Promise<CloudTool[]> => {
|
||||||
|
try {
|
||||||
|
const axiosConfig = getAxiosConfig();
|
||||||
|
const mcpRouterConfig = getMCPRouterConfig();
|
||||||
|
|
||||||
|
if (
|
||||||
|
!axiosConfig.headers?.['Authorization'] ||
|
||||||
|
axiosConfig.headers['Authorization'] === 'Bearer '
|
||||||
|
) {
|
||||||
|
throw new Error('MCPROUTER_API_KEY_NOT_CONFIGURED');
|
||||||
|
}
|
||||||
|
|
||||||
|
const response = await axios.post<MCPRouterResponse<MCPRouterListToolsResponse>>(
|
||||||
|
`${mcpRouterConfig.baseUrl}/list-tools`,
|
||||||
|
{
|
||||||
|
server: serverKey,
|
||||||
|
},
|
||||||
|
axiosConfig,
|
||||||
|
);
|
||||||
|
|
||||||
|
const data = response.data;
|
||||||
|
if (data.code !== 0) {
|
||||||
|
throw new Error(data.message || 'Failed to fetch tools');
|
||||||
|
}
|
||||||
|
|
||||||
|
return data.data.tools || [];
|
||||||
|
} catch (error) {
|
||||||
|
console.error(`Error fetching tools for server ${serverKey}:`, error);
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Call a tool on a cloud server
|
||||||
|
export const callCloudServerTool = async (
|
||||||
|
serverName: string,
|
||||||
|
toolName: string,
|
||||||
|
args: Record<string, any>,
|
||||||
|
): Promise<MCPRouterCallToolResponse> => {
|
||||||
|
try {
|
||||||
|
const axiosConfig = getAxiosConfig();
|
||||||
|
const mcpRouterConfig = getMCPRouterConfig();
|
||||||
|
|
||||||
|
if (
|
||||||
|
!axiosConfig.headers?.['Authorization'] ||
|
||||||
|
axiosConfig.headers['Authorization'] === 'Bearer '
|
||||||
|
) {
|
||||||
|
throw new Error('MCPROUTER_API_KEY_NOT_CONFIGURED');
|
||||||
|
}
|
||||||
|
|
||||||
|
const response = await axios.post<MCPRouterResponse<MCPRouterCallToolResponse>>(
|
||||||
|
`${mcpRouterConfig.baseUrl}/call-tool`,
|
||||||
|
{
|
||||||
|
server: serverName,
|
||||||
|
name: toolName,
|
||||||
|
arguments: args,
|
||||||
|
},
|
||||||
|
axiosConfig,
|
||||||
|
);
|
||||||
|
|
||||||
|
const data = response.data;
|
||||||
|
|
||||||
|
if (data.code !== 0) {
|
||||||
|
throw new Error(data.message || 'Failed to call tool');
|
||||||
|
}
|
||||||
|
|
||||||
|
return data.data;
|
||||||
|
} catch (error) {
|
||||||
|
console.error(`Error calling tool ${toolName} on server ${serverName}:`, error);
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Get all categories from cloud servers
|
||||||
|
export const getCloudCategories = async (): Promise<string[]> => {
|
||||||
|
try {
|
||||||
|
const servers = await getCloudServers();
|
||||||
|
const categories = new Set<string>();
|
||||||
|
|
||||||
|
servers.forEach((server) => {
|
||||||
|
// Extract categories from content or description
|
||||||
|
// This is a simple implementation, you might want to parse the content more sophisticatedly
|
||||||
|
if (server.content) {
|
||||||
|
const categoryMatches = server.content.match(/category[:\s]*([^,\n]+)/gi);
|
||||||
|
if (categoryMatches) {
|
||||||
|
categoryMatches.forEach((match) => {
|
||||||
|
const category = match.replace(/category[:\s]*/i, '').trim();
|
||||||
|
if (category) categories.add(category);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return Array.from(categories).sort();
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error fetching cloud market categories:', error);
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Get all tags from cloud servers
|
||||||
|
export const getCloudTags = async (): Promise<string[]> => {
|
||||||
|
try {
|
||||||
|
const servers = await getCloudServers();
|
||||||
|
const tags = new Set<string>();
|
||||||
|
|
||||||
|
servers.forEach((server) => {
|
||||||
|
// Extract tags from content or description
|
||||||
|
if (server.content) {
|
||||||
|
const tagMatches = server.content.match(/tag[s]?[:\s]*([^,\n]+)/gi);
|
||||||
|
if (tagMatches) {
|
||||||
|
tagMatches.forEach((match) => {
|
||||||
|
const tag = match.replace(/tag[s]?[:\s]*/i, '').trim();
|
||||||
|
if (tag) tags.add(tag);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return Array.from(tags).sort();
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error fetching cloud market tags:', error);
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Search cloud servers by query
|
||||||
|
export const searchCloudServers = async (query: string): Promise<CloudServer[]> => {
|
||||||
|
try {
|
||||||
|
const servers = await getCloudServers();
|
||||||
|
const searchTerms = query
|
||||||
|
.toLowerCase()
|
||||||
|
.split(' ')
|
||||||
|
.filter((term) => term.length > 0);
|
||||||
|
|
||||||
|
if (searchTerms.length === 0) {
|
||||||
|
return servers;
|
||||||
|
}
|
||||||
|
|
||||||
|
return servers.filter((server) => {
|
||||||
|
const searchText = [
|
||||||
|
server.name,
|
||||||
|
server.title,
|
||||||
|
server.description,
|
||||||
|
server.content,
|
||||||
|
server.author_name,
|
||||||
|
]
|
||||||
|
.join(' ')
|
||||||
|
.toLowerCase();
|
||||||
|
|
||||||
|
return searchTerms.some((term) => searchText.includes(term));
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error searching cloud market servers:', error);
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Filter cloud servers by category
|
||||||
|
export const filterCloudServersByCategory = async (category: string): Promise<CloudServer[]> => {
|
||||||
|
try {
|
||||||
|
const servers = await getCloudServers();
|
||||||
|
|
||||||
|
if (!category) {
|
||||||
|
return servers;
|
||||||
|
}
|
||||||
|
|
||||||
|
return servers.filter((server) => {
|
||||||
|
const content = (server.content || '').toLowerCase();
|
||||||
|
return content.includes(category.toLowerCase());
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error filtering cloud market servers by category:', error);
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Filter cloud servers by tag
|
||||||
|
export const filterCloudServersByTag = async (tag: string): Promise<CloudServer[]> => {
|
||||||
|
try {
|
||||||
|
const servers = await getCloudServers();
|
||||||
|
|
||||||
|
if (!tag) {
|
||||||
|
return servers;
|
||||||
|
}
|
||||||
|
|
||||||
|
return servers.filter((server) => {
|
||||||
|
const content = (server.content || '').toLowerCase();
|
||||||
|
return content.includes(tag.toLowerCase());
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error filtering cloud market servers by tag:', error);
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
};
|
||||||
@@ -81,6 +81,49 @@ export interface MarketServer {
|
|||||||
is_official?: boolean;
|
is_official?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Cloud Market Server types (for MCPRouter API)
|
||||||
|
export interface CloudServer {
|
||||||
|
created_at: string;
|
||||||
|
updated_at: string;
|
||||||
|
name: string;
|
||||||
|
author_name: string;
|
||||||
|
title: string;
|
||||||
|
description: string;
|
||||||
|
content: string;
|
||||||
|
server_key: string;
|
||||||
|
config_name: string;
|
||||||
|
tools?: CloudTool[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface CloudTool {
|
||||||
|
name: string;
|
||||||
|
description: string;
|
||||||
|
inputSchema: Record<string, any>;
|
||||||
|
}
|
||||||
|
|
||||||
|
// MCPRouter API Response types
|
||||||
|
export interface MCPRouterResponse<T = any> {
|
||||||
|
code: number;
|
||||||
|
message: string;
|
||||||
|
data: T;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface MCPRouterListServersResponse {
|
||||||
|
servers: CloudServer[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface MCPRouterListToolsResponse {
|
||||||
|
tools: CloudTool[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface MCPRouterCallToolResponse {
|
||||||
|
content: Array<{
|
||||||
|
type: string;
|
||||||
|
text: string;
|
||||||
|
}>;
|
||||||
|
isError: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
export interface SystemConfig {
|
export interface SystemConfig {
|
||||||
routing?: {
|
routing?: {
|
||||||
enableGlobalRoute?: boolean; // Controls whether the /sse endpoint without group is enabled
|
enableGlobalRoute?: boolean; // Controls whether the /sse endpoint without group is enabled
|
||||||
@@ -95,6 +138,12 @@ export interface SystemConfig {
|
|||||||
baseUrl?: string; // Base URL for group card copy operations
|
baseUrl?: string; // Base URL for group card copy operations
|
||||||
};
|
};
|
||||||
smartRouting?: SmartRoutingConfig;
|
smartRouting?: SmartRoutingConfig;
|
||||||
|
mcpRouter?: {
|
||||||
|
apiKey?: string; // MCPRouter API key for authentication
|
||||||
|
referer?: string; // Referer header for MCPRouter API requests
|
||||||
|
title?: string; // Title header for MCPRouter API requests
|
||||||
|
baseUrl?: string; // Base URL for MCPRouter API (default: https://api.mcprouter.to/v1)
|
||||||
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface UserConfig {
|
export interface UserConfig {
|
||||||
|
|||||||
Reference in New Issue
Block a user