kirigaya/openmcp-client
2
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

finish config export

Browse Source
This commit is contained in:
锦恢 2025-06-22 04:00:14 +08:00
parent 3e363c6dde
commit d10c88f35e
21 changed files with 334 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
renderer/public/iconfont.css
View File

@ -1,8 +1,8 @@
@font-face {
font-family: "iconfont"; /* Project id 4870215 */
src: url('iconfont.woff2?t=1750172161574') format('woff2'),
url('iconfont.woff?t=1750172161574') format('woff'),
url('iconfont.ttf?t=1750172161574') format('truetype');
src: url('iconfont.woff2?t=1750532923458') format('woff2'),
url('iconfont.woff?t=1750532923458') format('woff'),
url('iconfont.ttf?t=1750532923458') format('truetype');
}
.iconfont {
@ -13,6 +13,10 @@
-moz-osx-font-smoothing: grayscale;
}
.icon-deploy:before {
content: "\e614";
}
.icon-suffix-xml:before {
content: "\e653";
}

BIN
renderer/public/iconfont.woff2
View File

Binary file not shown.

208
renderer/src/components/main-panel/chat/chat-box/options/export.vue Normal file
View File

@ -0,0 +1,208 @@
<template>
<el-tooltip :content="'导出 mcpconfig'" placement="top" effect="light">
<div class="setting-button" @click="toggleDialog">
<span class="iconfont icon-deploy">
</span>
</div>
</el-tooltip>
<el-dialog v-model="showDialog" width="fit-content">
<template #header>
<div>
<div class="export-file-input">
<span>{{ t('export-filename') }}</span>
<el-input
v-model="exportFileName"
style="max-width: 300px"
>
<template #append>.json</template>
</el-input>
<span class="how-to-use"
@click="gotoHowtoUse"
>
<span class="iconfont icon-info"></span>
<span>{{ t('how-to-use') }}</span>
</span>
</div>
</div>
</template>
<div class="tools-dialog-container">
<el-scrollbar height="400px" class="tools-list">
<div v-html="exportJson">
</div>
</el-scrollbar>
<!--
<el-scrollbar height="400px" class="tools-list">
<div v-html="exampleCode"></div>
</el-scrollbar> -->
</div>
<template #footer>
<el-button type="primary" @click="copyCode">{{ t('copy') }}</el-button>
<el-button type="primary" @click="exportCode">{{ t('export') }}</el-button>
</template>
</el-dialog>
</template>
<script setup lang="ts">
import { ref, computed, inject, onMounted, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import { type ChatStorage, type EnableToolItem, getToolSchema } from '../chat';
import { markdownToHtml } from '@/components/main-panel/chat/markdown/markdown';
import { llmManager, llms } from '@/views/setting/llm';
import { mcpClientAdapter } from '@/views/connect/core';
import { ElMessage } from 'element-plus';
import { useMessageBridge } from '@/api/message-bridge';
const { t, locale } = useI18n();
const showDialog = ref(false);
const exportJson = ref('');
const exportFileName = ref('mcpconfig');
// 修改 toggleDialog 方法
const toggleDialog = () => {
showDialog.value = true;
};
const generateExportData = computed(() => {
const currentLLM = llms[llmManager.currentModelIndex];
const mcpServers = {} as any;
for (const client of mcpClientAdapter.clients) {
const option = client.connectOption;
const type = option.connectionType;
if (type === 'STDIO') {
mcpServers[client.name] = {
command: option.command,
args: option.args,
description: "",
}
} else if (type === 'SSE') {
mcpServers[client.name] = {
type: 'sse',
url: option.url,
description: "",
}
} else {
mcpServers[client.name] = {
type: 'streamable_http',
url: option.url,
description: "",
}
}
}
const mcpconfig = {
version: "0.0.1",
namespace: "openmcp",
mcpServers,
defaultLLM: {
baseURL: currentLLM.baseUrl,
apiToken: currentLLM.userToken,
model: currentLLM.userModel
}
};
return JSON.stringify(mcpconfig, null, 2);
});
const innerMarkdownHtml = (code: string) => {
const rawCode = markdownToHtml(code);
const doc = new DOMParser().parseFromString(rawCode, 'text/html');
const pres = doc.querySelectorAll('pre');
if (pres.length < 2) {
return '';
}
const inner = pres[1].outerHTML;
return inner;
}
const exampleCode = computed(() => {
return innerMarkdownHtml(
'```typescript\n' +
`import { OmAgent } from 'openmcp-sdk/service/sdk';
const agent = new OmAgent();
agent.loadMcpConfig('/path/to/${exportFileName.value}.json');
const prompt = await agent.getPrompt('hacknews', { topn: '5' });
const res = await agent.ainvoke({ messages: prompt });
console.log('⚙️ Agent Response', res);
` +
'\n```'
);
});
const copyCode = async () => {
try {
await navigator.clipboard.writeText(generateExportData.value);
ElMessage.success(t('copy-success'));
} catch (error) {
ElMessage.error(t('copy-fail'));
}
}
const exportCode = async () => {
const bridge = useMessageBridge();
bridge.postMessage({
command: 'export-file',
data: {
filename: exportFileName.value,
content: generateExportData.value
}
})
}
const gotoHowtoUse = () => {
if (locale.value === 'zh') {
window.open('https://kirigaya.cn/openmcp/zh/sdk-tutorial/#%E4%BD%BF%E7%94%A8');
} else if (locale.value === 'ja') {
window.open('https://kirigaya.cn/openmcp/ja/sdk-tutorial/#%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95');
} else {
window.open('https://kirigaya.cn/openmcp/sdk-tutorial/#usage');
}
}
onMounted(async () => {
exportJson.value = innerMarkdownHtml(
'```json\n' + generateExportData.value + '\n```'
);
});
</script>
<style scoped>
.export-file-input {
display: flex;
gap: 10px;
align-items: center;
}
.tools-list {
border-radius: .5em;
border: 1px solid var(--main-color);
padding: 5px;
}
.how-to-use {
margin-left: 10px;
font-size: 15px;
cursor: pointer;
background-color: var(--main-color);
color: #1e1e1e;
padding: 3px 5px;
border-radius: .3em;
}
</style>

2
renderer/src/components/main-panel/chat/chat-box/options/setting.vue
View File

@ -9,6 +9,7 @@
<Temperature />
<ContextLength />
<XmlWrapper />
<Export />
</div>
</template>
@ -27,6 +28,7 @@ import ParallelToolCalls from './parallel-tool-calls.vue';
import Temperature from './temperature.vue';
import ContextLength from './context-length.vue';
import XmlWrapper from './xml-wrapper.vue';
import Export from './export.vue';
const props = defineProps({
modelValue: {

11
renderer/src/components/main-panel/chat/chat-box/prompt-chat-item.vue
View File

@ -22,9 +22,6 @@ const props = defineProps({
<style>
.chat-prompt-item {
max-width: 80px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-flex;
border-radius: .3em;
align-items: center;
@ -34,9 +31,17 @@ const props = defineProps({
font-size: 12px;
margin-left: 3px;
margin-right: 3px;
user-select: none;
}
.chat-prompt-item .iconfont {
margin-right: 4px;
}
.chat-prompt-item .real-text {
max-width: 60px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>

7
renderer/src/components/main-panel/tool/tool-list.vue
View File

@ -18,7 +18,7 @@
<!-- body -->
<div class="tool-list-container-scrollbar">
<el-scrollbar height="500px">
<el-scrollbar height="fit-content">
<div class="tool-list-container">
<div class="item" :class="{ 'active': tabStorage.currentToolName === tool.name }"
v-for="tool of client.tools?.values()" :key="tool.name" @click="handleClick(tool)">
@ -148,10 +148,9 @@ onMounted(async () => {
margin-left: 10px;
background-color: var(--main-color);
padding: 2px 5px;
border-radius: .5em;
border-radius: .3em;
height: fit-content;
font-size: 10px;
font-size: 13px;
color: black;
}

8
renderer/src/i18n/ar.json
View File

@ -176,5 +176,11 @@
"tool-manage": "إدارة الأدوات",
"enable-all-tools": "تفعيل جميع الأدوات",
"disable-all-tools": "تعطيل جميع الأدوات",
"using-tool": "جاري استخدام الأداة"
"using-tool": "جاري استخدام الأداة",
"copy-success": "تم النسخ بنجاح",
"copy-fail": "فشل النسخ",
"copy": "نسخ",
"export": "تصدير",
"export-filename": "اسم ملف التصدير",
"how-to-use": "كيفية الاستخدام؟"
}

8
renderer/src/i18n/de.json
View File

@ -176,5 +176,11 @@
"tool-manage": "Werkzeugverwaltung",
"enable-all-tools": "Alle Tools aktivieren",
"disable-all-tools": "Alle Tools deaktivieren",
"using-tool": "Werkzeug wird verwendet"
"using-tool": "Werkzeug wird verwendet",
"copy-success": "Erfolgreich kopiert",
"copy-fail": "Kopieren fehlgeschlagen",
"copy": "Kopieren",
"export": "Exportieren",
"export-filename": "Exportdateiname",
"how-to-use": "Wie benutzt man?"
}

8
renderer/src/i18n/en.json
View File

@ -176,5 +176,11 @@
"tool-manage": "Tool Management",
"enable-all-tools": "Activate all tools",
"disable-all-tools": "Disable all tools",
"using-tool": "Using tool"
"using-tool": "Using tool",
"copy-success": "Copied successfully",
"copy-fail": "Copy failed",
"copy": "Copy",
"export": "Export",
"export-filename": "Export file name",
"how-to-use": "How to use?"
}

8
renderer/src/i18n/fr.json
View File

@ -176,5 +176,11 @@
"tool-manage": "Gestion des outils",
"enable-all-tools": "Activer tous les outils",
"disable-all-tools": "Désactiver tous les outils",
"using-tool": "Utilisation de l'outil"
"using-tool": "Utilisation de l'outil",
"copy-success": "Copié avec succès",
"copy-fail": "Échec de la copie",
"copy": "Copier",
"export": "Exporter",
"export-filename": "Nom du fichier d'exportation",
"how-to-use": "Comment utiliser ?"
}

8
renderer/src/i18n/ja.json
View File

@ -176,5 +176,11 @@
"tool-manage": "ツール管理",
"enable-all-tools": "すべてのツールを有効にする",
"disable-all-tools": "すべてのツールを無効にする",
"using-tool": "ツール使用中"
"using-tool": "ツール使用中",
"copy-success": "コピーしました",
"copy-fail": "コピーに失敗しました",
"copy": "コピー",
"export": "エクスポート",
"export-filename": "エクスポートファイル名",
"how-to-use": "使い方は？"
}

8
renderer/src/i18n/ko.json
View File

@ -176,5 +176,11 @@
"tool-manage": "도구 관리",
"enable-all-tools": "모든 도구 활성화",
"disable-all-tools": "모든 도구 비활성화",
"using-tool": "도구 사용 중"
"using-tool": "도구 사용 중",
"copy-success": "성공적으로 복사되었습니다",
"copy-fail": "복사 실패",
"copy": "복사",
"export": "내보내기",
"export-filename": "내보내기 파일 이름",
"how-to-use": "사용 방법?"
}

8
renderer/src/i18n/ru.json
View File

@ -176,5 +176,11 @@
"tool-manage": "Управление инструментами",
"enable-all-tools": "Активировать все инструменты",
"disable-all-tools": "Отключить все инструменты",
"using-tool": "Использование инструмента"
"using-tool": "Использование инструмента",
"copy-success": "Скопировано успешно",
"copy-fail": "Ошибка копирования",
"copy": "Копировать",
"export": "Экспорт",
"export-filename": "Имя экспортируемого файла",
"how-to-use": "Как использовать?"
}

8
renderer/src/i18n/zh-cn.json
View File

@ -176,5 +176,11 @@
"tool-manage": "工具管理",
"enable-all-tools": "激活所有工具",
"disable-all-tools": "禁用所有工具",
"using-tool": "正在使用工具"
"using-tool": "正在使用工具",
"copy-success": "复制成功",
"copy-fail": "复制失败",
"copy": "复制",
"export": "导出",
"export-filename": "导出文件名",
"how-to-use": "如何使用?"
}

8
renderer/src/i18n/zh-tw.json
View File

@ -176,5 +176,11 @@
"tool-manage": "工具管理",
"enable-all-tools": "啟用所有工具",
"disable-all-tools": "禁用所有工具",
"using-tool": "正在使用工具"
"using-tool": "正在使用工具",
"copy-success": "複製成功",
"copy-fail": "複製失敗",
"copy": "複製",
"export": "匯出",
"export-filename": "匯出檔案名稱",
"how-to-use": "如何使用？"
}

11
renderer/src/views/connect/core.ts
View File

@ -506,7 +506,11 @@ class McpClientAdapter {
constructor(
public platform: string
) {}
) {
if (platform !== 'nodejs') {
this.addConnectRefreshListener();
}
}
/**
* @description 获取连接参数签名
@ -570,12 +574,17 @@ class McpClientAdapter {
this.connectrefreshListener = bridge.addCommandListener('connect/refresh', async (message) => {
const { code, msg } = message;
console.log('refresh');
if (code === 200) {
// 查找目标客户端
const clientIndex = this.findClientIndexByUuid(msg.uuid);
if (clientIndex > -1) {
// 刷新该客户端的所有资源
console.log('clientIndex', clientIndex);
await this.clients[clientIndex].refreshAllResources();
this.refreshSignal.value++;
} else {

1
service/src/common/router.ts
View File

@ -22,7 +22,6 @@ export async function routeMessage(command: string, data: any, webview: PostMess
const { handler, option = {} } = handlerStore;
try {
// TODO: select client based on something
const res = await handler(data, webview);
// res.code = -1 代表当前请求不需要返回发送

1
service/src/hook/adapter.ts
View File

@ -57,6 +57,7 @@ export class VSCodeWebViewLike {
* @param message - 包含 command 和 args 的消息
*/
postMessage(message: WebSocketMessage): void {
if (this.ws.readyState === WebSocket.OPEN) {
this.ws.send(JSON.stringify(message));
} else {

8
service/src/main.ts
View File

@ -5,8 +5,7 @@ import { dirname, join } from 'path';
import { routeMessage } from './common/router.js';
import { VSCodeWebViewLike } from './hook/adapter.js';
import fs from 'fs/promises'; // 使用 Promise API 替代回调
import path from 'path';
import axios from 'axios';
import chalk from 'chalk';
export interface VSCodeMessage {
command: string;
@ -101,7 +100,10 @@ wss.on('connection', (ws) => {
acquireConnectionOption().then(option => {
webview.onDidReceiveMessage(async (message) => {
logger.info(`收到命令: [${message.command || '未定义'}]`);
console.log(
chalk.white('receive command') +
chalk.blue(` [${message.command || '未定义'}]`)
);
const { command, data } = message;

23
service/src/mcp/connect-monitor.service.ts
View File

@ -4,6 +4,8 @@ import { PostMessageble } from '../hook/adapter.js';
import * as fs from 'fs';
import * as path from 'path';
import { pino } from 'pino';
import chalk from 'chalk';
// 保留现有 logger 配置
const logger = pino({
@ -59,15 +61,11 @@ export class McpServerConnectMonitor {
debounceTime: 500,
duplicateCheckTime: 500,
onChange: async (curr, prev) => {
// 使用 info 级别记录文件修改
logger.info({
uuid: this.uuid,
size: curr.size,
mtime: new Date(curr.mtime).toLocaleString()
}, 'File modified');
try {
await onchange(this.uuid, this.Options);
console.log('send something');
this.sendWebviewMessage('connect/refresh', {
code: 200,
msg: {
@ -75,7 +73,11 @@ export class McpServerConnectMonitor {
uuid: this.uuid,
}
});
logger.info({ uuid: this.uuid }, 'Connection refresh successful');
console.log(
chalk.green('Connection refresh successfully')
);
} catch (err) {
this.sendWebviewMessage('connect/refresh', {
code: 500,
@ -122,4 +124,9 @@ export class McpServerConnectMonitor {
// 发送消息到webview
this.webview?.postMessage({ command, data });
}
public close() {
this.Monitor?.close();
}
}

31
service/src/mcp/connect.service.ts
View File

@ -9,7 +9,7 @@ import path from 'node:path';
import fs from 'node:fs';
import * as os from 'os';
import { PostMessageble } from '../hook/adapter.js';
import Table from 'cli-table3';
import chalk from 'chalk';
export const clientMap: Map<string, RequestClientType> = new Map();
export function getClient(clientId?: string): RequestClientType | undefined {
@ -21,7 +21,10 @@ export async function updateClientMap(uuid: string, options: McpOptions): Promis
const client = await connect(options);
clientMap.set(uuid, client);
const tools = await client.listTools();
console.log('[updateClientMap] tools:', tools);
console.log(
chalk.white('update client tools'),
chalk.blue(tools.tools.map(tool => tool.name).join(','))
);
return { res: true };
} catch (error) {
console.error('[updateClientMap] error:', error);
@ -267,25 +270,6 @@ export async function connectService(
webview?: PostMessageble
): Promise<RestfulResponse> {
try {
// 使用cli-table3创建美观的表格
// const table = new Table({
// head: ['Property', 'Value'],
// colWidths: [20, 60],
// style: {
// head: ['green'],
// border: ['grey']
// }
// });
// table.push(
// ['Connection Type', option.connectionType],
// ['Command', option.command || 'N/A'],
// ['Arguments', option.args?.join(' ') || 'N/A'],
// ['Working Directory', option.cwd || 'N/A'],
// ['URL', option.url || 'N/A']
// );
// console.log(table.toString());
// 预处理字符串
await preprocessCommand(option, webview);
@ -301,6 +285,11 @@ export async function connectService(
// }
// const client = clientMap.get(uuid)!;
{
clientMap.get(uuid)?.disconnect();
clientMonitorMap.get(uuid)?.close();
}
const client = await connect(option);
clientMap.set(uuid, client);
clientMonitorMap.set(uuid, new McpServerConnectMonitor(uuid, option, updateClientMap, webview));