XIAOSUO 记录个人学习的足迹

摘要：一、MCP概述 1. MCP协议 我们示例到目前所有的功能都是在项目内部开发完成的，如果一个 AI 应用只能使用内部功能，那它还达不到企业级 AI 的要求。因为企业内部会有各种各样的应用软件，虽然前面我们介绍了通过使用 AI 访问数据库来读取业务数据，但那只能满足简单的读取数据库的需求。 真实业务场景会复杂得多，比如希望在数据库中查找最新的销售报告，并将其通过电子邮件发送给指定的角色用户。这里发送邮件是企业内部邮箱服务的功能，而指定角色是身份服务的功能。这些功能在企业内部对应的应用中已经实现了，我们不可能在 AI 系统中再实现一次，而是需要让 AI 拥有调用其他系统的能力。 类似于 Web 系统中的 API 接口一样，AI 也有专门外部系统接入的协议，它就是 MCP 协议。 关于 MCP 的内容，我已经在前面的文章中详细介绍过了，请跳转到 MCP大模型外挂商店 阅读。 2. MCP 交互流程 我们用前面说的“在数据库中查找最新的销售报告，并将其通过电子邮件发送给指定的角色用户”来举例： 初始化：MCP 客户端连接到 MCP 服务器 LLM推理：查询数据库 + 查询角色 + 发送邮件 工具调用：MCP 客户端负责接受指令，发送给MCP服务器 执行：MCP 服务器负责执行，返给结果给客户端，返回给LLM 生成最终答复 3. MCP 服务生态 官方代码库 ：由 MCP 维护的 GitHub 代码库是首选的起点 。这里包含了许多常用服务的参考实现，例如本地文件系统、GitHub、Git、PostgreSQL 和用于浏览器自动化的 Puppeteer。这些官方服务器是学习和理解 MCP 最佳实践的绝佳范例。 社区精选列表 ：这是一个由社区驱动和维护的 GitHub 列表，它展示了 MCP 生态系统的广度和创造力 。在这里，可以找到从浏览器自动化、数据库交互到智能家居控制和特定应用（如 Bilibili 内容搜索）的各种服务器 。 MCP市场：一个第三方的 MCP 服务器和客户端市场，聚合了大量的服务器和客户端，并提供了分类和搜索功能 。 4. 安装 MCP 文件系统服务 这里我们从 github 中下载 modelcontextprotocol 提供的 filesystem 来做示例。 安装这个文件系统服务提供了很多种方式，细…… 阅读全文

摘要：一、前端环境搭建 1. 技术选型 前端 UI 我们采用 VUE + TS + Vite + Element Plus + ECharts + Pinia + SPA 来实现。 步骤 1，创建 Vue 项目，在 src 目录下执行： npm create vue@latest 项目名称: Qjy.AICopilot.VueUI 功能：TypeScript、Pinia、ESLint、Prettier 步骤 2，安装项目依赖包，我们进入到刚刚创建的 vue 项目，分别执行下面命令 cd Qjy.AICopilot.VueUI npm install npm install element-plus @element-plus/icons-vue npm install echarts npm install markdown-it @microsoft/fetch-event-source npm install -D @types/markdown-it 步骤 3，启用 pinia 和 element-plus //Qjy.AICoplot.VueUI/src/main.ts import { createApp } from 'vue' import { createPinia } from 'pinia' import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' import App from './App.vue' const app = createApp(App) // 创建应用实例 app.use(createPinia()) // 注册状态管理插件 app.use(ElementPlus) // 注册 ElementPlus 插件 app.mount('#app') // 挂载到 index.html 的 #app 节点 2. Aspire 集成 步骤 4，使用 Aspire 启动 vue 项目。先在 Asprise 项目安装 nuget 包：CommunityToolkit.Aspire.Hosting.NodeJS.Extensions //Qjy.AICopilot.AppHost/AppHost.cs bui…… 阅读全文