<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;">
        DotNetMCP SSE实践
    </h1>
</div>

---

# 1. 叨叨

MCP测试SSE模式

来自公众号 [十分钟入门MCPServer](https://mp.weixin.qq.com/s/9k02L2dfqJRUAtu9iuwGxg) , 其实用不了十分钟

这次的核心库是 [ModelContextProtocol](https://github.com/modelcontextprotocol/csharp-sdk) ,就是官方的库

上次的库`MCPSharp`还没有支持SSE

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



# 2. 引用
新建API项目，引用库

```
  <ItemGroup>
    <PackageReference Include="Swashbuckle.AspNetCore" Version="6.6.2" />
    <PackageReference Include="ModelContextProtocol" Version="0.1.0-preview.2" />
    <PackageReference Include="Flurl" Version="4.0.0" />
    <PackageReference Include="Flurl.Http" Version="4.0.2" />
  </ItemGroup>
```

# 3. 核心类 McpEndpointRouteBuilderExtensions

就是开启 /sse

```
using Microsoft.Extensions.Options;
using ModelContextProtocol.Protocol.Messages;
using ModelContextProtocol.Protocol.Transport;
using ModelContextProtocol.Server;
using ModelContextProtocol.Utils.Json;

namespace WebSSE
{
    public static class McpEndpointRouteBuilderExtensions
    {
        public static IEndpointConventionBuilder MapMcpSse(this IEndpointRouteBuilder endpoints)
        {
            IMcpServer? server = null;
            SseResponseStreamTransport? transport = null;
            var loggerFactory = endpoints.ServiceProvider.GetRequiredService<ILoggerFactory>();
            var mcpServerOptions = endpoints.ServiceProvider.GetRequiredService<IOptions<McpServerOptions>>();

            var routeGroup = endpoints.MapGroup("");

            routeGroup.MapGet("/sse", async (HttpResponse response, CancellationToken requestAborted) =>
            {
                await using var localTransport = transport = new SseResponseStreamTransport(response.Body);
                await using var localServer = server = McpServerFactory.Create(transport, mcpServerOptions.Value, loggerFactory, endpoints.ServiceProvider);

                await localServer.StartAsync(requestAborted);

                response.Headers.ContentType = "text/event-stream";
                response.Headers.CacheControl = "no-cache";

                try
                {
                    await transport.RunAsync(requestAborted);
                }
                catch (OperationCanceledException) when (requestAborted.IsCancellationRequested)
                {
                    // RequestAborted always triggers when the client disconnects before a complete response body is written,
                    // but this is how SSE connections are typically closed.
                }
            });

            routeGroup.MapPost("/message", async context =>
            {
                if (transport is null)
                {
                    await Results.BadRequest("Connect to the /sse endpoint before sending messages.").ExecuteAsync(context);
                    return;
                }

                var message = await context.Request.ReadFromJsonAsync<IJsonRpcMessage>(McpJsonUtilities.DefaultOptions, context.RequestAborted);
                if (message is null)
                {
                    await Results.BadRequest("No message in request body.").ExecuteAsync(context);
                    return;
                }

                await transport.OnMessageReceivedAsync(message, context.RequestAborted);
                context.Response.StatusCode = StatusCodes.Status202Accepted;
                await context.Response.WriteAsync("Accepted");
            });

            return routeGroup;
        }
    }
}

```

# 4. 工具类

把之前的工具类放上

```
using Flurl.Http;
using ModelContextProtocol.Server;
using System.ComponentModel;

namespace WebSSE.Tools
{
    [McpServerToolType]
    public static class ERPCost
    {
        [McpServerTool("get-cost-bycode"), Description("通过物料编号得到核价")]
        public static string GetCostByCode(
           IMcpServer thisServer,
           [Description("物料编号")] string code)
        {
            var response = "http://localhost/api/CRM/GetCostByCode"
                .WithHeader("accept", "*/*")
                .WithHeader("Content-Type", "application/json-patch+json")
                .PostJsonAsync(new
                {
                    GUID = "B02C2304120019",
                    hasCode = "",
                    data = new
                    {
                        CostCode = code,
                    }
                })
                .GetAwaiter().GetResult();

            // 处理响应
            var responseString = response.GetStringAsync().GetAwaiter().GetResult();

            var dis = @"Code	1 表示成功 ，非1表示有错误
Message	""成功"" 或 其他错误消息
MB001	品号
MB002	品名
MB003	规格
MB004	单位
CostUnitCost	当前成本（该物料在该账套的最近核价含税）
HasNoCost	1表示BOM中有价格为0的物料，0表示没有价格为0的物料
";
            return responseString + dis;
        }
    }
}

```

注意这里的 类的声明`McpServerToolType` 和 方法声明`McpServerTool`

# 5. 注册

注册工具 
```
            builder.Services.AddMcpServer().WithToolsFromAssembly();
            app.MapMcpSse();
```

---

启动就行了

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


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


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

这样就可以部署到docker进行远程调用了

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

DotNetMCP示例SSE

<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;
               text-transform: uppercase;
               letter-spacing: 2px;
               margin: 0;
               font-weight: 600;">
        DotNetMCP实践
    </h1>
</div>

---
`c#` `.net` 开发`MCP服务`挺简单的，几行代码就行


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



引用的库是 [`MCPSharp`](https://github.com/afrise/MCPSharp)

然后新建一个控制台程序，我用的.net8的


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

# 直接放代码



``` C#
  internal class Program
  {
      private static async Task Main(string[] args)
      {
          Console.WriteLine("Starting MCP Server...");
          await MCPServer.StartAsync("ERPCostServer", "1.0.0");
          Console.WriteLine("Server is running. Press any key to stop.");
          Console.ReadKey();
      }
  }
```

``` C#
    public class ERPCost
    {
        [McpTool("get-cost-bycode", "通过物料编号得到核价")]
        public static string GetCostByCode([McpParameter(true)] string code)
        {
            var response = "http://localhost/api/CRM/GetCostByCode"
                .WithHeader("accept", "*/*")
                .WithHeader("Content-Type", "application/json-patch+json")
                .PostJsonAsync(new
                {
                    GUID = "B02C2304120019",
                    hasCode = "",
                    data = new
                    {
                        CostCode = code
                    }
                })
                .GetAwaiter().GetResult();

            // 处理响应
            var responseString = response.GetStringAsync().GetAwaiter().GetResult();

            var dis = @"Code	1 表示成功 ，非1表示有错误
Message	""成功"" 或 其他错误消息
MB001	品号
MB002	品名
MB003	规格
MB004	单位
CostUnitCost	当前成本（该物料在该账套的最近核价含税）
HasNoCost	1表示BOM中有价格为0的物料，0表示没有价格为0的物料
";
            return responseString + dis;
        }
    }
```

主要是`await MCPServer.StartAsync`这个，可能去找`ERPCost`这个类了，不知道能不能`Start`多个;

# 然后发布

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

:::warning{title="注意"}
如果客户端在用，这个文件会被占用，二次发布失败，注意要先结束进程
:::


# 调用

我用的`Cherry Studio`

```
"test": {
      "description": "test",
      "isActive": true,
      "command": "cmd",
      "args": [
        "/c",
        "E:\\我的项目\\MCP\\MCPShapTest\\MCPShap.exe"
      ]
    }
```


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

---
完成，可以用了


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

DotNetMCP示例

![](/static/img/fdce3e1e2293a51344ce38cdc4c37bb4.2025-03-19_124521_300.webp)

> 作为第一批90后已经35岁了，虽然早早做了准备，但是好像一直在准备。上次琢磨还是毕业之后靠啥吃饭，现在又到被毕业的阶段了，各种成功手段到我这都成玄学了，因为开始走的就不是人脉路线，就得自己找船，唯一能安慰自己的就是只要眼前的船够多总有一个能上去。

**所以就得折腾**





## 1. 文生图

最近`Gemini 2.0 flash` 不是挺火么，原生文生图很厉害，接口我也测试了，返回的是`Base64`，需要自己转一下，我用 `cloudflare` 做了转换和图床，这里记录下别的白嫖平台，`智谱` 和 `硅基流动` 还有 `image.pollinations.ai` 都有免费的文生图服务，生成的效果反正就是抽卡，多抽几次呗；

## 2. 查询API

智谱的免费查询接口收费了 0.03元每次，博查是 0.036元每次，比 bing 什么的便宜多了，返回的数据还是比较详细的，省着自己再爬，我又部署了`firecrawl `效果还不错。别的`jina` `Tavily` `Brave`都有免费额度，但是收费也挺贵的，感兴趣的可以搜一搜。

## 3. MCP


`Cherry Studio`支持MCP了，测试了一下，准备自己写服务试试
```
{
  "mcpServers": {
    "fetch": {
      "isActive": true,
      "description": "fetch爬虫",
      "command": "uvx",
      "args": [
        "mcp-server-fetch"
      ]
    },
    "everything-search": {
      "isActive": true,
      "description": "everything-search",
      "command": "uvx",
      "args": [
        "mcp-server-everything-search"
      ],
      "env": {
        "EVERYTHING_SDK_PATH": "D:\\Soft\\EverythingToolbar-0.5.2\\Everything64.dll"
      }
    },
    "mcp-server-firecrawl": {
      "isActive": true,
      "command": "npx",
      "args": [
        "-y",
        "firecrawl-mcp"
      ],
      "env": {
        "FIRECRAWL_API_URL": "http://148.135.77.70:3002",
        "FIRECRAWL_API_KEY": "fc-search"
      }
    },
    "filesystem": {
      "isActive": false,
      "command": "cmd",
      "description": " Read/write files Create/list/delete directories Move files/directories Search files Get file metadata",
      "args": [
        "/c",
        "bunx",
        "-y",
        "@modelcontextprotocol/server-filesystem",
        "C:\\Program Files\\Cherry Studio"
      ],
      "autoApprove": [
        "read_file",
        "read_multiple_files",
        "list_directory",
        "directory_tree",
        "search_files",
        "get_file_info",
        "list_allowed_directories"
      ]
    }
  }
}
```

杂七杂八2025年3月19日

<div style="background: linear-gradient(135deg, #1a1a1a 0%, #0a3d62 100%);padding: 4rem 2rem;text-align: center;border-radius: 8px;border: 1px solid rgba(0, 255, 255, 0.2);box-shadow: 0 4px 20px rgba(0, 191, 255, 0.1);"><h1 style="color: #00ff88;font-family: Arial, sans-serif;font-size: 4rem;text-align: center;background: linear-gradient(90deg, #00ff88 0%, #00ffff 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;position: relative;text-transform: uppercase;letter-spacing: 4px;transition: 0.3s ease;transform: scale(1);filter: drop-shadow(0 0 40px #00ff88);">HTML转为图片输出</h1></div>

# HTML转为图片输出

## 问题

就是让AI 给我写了一个，将HTML片段转为图片的工具，比如这个`Banner`
```
<div style="
    background: linear-gradient(135deg, #1a1a1a 0%, #0a3d62 100%);
    padding: 4rem 2rem;
    text-align: center;
    border-radius: 8px;
    border: 1px solid rgba(0, 255, 255, 0.2);
    box-shadow: 0 4px 20px rgba(0, 191, 255, 0.1);
">
     <h1 style="
        color: #00ff88;
        font-family: Arial, sans-serif;
        font-size: 4rem;
        text-align: center;
        background: linear-gradient(90deg, #00ff88 0%, #00ffff 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        position: relative;
        text-transform: uppercase;
        letter-spacing: 4px;
        transition: 0.3s ease;
        transform: scale(1);
        filter: drop-shadow(0 0 40px #00ff88);
    ">HTML转为图片输出</h1>
</div>
```



AI选用的是`Puppeteer`这个组件，我没接触过，反正就是能自己配置，谷歌 火狐什么的浏览器，代码的，没有界面，叫无头浏览器，`路易十六很喜欢`

然后各种问题，首先 `Puppeteer` 这玩意压根不能用，我让用`C#`写，写的方法名压根不对，可能是版本问题；然后自己下的`Chrome`浏览器内核也不能用，好不容易本地调试完了，`Docker`里又报错了；

## 契机

后来放弃了，调着调着发现服务器空间不够了，由于我一直瞎搞，`100G` 就玩`Docker`，玩没了，我就清理，后来发现一个 `browserless/chrome`，我也没用上啊，发现在 `rsshub` 里挂着，看着名字是浏览器，一艘还真是，`rsshub`就是用这个[browserless](https://github.com/browserless/browserless)监听网页变化的

要不说瞎折腾有好处，指不定哪就藏个`路易十六`

## 宽高问题

因为我就录入一个div,一段，这里的宽高就不是浏览器的高度，Puppeteer默认高度是600，继续问AI，改了一天也没改对；

最后是有两处，默认的高度要给够，写了个8000，然后再算一次，就是 `document.querySelector('body > div').getBoundingClientRect().height`，只能是元素的高度，`body`也不行，`document`也不行

## 代码

一共没多少行
``` c#
using Microsoft.AspNetCore.Mvc;
using PuppeteerSharp;

namespace HtmlToImageApi.Controllers
{
    public class HtmlRequest
    {
        public string DIV { get; set; }

        public int MaxWidth { get; set; } = 600;
    }

    [ApiController]
    [Route("[controller]")]
    public class HtmlToImageController : ControllerBase
    {
        private readonly string _imageDirectory = $"{AppContext.BaseDirectory}images";

        [HttpPost]
        public async Task<IActionResult> Post([FromBody] HtmlRequest _request)
        {
            var html = _request.DIV;

            if (string.IsNullOrEmpty(html))
            {
                return BadRequest("HTML content is required.");
            }

            try
            {
                var browser = await Puppeteer.ConnectAsync(new ConnectOptions
                {
                    BrowserWSEndpoint = "ws://browserless:1201",//browserless地址
                    DefaultViewport = new ViewPortOptions { Width = _request.MaxWidth, Height = 8000 }
                });

                var page = await browser.NewPageAsync();

                if (!html.Trim().StartsWith("<html", StringComparison.OrdinalIgnoreCase))
                {
                    html = $"<html><head><style>body {{ font-family: 'Noto Sans SC', sans-serif; margin: 0 auto;height: auto; }}</style></head><body>{html}</body></html>";
                }

                await page.SetContentAsync(html);
                // 等待所有字体加载完成
                await page.EvaluateFunctionAsync(@"async () => {
                     await document.fonts.ready;
                }");

                // 获取元素内容高度
                var contentHeight = await page.EvaluateFunctionAsync<decimal>(@"() => {
                    return document.querySelector('body > div').getBoundingClientRect().height;
                }");
                var contentWidth = await page.EvaluateFunctionAsync<decimal>(@"() => {
                    return document.querySelector('body > div').getBoundingClientRect().width;
                }");

                // 根据内容高度重新设置视口
                await page.SetViewportAsync(new ViewPortOptions { Width = Convert.ToInt32(contentWidth), Height = Convert.ToInt32(contentHeight) });

                var fileName = $"{Guid.NewGuid()}.png";
                var filePath = Path.Combine(_imageDirectory, fileName);

                await page.ScreenshotAsync(filePath, options: new ScreenshotOptions
                {
                    FullPage = true,
                });
                await browser.CloseAsync();

                return Ok(fileName);
            }
            catch (Exception ex)
            {
                return StatusCode(500, $"Error: {ex.Message}");
            }
        }
    }
}
```

browserless Docker
```yml
browserless:
    # marked
    image: browserless/chrome # marked
    restart: always # marked
    ulimits:
      # marked
      core:
        # marked
        hard: 0 # marked
        soft: 0 # marked
    healthcheck:
      test:
        - CMD
        - curl
        - -f
        - http://localhost:3000/pressure
      interval: 30s
      timeout: 10s
      retries: 3
    ports:
      - 1201:3000
```

Dockerfile
```yml
# 使用官方 ASP.NET Core 运行时镜像
FROM mcr.microsoft.com/dotnet/aspnet:9.0 AS base
WORKDIR /app


# 安装字体
RUN apt-get update && apt-get install -y fonts-noto-cjk fonts-noto-color-emoji

# 使用官方 .NET Core SDK 镜像构建应用
FROM mcr.microsoft.com/dotnet/sdk:9.0 AS build
WORKDIR /src
COPY ["HtmlToImageApi.csproj", "."]
RUN dotnet restore "./HtmlToImageApi.csproj"
COPY . .
WORKDIR "/src/."
RUN dotnet build "HtmlToImageApi.csproj" -c Release -o /app/build

# 发布应用
FROM build AS publish
RUN dotnet publish "HtmlToImageApi.csproj" -c Release -o /app/publish

# 最终镜像
FROM base AS final
WORKDIR /app

COPY --from=publish /app/publish .
EXPOSE 5000
ENTRYPOINT ["dotnet", "HtmlToImageApi.dll"]
```


![3cf86a25-0275-493a-b0d9-6e7fb094634d.png](/static/img/d929f279f865c672dae701ce4f9d63bb.3cf86a25-0275-493a-b0d9-6e7fb094634d.webp)

将一段HTML转为图片输出

<div style="background: #1a1f2c; padding: 3rem; border-left: 4px solid #3b82f6; 
  box-shadow: 0 4px 20px rgba(59, 130, 246, 0.15);">
  <h1 style="font-family: 'Helvetica Neue', sans-serif; font-size: 2.75rem; 
    color: #f1f5f9; margin: 0; display: flex; align-items: center; gap: 1rem;">
    <span style="display: inline-block; width: 8px; height: 40px; background: #3b82f6;"></span>
    TraeCN
    <span style="color: #94a3b8; font-weight: 300;">测试</span>
  </h1>
</div>



# TraeCN 测试


[Trae](https://www.trae.com.cn) 挺火的，我也测了以下**Builder 测试版本**，这里放几个截图，

## Builder 测试版本

模型支持DeepSeekV3 和 DeepSeekR1，这里显示`DeepSeek-Reasoner` 和 `DeepSeek-Chat`，应该指向的是官方模型，目前没有使用限制；还有个豆包模型但是现在是灰色的，是得灰这玩意怕比；



这里我输入了一个需求：



![wechat_2025-03-04_092109_941.png](/static/img/a43a97e01bdd5f17a3a95655b757412e.wechat_2025-03-04_092109_941.webp)

然后自己进行了思考和编写代码，`main.py` `requirements.txt` `Dockerfile`;

#### 构建 
直接构建，遇见了网络问题... `python:3.9-slim` 镜像执行 `apt-get install`时候会无网络，R1开始尝试修复;


![wechat_2025-03-04_094753_362.png](/static/img/b9f98cefd1e9617f6aaa9360b1a7c764.wechat_2025-03-04_094753_362.webp)

可以看到，`Trae` 尝试修改`Dockerfile`，然后人工确认修改，执行构建命令，人工确认执行，监听终端窗口，发现问题，再次尝试修改`Dockerfile` ... ，然后就报错了，**官方模型实锤**。

#### 修改代码

然后修改代码也会失败，哈；

![wechat_2025-03-04_100333_525.png](/static/img/d0bc0d69cd0428a3706013494032aa70.wechat_2025-03-04_100333_525.webp)

#### 历史

后来我发现AI修改的怎么退回呢，这里有个时间线，从这回退；


![wechat_2025-03-04_101002_806.png](/static/img/8b3207d896602696a5cd8bb14ffbf044.wechat_2025-03-04_101002_806.webp)

---

HTML到底怎么转成图片保存，这里我用了 `PuppeteerSharp` ，下次分享。