mirror of
https://github.com/Yidadaa/ChatGPT-Next-Web.git
synced 2025-08-08 23:20:28 +08:00
feat: MCP market
This commit is contained in:
Kadxy
@@ -2,7 +2,7 @@
|
||||
|
||||
require("../polyfill");
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import { useEffect, useState } from "react";
|
||||
import styles from "./home.module.scss";
|
||||
|
||||
import BotIcon from "../icons/bot.svg";
|
||||
@@ -18,8 +18,8 @@ import { getISOLang, getLang } from "../locales";
|
||||
|
||||
import {
|
||||
HashRouter as Router,
|
||||
Routes,
|
||||
Route,
|
||||
Routes,
|
||||
useLocation,
|
||||
} from "react-router-dom";
|
||||
import { SideBar } from "./sidebar";
|
||||
@@ -74,6 +74,13 @@ const Sd = dynamic(async () => (await import("./sd")).Sd, {
|
||||
loading: () => <Loading noLogo />,
|
||||
});
|
||||
|
||||
const McpMarketPage = dynamic(
|
||||
async () => (await import("./mcp-market")).McpMarketPage,
|
||||
{
|
||||
loading: () => <Loading noLogo />,
|
||||
},
|
||||
);
|
||||
|
||||
export function useSwitchTheme() {
|
||||
const config = useAppConfig();
|
||||
|
||||
@@ -193,6 +200,7 @@ function Screen() {
|
||||
<Route path={Path.SearchChat} element={<SearchChat />} />
|
||||
<Route path={Path.Chat} element={<Chat />} />
|
||||
<Route path={Path.Settings} element={<Settings />} />
|
||||
<Route path={Path.McpMarket} element={<McpMarketPage />} />
|
||||
</Routes>
|
||||
</WindowContent>
|
||||
</>
|
||||
|
||||
612
app/components/mcp-market.module.scss
Normal file
612
app/components/mcp-market.module.scss
Normal file
@@ -0,0 +1,612 @@
|
||||
@import "../styles/animation.scss";
|
||||
|
||||
.mcp-market-page {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.loading-indicator {
|
||||
font-size: 12px;
|
||||
color: var(--primary);
|
||||
margin-left: 8px;
|
||||
font-weight: normal;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.mcp-market-page-body {
|
||||
padding: 20px;
|
||||
overflow-y: auto;
|
||||
|
||||
.mcp-market-filter {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
margin-bottom: 20px;
|
||||
animation: slide-in ease 0.3s;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
|
||||
.search-bar {
|
||||
flex-grow: 1;
|
||||
max-width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.server-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1px;
|
||||
}
|
||||
|
||||
.mcp-market-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 20px;
|
||||
border: var(--border-in-light);
|
||||
animation: slide-in ease 0.3s;
|
||||
background-color: var(--white);
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&.disabled {
|
||||
opacity: 0.7;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
border-top-left-radius: 10px;
|
||||
border-top-right-radius: 10px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom-left-radius: 10px;
|
||||
border-bottom-right-radius: 10px;
|
||||
}
|
||||
|
||||
.mcp-market-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.mcp-market-title {
|
||||
.mcp-market-name {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
.server-status {
|
||||
font-size: 12px;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
margin-left: 8px;
|
||||
background-color: #10b981;
|
||||
color: white;
|
||||
|
||||
&.error {
|
||||
background-color: #ef4444;
|
||||
}
|
||||
|
||||
&.waiting {
|
||||
background-color: #f59e0b;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
font-size: 11px;
|
||||
opacity: 0.9;
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mcp-market-info {
|
||||
font-size: 12px;
|
||||
color: var(--black-50);
|
||||
margin-top: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mcp-market-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
|
||||
:global(.icon-button) {
|
||||
transition: all 0.3s ease;
|
||||
border: 1px solid transparent;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-1px);
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
|
||||
&.action-primary {
|
||||
background-color: var(--primary);
|
||||
color: white;
|
||||
|
||||
svg {
|
||||
filter: brightness(2);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--primary);
|
||||
border-color: var(--primary);
|
||||
}
|
||||
}
|
||||
|
||||
&.action-warning {
|
||||
background-color: var(--warning);
|
||||
color: white;
|
||||
|
||||
svg {
|
||||
filter: brightness(2);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--warning);
|
||||
border-color: var(--warning);
|
||||
}
|
||||
}
|
||||
|
||||
&.action-danger {
|
||||
background-color: transparent;
|
||||
color: var(--danger);
|
||||
border-color: var(--danger);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--danger);
|
||||
color: white;
|
||||
|
||||
svg {
|
||||
filter: brightness(2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.action-error {
|
||||
color: #ef4444 !important;
|
||||
border-color: #ef4444 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
|
||||
.mcp-market-actions {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.array-input {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
width: 100%;
|
||||
padding: 16px;
|
||||
border: 1px solid var(--gray-200);
|
||||
border-radius: 10px;
|
||||
background-color: var(--white);
|
||||
|
||||
.array-input-item {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
padding: 8px 12px;
|
||||
background-color: var(--gray-50);
|
||||
border-radius: 6px;
|
||||
transition: all 0.3s ease;
|
||||
font-size: 13px;
|
||||
border: 1px solid var(--gray-200);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--gray-100);
|
||||
border-color: var(--gray-300);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background-color: var(--white);
|
||||
border-color: var(--primary);
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 2px var(--primary-10);
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: var(--gray-300);
|
||||
}
|
||||
}
|
||||
|
||||
:global(.icon-button) {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
padding: 0;
|
||||
border-radius: 6px;
|
||||
background-color: transparent;
|
||||
border: 1px solid var(--gray-200);
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--gray-100);
|
||||
border-color: var(--gray-300);
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:global(.icon-button.add-path-button) {
|
||||
width: 100%;
|
||||
background-color: var(--primary);
|
||||
color: white;
|
||||
padding: 8px 12px;
|
||||
border-radius: 6px;
|
||||
transition: all 0.3s ease;
|
||||
margin-top: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: none;
|
||||
height: 36px;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--primary-dark);
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 4px;
|
||||
filter: brightness(2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.path-list {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
|
||||
.path-item {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
width: 100%;
|
||||
|
||||
input {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
padding: 10px;
|
||||
border: var(--border-in-light);
|
||||
border-radius: 10px;
|
||||
box-sizing: border-box;
|
||||
font-size: 14px;
|
||||
background-color: var(--white);
|
||||
color: var(--black);
|
||||
|
||||
&:hover {
|
||||
border-color: var(--gray-300);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: var(--primary);
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 2px var(--primary-10);
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: var(--gray-300) !important;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.browse-button {
|
||||
padding: 8px;
|
||||
border: var(--border-in-light);
|
||||
border-radius: 10px;
|
||||
background-color: transparent;
|
||||
color: var(--black-50);
|
||||
|
||||
&:hover {
|
||||
border-color: var(--primary);
|
||||
color: var(--primary);
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.delete-button {
|
||||
padding: 8px;
|
||||
border: var(--border-in-light);
|
||||
border-radius: 10px;
|
||||
background-color: transparent;
|
||||
color: var(--black-50);
|
||||
|
||||
&:hover {
|
||||
border-color: var(--danger);
|
||||
color: var(--danger);
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.file-input {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.add-button {
|
||||
align-self: flex-start;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
padding: 8px 12px;
|
||||
background-color: transparent;
|
||||
border: var(--border-in-light);
|
||||
border-radius: 10px;
|
||||
color: var(--black);
|
||||
font-size: 12px;
|
||||
margin-top: 5px;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--primary);
|
||||
color: var(--primary);
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.config-section {
|
||||
width: 100%;
|
||||
|
||||
.config-header {
|
||||
margin-bottom: 12px;
|
||||
|
||||
.config-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--black);
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.config-description {
|
||||
font-size: 12px;
|
||||
color: var(--gray-500);
|
||||
margin-top: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.array-input {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
width: 100%;
|
||||
padding: 16px;
|
||||
border: 1px solid var(--gray-200);
|
||||
border-radius: 10px;
|
||||
background-color: var(--white);
|
||||
|
||||
.array-input-item {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
padding: 8px 12px;
|
||||
background-color: var(--gray-50);
|
||||
border-radius: 6px;
|
||||
transition: all 0.3s ease;
|
||||
font-size: 13px;
|
||||
border: 1px solid var(--gray-200);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--gray-100);
|
||||
border-color: var(--gray-300);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background-color: var(--white);
|
||||
border-color: var(--primary);
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 2px var(--primary-10);
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: var(--gray-300);
|
||||
}
|
||||
}
|
||||
|
||||
:global(.icon-button) {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
padding: 0;
|
||||
border-radius: 6px;
|
||||
background-color: transparent;
|
||||
border: 1px solid var(--gray-200);
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--gray-100);
|
||||
border-color: var(--gray-300);
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:global(.icon-button.add-path-button) {
|
||||
width: 100%;
|
||||
background-color: var(--primary);
|
||||
color: white;
|
||||
padding: 8px 12px;
|
||||
border-radius: 6px;
|
||||
transition: all 0.3s ease;
|
||||
margin-top: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: none;
|
||||
height: 36px;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--primary-dark);
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 4px;
|
||||
filter: brightness(2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input-item {
|
||||
width: 100%;
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border: var(--border-in-light);
|
||||
border-radius: 10px;
|
||||
box-sizing: border-box;
|
||||
font-size: 14px;
|
||||
background-color: var(--white);
|
||||
color: var(--black);
|
||||
|
||||
&:hover {
|
||||
border-color: var(--gray-300);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: var(--primary);
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 2px var(--primary-10);
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: var(--gray-300) !important;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.primitives-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
max-width: 100%;
|
||||
overflow-x: hidden;
|
||||
word-break: break-word;
|
||||
box-sizing: border-box;
|
||||
|
||||
.primitive-item {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
.primitive-name {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--black);
|
||||
margin-bottom: 8px;
|
||||
padding-left: 12px;
|
||||
border-left: 3px solid var(--primary);
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.primitive-description {
|
||||
font-size: 13px;
|
||||
color: var(--gray-500);
|
||||
line-height: 1.6;
|
||||
padding-left: 15px;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:global {
|
||||
.modal-content {
|
||||
margin-top: 20px;
|
||||
max-width: 100%;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.list {
|
||||
padding: 10px;
|
||||
margin-bottom: 10px;
|
||||
background-color: var(--white);
|
||||
}
|
||||
|
||||
.list-item {
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.list-header {
|
||||
margin-bottom: 10px;
|
||||
|
||||
.list-title {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
text-transform: capitalize;
|
||||
color: var(--black);
|
||||
}
|
||||
|
||||
.list-sub-title {
|
||||
font-size: 12px;
|
||||
color: var(--gray-500);
|
||||
margin-top: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
564
app/components/mcp-market.tsx
Normal file
564
app/components/mcp-market.tsx
Normal file
@@ -0,0 +1,564 @@
|
||||
import { IconButton } from "./button";
|
||||
import { ErrorBoundary } from "./error";
|
||||
import styles from "./mcp-market.module.scss";
|
||||
import EditIcon from "../icons/edit.svg";
|
||||
import AddIcon from "../icons/add.svg";
|
||||
import CloseIcon from "../icons/close.svg";
|
||||
import DeleteIcon from "../icons/delete.svg";
|
||||
import RestartIcon from "../icons/reload.svg";
|
||||
import EyeIcon from "../icons/eye.svg";
|
||||
import { List, ListItem, Modal, showToast } from "./ui-lib";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { useState, useEffect } from "react";
|
||||
import presetServersJson from "../mcp/preset-server.json";
|
||||
const presetServers = presetServersJson as PresetServer[];
|
||||
import {
|
||||
getMcpConfig,
|
||||
updateMcpConfig,
|
||||
getClientPrimitives,
|
||||
restartAllClients,
|
||||
reinitializeMcpClients,
|
||||
getClientErrors,
|
||||
} from "../mcp/actions";
|
||||
import { McpConfig, PresetServer, ServerConfig } from "../mcp/types";
|
||||
import clsx from "clsx";
|
||||
|
||||
interface ConfigProperty {
|
||||
type: string;
|
||||
description?: string;
|
||||
required?: boolean;
|
||||
minItems?: number;
|
||||
}
|
||||
|
||||
export function McpMarketPage() {
|
||||
const navigate = useNavigate();
|
||||
const [searchText, setSearchText] = useState("");
|
||||
const [config, setConfig] = useState<McpConfig>({ mcpServers: {} });
|
||||
const [editingServerId, setEditingServerId] = useState<string | undefined>();
|
||||
const [viewingServerId, setViewingServerId] = useState<string | undefined>();
|
||||
const [primitives, setPrimitives] = useState<any[]>([]);
|
||||
const [userConfig, setUserConfig] = useState<Record<string, any>>({});
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [clientErrors, setClientErrors] = useState<
|
||||
Record<string, string | null>
|
||||
>({});
|
||||
|
||||
// 更新服务器状态
|
||||
const updateServerStatus = async () => {
|
||||
await reinitializeMcpClients();
|
||||
const errors = await getClientErrors();
|
||||
setClientErrors(errors);
|
||||
};
|
||||
|
||||
// 初始加载配置
|
||||
useEffect(() => {
|
||||
const init = async () => {
|
||||
try {
|
||||
setIsLoading(true);
|
||||
const data = await getMcpConfig();
|
||||
setConfig(data);
|
||||
await updateServerStatus();
|
||||
} catch (error) {
|
||||
showToast("Failed to load configuration");
|
||||
console.error(error);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
init();
|
||||
}, []);
|
||||
|
||||
// 保存配置
|
||||
const saveConfig = async (newConfig: McpConfig) => {
|
||||
try {
|
||||
setIsLoading(true);
|
||||
await updateMcpConfig(newConfig);
|
||||
setConfig(newConfig);
|
||||
await updateServerStatus();
|
||||
showToast("Configuration saved successfully");
|
||||
} catch (error) {
|
||||
showToast("Failed to save configuration");
|
||||
console.error(error);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 检查服务器是否已添加
|
||||
const isServerAdded = (id: string) => {
|
||||
return id in config.mcpServers;
|
||||
};
|
||||
|
||||
// 加载当前编辑服务器的配置
|
||||
useEffect(() => {
|
||||
if (editingServerId) {
|
||||
const currentConfig = config.mcpServers[editingServerId];
|
||||
if (currentConfig) {
|
||||
// 从当前配置中提取用户配置
|
||||
const preset = presetServers.find((s) => s.id === editingServerId);
|
||||
if (preset?.configSchema) {
|
||||
const userConfig: Record<string, any> = {};
|
||||
Object.entries(preset.argsMapping || {}).forEach(([key, mapping]) => {
|
||||
if (mapping.type === "spread") {
|
||||
// 对于 spread 类型，从 args 中提取数组
|
||||
const startPos = mapping.position ?? 0;
|
||||
userConfig[key] = currentConfig.args.slice(startPos);
|
||||
} else if (mapping.type === "single") {
|
||||
// 对于 single 类型，获取单个值
|
||||
userConfig[key] = currentConfig.args[mapping.position ?? 0];
|
||||
} else if (
|
||||
mapping.type === "env" &&
|
||||
mapping.key &&
|
||||
currentConfig.env
|
||||
) {
|
||||
// 对于 env 类型，从环境变量中获取值
|
||||
userConfig[key] = currentConfig.env[mapping.key];
|
||||
}
|
||||
});
|
||||
setUserConfig(userConfig);
|
||||
}
|
||||
} else {
|
||||
setUserConfig({});
|
||||
}
|
||||
}
|
||||
}, [editingServerId, config.mcpServers]);
|
||||
|
||||
// 保存服务器配置
|
||||
const saveServerConfig = async () => {
|
||||
const preset = presetServers.find((s) => s.id === editingServerId);
|
||||
if (!preset || !preset.configSchema || !editingServerId) return;
|
||||
|
||||
try {
|
||||
// 构建服务器配置
|
||||
const args = [...preset.baseArgs];
|
||||
const env: Record<string, string> = {};
|
||||
|
||||
Object.entries(preset.argsMapping || {}).forEach(([key, mapping]) => {
|
||||
const value = userConfig[key];
|
||||
if (mapping.type === "spread" && Array.isArray(value)) {
|
||||
const pos = mapping.position ?? 0;
|
||||
args.splice(pos, 0, ...value);
|
||||
} else if (
|
||||
mapping.type === "single" &&
|
||||
mapping.position !== undefined
|
||||
) {
|
||||
args[mapping.position] = value;
|
||||
} else if (
|
||||
mapping.type === "env" &&
|
||||
mapping.key &&
|
||||
typeof value === "string"
|
||||
) {
|
||||
env[mapping.key] = value;
|
||||
}
|
||||
});
|
||||
|
||||
const serverConfig: ServerConfig = {
|
||||
command: preset.command,
|
||||
args,
|
||||
...(Object.keys(env).length > 0 ? { env } : {}),
|
||||
};
|
||||
|
||||
// 更新配置
|
||||
const newConfig = {
|
||||
...config,
|
||||
mcpServers: {
|
||||
...config.mcpServers,
|
||||
[editingServerId]: serverConfig,
|
||||
},
|
||||
};
|
||||
|
||||
await saveConfig(newConfig);
|
||||
setEditingServerId(undefined);
|
||||
showToast("Server configuration saved successfully");
|
||||
} catch (error) {
|
||||
showToast(
|
||||
error instanceof Error ? error.message : "Failed to save configuration",
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
// 渲染配置表单
|
||||
const renderConfigForm = () => {
|
||||
const preset = presetServers.find((s) => s.id === editingServerId);
|
||||
if (!preset?.configSchema) return null;
|
||||
|
||||
return Object.entries(preset.configSchema.properties).map(
|
||||
([key, prop]: [string, ConfigProperty]) => {
|
||||
if (prop.type === "array") {
|
||||
const currentValue = userConfig[key as keyof typeof userConfig] || [];
|
||||
return (
|
||||
<ListItem key={key} title={key} subTitle={prop.description}>
|
||||
<div className={styles["path-list"]}>
|
||||
{(currentValue as string[]).map(
|
||||
(value: string, index: number) => (
|
||||
<div key={index} className={styles["path-item"]}>
|
||||
<input
|
||||
type="text"
|
||||
value={value}
|
||||
placeholder={`Path ${index + 1}`}
|
||||
onChange={(e) => {
|
||||
const newValue = [...currentValue] as string[];
|
||||
newValue[index] = e.target.value;
|
||||
setUserConfig({ ...userConfig, [key]: newValue });
|
||||
}}
|
||||
/>
|
||||
<IconButton
|
||||
icon={<DeleteIcon />}
|
||||
className={styles["delete-button"]}
|
||||
onClick={() => {
|
||||
const newValue = [...currentValue] as string[];
|
||||
newValue.splice(index, 1);
|
||||
setUserConfig({ ...userConfig, [key]: newValue });
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
),
|
||||
)}
|
||||
<IconButton
|
||||
icon={<AddIcon />}
|
||||
text="Add Path"
|
||||
className={styles["add-button"]}
|
||||
bordered
|
||||
onClick={() => {
|
||||
const newValue = [...currentValue, ""] as string[];
|
||||
setUserConfig({ ...userConfig, [key]: newValue });
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</ListItem>
|
||||
);
|
||||
} else if (prop.type === "string") {
|
||||
const currentValue = userConfig[key as keyof typeof userConfig] || "";
|
||||
return (
|
||||
<ListItem key={key} title={key} subTitle={prop.description}>
|
||||
<div className={styles["input-item"]}>
|
||||
<input
|
||||
type="text"
|
||||
value={currentValue}
|
||||
placeholder={`Enter ${key}`}
|
||||
onChange={(e) => {
|
||||
setUserConfig({ ...userConfig, [key]: e.target.value });
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</ListItem>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
},
|
||||
);
|
||||
};
|
||||
|
||||
// 获取服务器的 Primitives
|
||||
const loadPrimitives = async (id: string) => {
|
||||
try {
|
||||
setIsLoading(true);
|
||||
const result = await getClientPrimitives(id);
|
||||
if (result) {
|
||||
setPrimitives(result);
|
||||
} else {
|
||||
showToast("Server is not running");
|
||||
setPrimitives([]);
|
||||
}
|
||||
} catch (error) {
|
||||
showToast("Failed to load primitives");
|
||||
console.error(error);
|
||||
setPrimitives([]);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 重启所有客户端
|
||||
const handleRestart = async () => {
|
||||
try {
|
||||
setIsLoading(true);
|
||||
await restartAllClients();
|
||||
await updateServerStatus();
|
||||
showToast("All clients restarted successfully");
|
||||
} catch (error) {
|
||||
showToast("Failed to restart clients");
|
||||
console.error(error);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 添加服务器
|
||||
const addServer = async (preset: PresetServer) => {
|
||||
if (!preset.configurable) {
|
||||
try {
|
||||
setIsLoading(true);
|
||||
showToast("Creating MCP client...");
|
||||
// 如果服务器不需要配置，直接添加
|
||||
const serverConfig: ServerConfig = {
|
||||
command: preset.command,
|
||||
args: [...preset.baseArgs],
|
||||
};
|
||||
const newConfig = {
|
||||
...config,
|
||||
mcpServers: {
|
||||
...config.mcpServers,
|
||||
[preset.id]: serverConfig,
|
||||
},
|
||||
};
|
||||
await saveConfig(newConfig);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
} else {
|
||||
// 如果需要配置，打开配置对话框
|
||||
setEditingServerId(preset.id);
|
||||
setUserConfig({});
|
||||
}
|
||||
};
|
||||
|
||||
// 移除服务器
|
||||
const removeServer = async (id: string) => {
|
||||
try {
|
||||
setIsLoading(true);
|
||||
const { [id]: _, ...rest } = config.mcpServers;
|
||||
const newConfig = {
|
||||
...config,
|
||||
mcpServers: rest,
|
||||
};
|
||||
await saveConfig(newConfig);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<ErrorBoundary>
|
||||
<div className={styles["mcp-market-page"]}>
|
||||
<div className="window-header">
|
||||
<div className="window-header-title">
|
||||
<div className="window-header-main-title">
|
||||
MCP Market
|
||||
{isLoading && (
|
||||
<span className={styles["loading-indicator"]}>Loading...</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="window-header-sub-title">
|
||||
{Object.keys(config.mcpServers).length} servers configured
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="window-actions">
|
||||
<div className="window-action-button">
|
||||
<IconButton
|
||||
icon={<RestartIcon />}
|
||||
bordered
|
||||
onClick={handleRestart}
|
||||
text="Restart"
|
||||
disabled={isLoading}
|
||||
/>
|
||||
</div>
|
||||
<div className="window-action-button">
|
||||
<IconButton
|
||||
icon={<CloseIcon />}
|
||||
bordered
|
||||
onClick={() => navigate(-1)}
|
||||
disabled={isLoading}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles["mcp-market-page-body"]}>
|
||||
<div className={styles["mcp-market-filter"]}>
|
||||
<input
|
||||
type="text"
|
||||
className={styles["search-bar"]}
|
||||
placeholder={"Search MCP Server"}
|
||||
autoFocus
|
||||
onInput={(e) => setSearchText(e.currentTarget.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={styles["server-list"]}>
|
||||
{presetServers
|
||||
.filter(
|
||||
(m) =>
|
||||
searchText.length === 0 ||
|
||||
m.name.toLowerCase().includes(searchText.toLowerCase()) ||
|
||||
m.description
|
||||
.toLowerCase()
|
||||
.includes(searchText.toLowerCase()),
|
||||
)
|
||||
.sort((a, b) => {
|
||||
const aAdded = isServerAdded(a.id);
|
||||
const bAdded = isServerAdded(b.id);
|
||||
const aError = clientErrors[a.id] !== null;
|
||||
const bError = clientErrors[b.id] !== null;
|
||||
|
||||
if (aAdded !== bAdded) {
|
||||
return aAdded ? -1 : 1;
|
||||
}
|
||||
if (aAdded && bAdded) {
|
||||
if (aError !== bError) {
|
||||
return aError ? -1 : 1;
|
||||
}
|
||||
}
|
||||
return 0;
|
||||
})
|
||||
.map((server) => (
|
||||
<div
|
||||
className={clsx(styles["mcp-market-item"], {
|
||||
[styles["disabled"]]: isLoading,
|
||||
})}
|
||||
key={server.id}
|
||||
>
|
||||
<div className={styles["mcp-market-header"]}>
|
||||
<div className={styles["mcp-market-title"]}>
|
||||
<div className={styles["mcp-market-name"]}>
|
||||
{server.name}
|
||||
{isServerAdded(server.id) && (
|
||||
<span
|
||||
className={clsx(styles["server-status"], {
|
||||
[styles["error"]]:
|
||||
clientErrors[server.id] !== null,
|
||||
})}
|
||||
>
|
||||
{clientErrors[server.id] === null
|
||||
? "Active"
|
||||
: "Error"}
|
||||
{clientErrors[server.id] && (
|
||||
<span className={styles["error-message"]}>
|
||||
: {clientErrors[server.id]}
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div
|
||||
className={clsx(styles["mcp-market-info"], "one-line")}
|
||||
>
|
||||
{server.description}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles["mcp-market-actions"]}>
|
||||
{isServerAdded(server.id) ? (
|
||||
<>
|
||||
{server.configurable && (
|
||||
<IconButton
|
||||
icon={<EditIcon />}
|
||||
text="Configure"
|
||||
className={clsx({
|
||||
[styles["action-error"]]:
|
||||
clientErrors[server.id] !== null,
|
||||
})}
|
||||
onClick={() => setEditingServerId(server.id)}
|
||||
disabled={isLoading}
|
||||
/>
|
||||
)}
|
||||
{isServerAdded(server.id) && (
|
||||
<IconButton
|
||||
icon={<EyeIcon />}
|
||||
text="Detail"
|
||||
onClick={async () => {
|
||||
if (clientErrors[server.id] !== null) {
|
||||
showToast("Server is not running");
|
||||
return;
|
||||
}
|
||||
setViewingServerId(server.id);
|
||||
await loadPrimitives(server.id);
|
||||
}}
|
||||
disabled={isLoading}
|
||||
/>
|
||||
)}
|
||||
<IconButton
|
||||
icon={<DeleteIcon />}
|
||||
text="Remove"
|
||||
className={styles["action-danger"]}
|
||||
onClick={() => removeServer(server.id)}
|
||||
disabled={isLoading}
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
<IconButton
|
||||
icon={<AddIcon />}
|
||||
text="Add"
|
||||
className={styles["action-primary"]}
|
||||
onClick={() => addServer(server)}
|
||||
disabled={isLoading}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{editingServerId && (
|
||||
<div className="modal-mask">
|
||||
<Modal
|
||||
title={`Configure Server - ${editingServerId}`}
|
||||
onClose={() => !isLoading && setEditingServerId(undefined)}
|
||||
actions={[
|
||||
<IconButton
|
||||
key="cancel"
|
||||
text="Cancel"
|
||||
onClick={() => setEditingServerId(undefined)}
|
||||
bordered
|
||||
disabled={isLoading}
|
||||
/>,
|
||||
<IconButton
|
||||
key="confirm"
|
||||
text="Save"
|
||||
type="primary"
|
||||
onClick={saveServerConfig}
|
||||
bordered
|
||||
disabled={isLoading}
|
||||
/>,
|
||||
]}
|
||||
>
|
||||
<List>{renderConfigForm()}</List>
|
||||
</Modal>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{viewingServerId && (
|
||||
<div className="modal-mask">
|
||||
<Modal
|
||||
title={`Server Details - ${viewingServerId}`}
|
||||
onClose={() => setViewingServerId(undefined)}
|
||||
actions={[
|
||||
<IconButton
|
||||
key="close"
|
||||
text="Close"
|
||||
onClick={() => setViewingServerId(undefined)}
|
||||
bordered
|
||||
/>,
|
||||
]}
|
||||
>
|
||||
<div className={styles["primitives-list"]}>
|
||||
{isLoading ? (
|
||||
<div>Loading...</div>
|
||||
) : primitives.filter((p) => p.type === "tool").length > 0 ? (
|
||||
primitives
|
||||
.filter((p) => p.type === "tool")
|
||||
.map((primitive, index) => (
|
||||
<div key={index} className={styles["primitive-item"]}>
|
||||
<div className={styles["primitive-name"]}>
|
||||
{primitive.value.name}
|
||||
</div>
|
||||
{primitive.value.description && (
|
||||
<div className={styles["primitive-description"]}>
|
||||
{primitive.value.description}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<div>No tools available</div>
|
||||
)}
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</ErrorBoundary>
|
||||
);
|
||||
}
|
||||
@@ -9,6 +9,7 @@ import ChatGptIcon from "../icons/chatgpt.svg";
|
||||
import AddIcon from "../icons/add.svg";
|
||||
import DeleteIcon from "../icons/delete.svg";
|
||||
import MaskIcon from "../icons/mask.svg";
|
||||
import McpIcon from "../icons/mcp.svg";
|
||||
import DragIcon from "../icons/drag.svg";
|
||||
import DiscoveryIcon from "../icons/discovery.svg";
|
||||
|
||||
@@ -250,6 +251,15 @@ export function SideBar(props: { className?: string }) {
|
||||
}}
|
||||
shadow
|
||||
/>
|
||||
<IconButton
|
||||
icon={<McpIcon />}
|
||||
text={shouldNarrow ? undefined : Locale.Mcp.Name}
|
||||
className={styles["sidebar-bar-button"]}
|
||||
onClick={() => {
|
||||
navigate(Path.McpMarket, { state: { fromHome: true } });
|
||||
}}
|
||||
shadow
|
||||
/>
|
||||
<IconButton
|
||||
icon={<DiscoveryIcon />}
|
||||
text={shouldNarrow ? undefined : Locale.Discovery.Name}
|
||||
|
||||
Reference in New Issue
Block a user