Yi.Framework/Yi.Ai.FileAssistant/ui/index.md

# MCP + Electron 桌面端架构说明

本文档整理了使用 **Vue3 + TypeScript + Electron + Node.js** 构建桌面端应用，并与 **C# 实现的 MCP Server** 通信的整体流程与任务清单。

---

## 1. 总体架构流程图

```mermaid
flowchart TD
    subgraph DesktopApp["桌面端应用 (Electron + Vue3 + TS)"]
        UI["用户界面 (Vue3 + ElementPlus)"]
        IPC["IPC 通信 (Electron Renderer ⇔ Main)"]
    end

    subgraph NodeLayer["Node.js 服务层 (MCP Client SDK)"]
        NodeClient["MCP Client (TypeScript)"]
        Adapter["协议适配 / API 转换"]
    end

    subgraph CSharpMCP["C# MCP Server"]
        CSharpSrv["MCP Server (.NET 实现)"]
    end

    User["👤 用户"] --> UI
    UI --> IPC
    IPC --> NodeClient
    NodeClient --> Adapter
    Adapter <--> CSharpSrv

说明：

• 用户操作 Electron 桌面应用（Vue3 UI）
• Vue3 通过 IPC 将请求发送给 Node.js 主进程
• Node.js 主进程作为 MCP Client 调用 C# MCP Server
• C# MCP Server 处理请求并返回结果，Node.js 再返回给前端 UI

2. 项目架构图

flowchart TD
    subgraph Frontend["前端 (Electron + Vue3 + TS)"]
        FE1["界面层 (Vue3 + ElementPlus)"]
        FE2["渲染进程 (Electron Renderer)"]
        FE3["主进程 (Electron Main)"]
    end

    subgraph Backend["Node.js 层"]
        BE1["MCP Client (TypeScript SDK)"]
        BE2["协议桥接层 (调用 C# MCP Server)"]
    end

    subgraph CSharp["C# MCP Server"]
        CS1["MCP 服务端 (C# 实现)"]
        CS2["提供资源 / 工具 / 数据"]
    end

    FE1 --> FE2 --> FE3 --> BE1 --> BE2 --> CS1 --> CS2

3. 关键技术栈

层级	技术	作用
桌面端 UI	Vue3 + TypeScript	构建现代化桌面端界面
	Element Plus	UI 组件库
	Electron	将前端打包为桌面应用，支持跨平台 (Win/Mac/Linux)
Node 服务层	Node.js	桥接前端与 C# MCP 服务
	MCP TypeScript SDK	与 MCP Server 通信的官方 SDK
	IPC (Electron)	渲染进程和主进程之间通信
后端服务	C# (.NET)	实现 MCP Server，提供业务逻辑
	MCP C# SDK	实现 MCP 协议的标准方式
通用	Model Context Protocol (MCP)	定义 LLM/客户端与工具/数据服务的通信协议

4. Model Context Protocol (MCP) 参考

作用

MCP（Model Context Protocol）是为大语言模型 (LLM) 定义的一种协议，使其可以安全、标准化地访问外部工具和数据。

在本项目中：

• Node.js 层充当 MCP Client，负责发请求
• C# 层充当 MCP Server，负责处理请求并返回结果

常见 MCP SDK 实现

• TypeScript MCP SDK
• Python MCP SDK
• C# MCP SDK
• Go / Rust / Kotlin / Java 等语言版本

官方参考服务

• Filesystem：安全文件操作
• Git：读取和操作 Git 仓库
• Memory：知识图谱式持久化存储
• Time：时间与时区转换

5. 开发任务清单

前端 (Electron + Vue3)

• 设计桌面 UI 界面
• 实现 Electron 渲染进程 ⇔ 主进程的 IPC 通信
• 提供用户操作入口（调用 Node 层 API）

Node.js 服务

• 集成 MCP TypeScript SDK，作为 MCP 客户端
• 负责和 C# MCP Server 建立通信（Stdio / Socket 等）
• 封装 API，供前端调用

C# MCP Server

• 使用 MCP C# SDK 实现协议服务端
• 提供具体的资源 / 工具 / 数据接口
• 保证安全和权限控制

打包与部署

• 使用 Electron Builder / Forge 打包应用
• 跨平台支持（Windows / macOS / Linux）
• 测试桌面端 → Node.js → MCP Server 的完整链路

6. 流程总结

1. 用户在桌面应用 (Electron + Vue3) 中操作 UI
2. Electron 将指令通过 Node.js 服务 转换为 MCP 请求
3. Node.js 服务与 C# MCP Server 通信
4. C# MCP Server 返回结果 → Node.js → Electron → UI 显示

---

这个 Markdown 文档包含：

• 总体架构流程图
• 项目架构图
• 关键技术栈
• MCP 相关说明
• 开发任务清单
• 流程总结

可以直接复制到文档或者笔记里使用。