# 设计
![图片.png](/static/img/91477d1525f9c3ec485b8c4074216d47.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)



# 制作

![图片.png](/static/img/a7cc6c02fbaa2eb29bc33eb2008192f1.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)

# 成品


![图片.png](/static/img/ad7c175c1353895324d9dd57ed1bd38b.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)


![A$J0}R~76R4BW{_$%%KUMV9.jpg](/static/img/47e3d452dc45934676c4c6b6bb7f9394.A$J0%7DR~76R4BW%7B_$%25%25KUMV9.webp)

用image2画页面太方便了

<div style="background: linear-gradient(to right, #434343 0%, #000000 100%); 
            padding: 3rem 2rem; 
            text-align: center; 
            border-radius: 8px; 
            border: 1px solid rgba(255, 255, 255, 0.2); 
            box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);">
    <h1 style="color: #00ff88;
               font-family: Arial, sans-serif;
               font-size: 2.5rem;
               text-align: center;
               background: linear-gradient(90deg, #00ff88 0%, #00ffff 100%);
               -webkit-background-clip: text;
               -webkit-text-fill-color: transparent;
               position: relative;
               letter-spacing: 2px;
               margin: 0;
               font-weight: 600;">
        VS2022 MCP扩展插件
    </h1>
</div>

---

> 本来想搜一下codex的lsp功能，Grok搜出来一个vs-mcp的Visual Studio扩展（不是Vscode！），折腾了一下用上了，这里记录下

# 1. 安装
vs中扩展-管理扩展， 直接搜索 `MCP AI Server`，然后安装🔧就行了

![图片.png](/static/img/19df886b5c6c2fa546251d3f3cb560fb.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)

安装后 在工具中会有一个选项，可以启动，配置端口号，开启的工具🔢等；这里应该要手动开启，而且每次都要开启；



> 2026年3月10日 插件居然更新并开源了 
> https://marketplace.visualstudio.com/items?itemName=LadislavSopko.mcpserverforvs

![图片.png](/static/img/66c5d66fe30eaf06bdcdfd2b9e56fd9e.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)

最后得到一个mcp的地址 `http://localhost:3001/sdk` 就能链接成功了👍


![图片.png](/static/img/c6a3506a416a47a893291d13069b82c0.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)

# 2. 用不上🚫

问题就来了，我的codex在WSL环境里，`localhost`肯定不是指向宿主机，想到反代指向宿主机IP，或者映射端口号，但是全试了，这个地址 `http://localhost:3001/sdk` 只要不是 `localhost` 就不行，写死了，127.0.0.1、0.0.0.0 都不行；

![图片.png](/static/img/3ccc199ab3f4a39ef668a28c728fba74.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)

# 3. 再套一层📦

无奈，又套了一层MCPHUB，
```
npm install -g @samanhappy/mcphub
mcphub
```

![图片.png](/static/img/2de391048885ec31c86ca62d4623af54.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)

`mcphub` 就可以暴露给WSL中的codex了，

```
[mcp_servers.mcphub]
enabled = true
url = "http://IP:3000/mcp"
```

# 4. 后续

- 然后`mcphub` 非要授权，`codex mcp login mcphub` 才能用，我也没搞懂怎么跳过；token配置了也不好使；
  > 点左下角的用户名，有设置可以关闭验证
- `vsmcp` 插件里 有 WSL的配置，说明考虑了，但是不知道怎么直接用

![图片.png](/static/img/c7dfa53838bb5ab18f28b56f329ed13d.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)

但是好赖运行起来了，对于大一点的项目，比codex自己search快了一点，

![图片.png](/static/img/688ef6fb0a5dd1d2b6e2568418c511da.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)

VS2022MCP扩展插件

<div style="background: linear-gradient(to right, #434343 0%, #000000 100%); 
            padding: 3rem 2rem; 
            text-align: center; 
            border-radius: 8px; 
            border: 1px solid rgba(255, 255, 255, 0.2); 
            box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);">
    <h1 style="color: #00ff88;
               font-family: Arial, sans-serif;
               font-size: 2.5rem;
               text-align: center;
               background: linear-gradient(90deg, #00ff88 0%, #00ffff 100%);
               -webkit-background-clip: text;
               -webkit-text-fill-color: transparent;
               position: relative;
               letter-spacing: 2px;
               margin: 0;
               font-weight: 600;">
        AI应用随记
    </h1>
</div>

---
> 记录一下，第一个全程用AI开发的工具上线使用了。

### 开发工具

* ClaudeCode 
    - 前半段用的claude4.5，但是国内的总是断开，后来用的MiniMax2，首月9.9
* Codex
    - 这里用的佬友开发的MCP服务 [
codexmcp
](https://github.com/GuDaStudio/codexmcp)
    - gpt5.1codex 配合 CodexCli写代码还是比较准确的，但是整体的规划不好，有时候会过度写；Claude细节又写不好，而且后面换了`MiniMax2`能力不是很突出，经常说改了但是还那样，所以后来的方案还是结合起来用；
    
    - 放个codex稳定服务商  [Routin](https://routin.ai/register?invitationCode=4NXUZZ)

* CodeSwitch
    - 前半段使用[CodeSwitchR](https://github.com/Rogers-F/code-switch-R)进行本地的切换；因为每次还要启动所以后面就换了；
* CCH
    * 后期使用了 [claude-code-hub](https://github.com/ding113/claude-code-hub)部署到VPS进行管理；
    
### 开发过程

1. 首先**第一版**PRD是手写的✍️，和`Gemini2.5Pro`一块讨论的，最终就想管理服务器的开机启动、定时任务、循环任务；能写脚本就行；
2. `Gemini2.5Pro`画的原型图📐，其实这一步是完善PRD的操作，高可用原型的成本已经非常低了，这里的PRD不仅是给人看的也是AI的提示词所以需要反复的迭代；最后输出**需求和初设文档**，要求是在初步设计时不带有具体的代码实现，如有必要只使用伪代码进行关键的逻辑描述，遵循MVP设计原则🎯；
3. 初步的定稿后使用的`Gemini3.0Pro`定义前端主题，前端审美这一块，拿捏🤏 ，一次就定下了主题；
4. 通过初设文档写了用户故事，进一步让AI能理解需求🤔，这两个文档是cc生成并且人工审核修改的，之后的工作就完整交给**Vibe coding**了；
5. 大模块和基本功能定下后，我让cc根据**需求和初设**和**用户故事**输出了**测试数据**和**后端接口文档**，进一步限定开发范围，避免过度设计；
6. 接下来我用`claude-sonnet-4-5`进行了技术选型并搭建基本程序框架，正式进入代码编写阶段👨‍💻；
7. 由于之前写了测试数据`Mock`,我直接从最核心的模块🧩进行开发，一些基础的数据全部来自测试数据，如果核心模块测试通过，其他外围的数据就固定了；
8. 首先我完成了服务器管理的核心功能⭐开发测试；
    * 前半段完全使用codex开发的，他的遵循能力很强，像前端基本设计出来能看，但是claude4.5总是在写前端时发挥导致页面主题看不得，还要用codex改；
    * 但是codex有个问题就是总会写新方法，加功能或者改一个小功能，都时一片绿色（加代码），中间我又让其进行了多次的重构和抽象以提取通用的代码；后来使用cc+codexmcp有所收敛;
    * `MiniMax2`的代码修复能力只能靠撞，抽卡，而且异常执拗；
9. 然后是基础数据的开发，像节点管理，脚本模板等；
10. 最后是系统日志、系统设置，仪表盘，登录认证是最后完成的；
11. 总耗时两周，总token数不好统计，大于200M，请求次数大于5000次；` 1 作者 已经推送 95 提交 到 master 和 95 提交 到所有分支。 在 master 上， 371 文件 已经改变 而且 新增 101407 行 和 删除 32989 行.`

### 随记
人人都是产品经理这句话越来越得到体现，我只做了软件范围的限定和测试（其实测试这部分也可以自动化）；

![图片.png](/static/img/b3e19091de7b4c37f99ee4b9f8659f0b.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)


![图片.png](/static/img/73f9270bce36e7c44eb68fa1a3916149.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)

![图片.png](/static/img/dd74651e38af15db2515cb1604bf15f4.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)

![图片.png](/static/img/0c1cf5792af642976beb8341259e07ed.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)

![图片.png](/static/img/6975132ee7317cbad3b10443e43ce84f.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)

我的第一个100%Vibe coding应用

<div style="background: linear-gradient(to right, #434343 0%, #000000 100%); 
            padding: 3rem 2rem; 
            text-align: center; 
            border-radius: 8px; 
            border: 1px solid rgba(255, 255, 255, 0.2); 
            box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);">
    <h1 style="color: #00ff88;
               font-family: Arial, sans-serif;
               font-size: 2.5rem;
               text-align: center;
               background: linear-gradient(90deg, #00ff88 0%, #00ffff 100%);
               -webkit-background-clip: text;
               -webkit-text-fill-color: transparent;
               position: relative;
               letter-spacing: 2px;
               margin: 0;
               font-weight: 600;">
        日常AI应用随记
    </h1>
</div>

# 日常AI应用实践总结

## 1. 辅助开发

### 1.1. 注释生成
*   **自研插件 (FineUICoreDesignerPro for VS2022):** 在前台文件保存时，利用AI自动读取文件内容，为控件生成注释，方便后台的调用与维护。

![图片.png](/static/img/d2ccce88a84257f9e4d24bb0144cca42.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)
![图片.png](/static/img/dce04c06827e2467130da7d553bc133e.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)


### 1.2. Git自动提交
*   **VS2022 集成工具 (基于 AICommits):** 汉化并集成了开源项目 AICommits。通过一键操作，AI能够自动读取代码的修改内容（diff），生成规范且表意清晰的 commit message，并完成提交与推送。

![图片.png](/static/img/ccf2ea515d299fb17110ba0f7882f931.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)
### 1.3. 编写代码
*   **辅助工具/插件:** Codex CIL, Claude CIL, Kilo Code 等。
*   **主力模型:** GLM-4.6, Gemini 2.5 Pro, Claude-4-Sonnet。

---

## 2. MCP插件与知识库

### 2.1. 提交记录查询
*   **自研Gitea MCP插件:** 配合AI，可以高效地读取指定项目或时间段内的Git提交记录，并进行智能总结或精确查询，快速定位版本变更历史。

### 2.2. ERP库表查询
*   **自研ERP库表查询MCP:** 能够查询当前ERP系统的数据库表结构。通过配置AI，实现TXT2SQL，辅助进行复杂的库表查询、字段查询和SQL语句编写。

### 2.3. ERP智能查询平台 (Agent + 知识库)
*   **技术架构:** 基于开源项目 **FastGPT** 搭建。
*   **知识库构建:** 整合公开的易飞ERP资料，构建领域知识库。
*   **应用模式:** 以智能体（Agent）的形式，配合MCP插件，用于解答ERP相关的业务流程问题和数据库技术问题。

![图片.png](/static/img/0fcd3309afdc0bc3e3b08b6a11c96b3a.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)

![图片.png](/static/img/d28c59a1523cff915d2ad91de1dfdb32.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)

![图片.png](/static/img/6f03632f94e2e6ada1077892d1a7efa5.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)
---

## 3. 其他效率工具

### 3.1. 自研智能图表生成器
*   **核心功能:** 根据自然语言提示（Prompt）生成 **ECharts** 图表。
*   **智能交互:** 能够智能推送图表优化建议，并支持通过连续对话进行图表的实时修改。
*   **输出与分享:** 支持将生成的图表导出为PNG图片，并提供分享功能。


![图片.png](/static/img/8cdc8de8290e60aa4d0478e74f8502c7.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)
### 3.2. 自研流程图工具
*   **核心功能:** 根据自然语言提示（Prompt）生成 **Mermaid** 语法的流程图。
*   **交互特性:** 支持连续对话、查看历史对话记录以及版本回退功能。


![图片.png](/static/img/1374f9af28b5e0048f69590cc15a8c8a.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)

拥抱AI-日常AI应用

<div style="background: linear-gradient(135deg, #1a1a1a 0%, #0a3d62 100%); 
            padding: 3rem 2rem; 
            text-align: center; 
            border-radius: 8px; 
            border: 1px solid rgba(255, 255, 255, 0.1); 
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);">
    <h1 style="color: #00ff88;
               font-family: Arial, sans-serif;
               font-size: 2.5rem;
               text-align: center;
               background: linear-gradient(90deg, #00ff88 0%, #00ffff 100%);
               -webkit-background-clip: text;
               -webkit-text-fill-color: transparent;
               position: relative;
               letter-spacing: 2px;
               margin: 0;
               font-weight: 600;">
        用AI开发的随记
    </h1>
</div>

---

## 碎碎念

最近拥抱AI开发，给已有的扩展增加了功能，修改了两个开源项目，有了AI后基本就是0门槛，直接对话，然后等结果，测试，反馈，再等结果，提交；这里随便记一下；

常用的模型是`GLM-4.5`，`claude-4-sonnet`，`gemini-2.5-pro`，为什么是三个，这个真的要配合用，`claude-4-sonnet`写代码的欲望是最强的，`GLM-4.5`差不多但是有时候比较执着，`gemini-2.5-pro` 比较保守（懒）可能不是重点写代码的模型吧。



token消耗和流水一样，成本巨大，我的扩展控件，开发了一个功能，用了`1000Mtoken`；挺多的，主力是`GLM-4.5`，`claude`实在用不起，因为也不是生产开发，就是做点小功能。

FineUI的前端调试扩展基本整个模块都是AI写的，人工参与5%左右，我就关了点日志，之前很少接触的浏览器扩展，nodejs 现在也是0基础上手了，经过30多年的学习，和AI使用中文对话还是很流畅的。

对话过程有时候也会被气死，架子可能一次对话就搭建完了，修改BUG可能会遇见LLM的执拗，找不到重点，无限重试，怎么告诉他错了也不好使，因为上下文太多吧，这时需要及时暂停指出，或者自己总结上下文重新对话。RooCode插件还是很直观的能回溯能切换模型。

---
## 最后

最后，用AI修改了[aicommits](https://github.com/Nutlope/aicommits)项目，一个通过AI总结git提交的插件，原项目不能配置openai地址，众所周知`https://api.openai.com`不是正确的地址。

这里有一个实践就是VS2022可以自定义命令，这样配置工具菜单中就会有一个项了，算是快捷方式，当然也是AI告诉我的。

![图片.png](/static/img/eb5eba3cbda8ee3741df55b26c3aa9de.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)


![图片.png](/static/img/f4b91ed5bf2d4141594f501df65aa103.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)


![图片.png](/static/img/05391dd9d28061fb79a0a34a74a107c6.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)
---

## 继续念

用AI编程后，感觉博客没啥可总结分享的；都是对话，改啥了我也没看，能用就OK提交了，撑死分享个成品，即使记上点啥东西也是AI告诉我的，我再写博客里，感觉没啥必要。

一下又得到了，一下又失去了

有一天就完全黑盒了，硬件底层是量子的不可测，开发语言也是混沌的，AI能看懂就得了呗，终端就一个对话框，或者 我就是终端