【Trae + 自制MCP】给AI装上翅膀，快速得到网站图标

LucianaiB
14,709 阅读8分钟

image.png

【Trae + 自制MCP】给AI装上翅膀，快速得到网站图标

🌟嗨，我是LucianaiB！

🌍 总有人间一两风，填我十万八千梦。

🚀 路漫漫其修远兮，吾将上下而求索。

目录

引言

自从上个月开始使用Trae以来，我便深深爱上了这款工具。无论是日常的AI对话还是专业的工作需求，Trae都提供了高效、免费且便捷的服务。特别是对于像我这样对技术充满热情的人来说，Trae不仅仅是一个工具，它更像是一个强大的助手，帮助我更高效地完成各种任务。

在使用Trae的过程中，我对MCP（Model Context Protocol）产生了浓厚的兴趣。MCP是一种协议，允许不同的工具和平台之间进行高效的通信和协作。基于这种兴趣，我决定自制一个网站爬取图标生成工具@lucianaib/logo-mcp。这个工具不仅能够根据文本内容自动爬取高质量的图标，还能够保存在本地，方便用户直接查看和使用。

效果展示

AI对话

image.png

图标效果

图标效果地址：lf-web-assets.juejin.cn/obj/juejin-…

图标效果示例：

image.png

Logo MCP

一个智能Logo提取和处理的MCP（Model Context Protocol）服务器，支持从网站URL自动识别并提取Logo图标，并提供图像处理和矢量转换功能。

功能特性

🎯 智能Logo提取

  • 多源识别：支持从favicon、Apple Touch图标、OpenGraph图像、CSS类名等多种方式提取Logo
  • 智能评分：自动评估候选Logo质量，选择最佳版本
  • 格式支持：支持PNG、JPG、SVG等多种图像格式
  • 尺寸优化：自动选择合适尺寸的Logo版本

🖼️ 图像处理

  • 格式转换：支持PNG、JPG、SVG格式互转
  • 尺寸调整：智能缩放到指定尺寸
  • 质量增强：针对小尺寸图像进行超分辨率处理
  • 空白移除：自动检测并移除图像空白边缘
  • 损坏检测：识别并过滤损坏的图像文件

⚡ 矢量转换

  • 位图转矢量：使用Potrace算法将位图转换为SVG
  • 多色支持：支持生成多色矢量图
  • 图标优化：生成简化的图标风格SVG
  • SVG优化：压缩和优化SVG文件大小

安装使用

作为MCP服务器使用

  1. 安装依赖：
npm install @lucianaib/logo-mcp
  1. 在MCP客户端配置中添加：
{
  "mcpServers": {
    "logo-mcp": {
      "command": "npx",
      "args": ["@lucianaib/logo-mcp"]
    }
  }
}

开发环境设置

  1. 克隆仓库：
git clone https://github.com/lfrbmw/Logo-MCP.git
cd Logo-MCP
  1. 安装依赖：
npm install
  1. 构建项目：
npm run build
  1. 启动开发服务器：
npm run dev

MCP工具

extract_logo

从指定网站URL提取Logo图标

参数：

  • url (必需): 要提取Logo的网站URL
  • format (可选): 输出格式 (png/jpg/svg)，默认为png
  • size (可选): 输出尺寸（像素），默认为256
  • enhance (可选): 是否启用图像增强，默认为true

示例：

{
  "name": "extract_logo",
  "arguments": {
    "url": "https://www.google.com",
    "format": "png",
    "size": 256,
    "enhance": true
  }
}

convert_to_vector

将Logo图像转换为矢量图（SVG格式）

参数：

  • imageUrl (必需): 图像URL或base64数据
  • threshold (可选): 矢量化阈值（0-255），默认为128
  • optimize (可选): 是否优化SVG输出，默认为true

示例：

{
  "name": "convert_to_vector",
  "arguments": {
    "imageUrl": "https://example.com/logo.png",
    "threshold": 128,
    "optimize": true
  }
}

analyze_logo

分析Logo的基本信息（尺寸、格式、质量等）

参数：

  • url (必需): 要分析的网站URL

示例：

{
  "name": "analyze_logo",
  "arguments": {
    "url": "https://www.github.com"
  }
}

技术架构

核心模块

  • LogoExtractor: 负责从网站提取Logo候选项
  • ImageProcessor: 处理图像格式转换和质量优化
  • VectorConverter: 执行位图到矢量的转换

依赖库

  • @modelcontextprotocol/sdk: MCP协议支持
  • axios: HTTP请求处理
  • cheerio: HTML解析
  • sharp: 图像处理
  • potrace: 矢量化转换
  • image-size: 图像尺寸检测

Logo提取策略

1. 多源候选提取

  • Favicon链接 (<link rel="icon">)
  • Apple Touch图标 (<link rel="apple-touch-icon">)
  • OpenGraph图像 (<meta property="og:image">)
  • CSS类名识别 (.logo, #logo, .brand等)
  • 品牌相关图像

2. 智能评分算法

  • 类型权重：Logo类名 > Apple Touch > Favicon > 品牌图像 > OG图像
  • 尺寸评分：偏好32-512px的正方形或接近正方形图像
  • 质量检测：过滤损坏或空白图像

3. 最佳选择

根据综合评分自动选择最符合主视觉的Logo版本

图像处理流程

1. 预处理

  • 格式检测和验证
  • 损坏图像过滤
  • 空白边缘移除

2. 增强处理

  • 小尺寸图像超分辨率
  • 锐化和色彩优化
  • 噪点减少

3. 格式转换

  • 支持PNG、JPG、SVG输出
  • 质量和文件大小优化
  • 透明背景保持

矢量转换算法

1. 预处理

  • 灰度转换
  • 阈值二值化
  • 尺寸优化

2. 矢量化

  • 使用Potrace算法
  • 路径优化
  • 曲线平滑

3. 后处理

  • SVG代码优化
  • ViewBox标准化
  • 文件大小压缩

错误处理

  • 网络错误：超时重试和友好提示
  • 图像损坏：自动检测和跳过
  • 格式不支持：清晰的错误信息
  • 无Logo情况：返回友好的无结果提示

性能优化

  • 并发处理：多候选Logo并行验证
  • 缓存机制：避免重复下载
  • 内存管理：及时释放图像缓冲区
  • 超时控制：防止长时间阻塞

贡献指南

  1. Fork项目
  2. 创建功能分支 (git checkout -b feature/AmazingFeature)
  3. 提交更改 (git commit -m 'Add some AmazingFeature')
  4. 推送到分支 (git push origin feature/AmazingFeature)
  5. 打开Pull Request

许可证

本项目采用MIT许可证 - 查看 LICENSE 文件了解详情

作者

支持

如果您遇到问题或有功能建议，请在 GitHub Issues 中提出。

Logo MCP - 让Logo提取变得简单智能 🚀

Trae配置MCP

1.以管理员身份运行trae，在对话框的上方可以看到有配置MCP，点击进入下一步。

image.png 在右侧点击手动配置，然后输入下面配置json代码，提示摁下ctrl + s保存，当右侧出现logo-mcp并且有一个绿色的圆圈时说明配置成功。

{
  "mcpServers": {
    "logo-mcp": {
      "command": "npx",
      "args": [
        "@lucianaib/logo-mcp"
      ]
    }
  }
}

image.png

AI对话

在Trae中直接对AI说：

使用mcp提取 juejin.cn/ 的图标到本文件夹，展示Logo分析结果，中文回答

image.png

可以看到AI成功的去调用logo-mcp/extract_logo，这个就是我的mcp，在返回的结果中有一个链接，可以直接点击。

图标效果地址：lf-web-assets.juejin.cn/obj/juejin-…

图标效果示例：

image.png 如果你也感兴趣可以来试试。

未来展望

未来，我们计划进一步优化算法，提高思维导图的生成质量和速度。具体来说，我们将研究更先进的自然语言处理（NLP）技术，以便更好地理解输入文本并生成更符合用户需求的思维导图。此外，我们还将探索与其他工具和服务的集成，以提供更全面的解决方案。例如，我们可以将该工具与项目管理软件（如Jira或Trello）集成，从而帮助用户更直观地管理项目进度和任务分配。我们还计划开发更多的功能，如支持多语言输入、提供更多样化的图表样式和模板，以及增加交互式元素，使用户能够更灵活地编辑和定制生成的思维导图。

除了技术层面的改进，还希望扩大用户群体，让更多的人能够受益于这一工具。为此，我们将开展一系列的推广活动，包括在线研讨会、教程视频和用户案例分享，以吸引更多用户使用@lucianaib/logo-mcp。我们还计划建立一个活跃的社区，让用户可以交流经验、提出建议，并共同推动工具的发展和完善。在未来，我们希望能够与学术界和企业界合作，将@lucianaib/logo-mcp应用于教育、科研和商业等多个领域，使其成为人们日常工作中不可或缺的工具。

总之，我们对未来充满期待，并将继续努力，不断完善@lucianaib/logo-mcp，为用户提供更好的体验和服务。我们相信，通过不断的技术创新和用户反馈，@lucianaib/logo-mcp将成为一个强大而实用的工具，帮助用户更高效地组织和展示信息。

总结

展望未来，这套工具还有巨大的发展潜力。我计划从三个方面进行优化：首先是算法升级，引入更先进的NLP技术提升理解能力；其次是功能扩展，比如支持多语言、增加模板库和交互编辑；最后是生态建设，推动与主流协作平台(Jira、Trello等)的集成。更重要的是，我想建立一个用户社区，收集反馈、分享案例，让这个工具能帮助更多人提升工作效率。

这次创新实践让我深刻体会到AI工具的无限可能。通过将MCP协议、Node.js开发和AI能力有机结合，我们确实可以打造出极具价值的实用工具。如果你也是技术爱好者，不妨尝试这个工具，相信它一定能为你的思维整理和知识管理带来全新体验。期待听到大家的反馈，让我们一起见证技术的变革力量！

嗨，我是LucianaiB。如果你觉得我的分享有价值，不妨通过以下方式表达你的支持：👍 点赞来表达你的喜爱，📁 关注以获取我的最新消息，💬 评论与我交流你的见解。我会继续努力，为你带来更多精彩和实用的内容。

点击这里👉LucianaiB ，获取最新动态，⚡️ 让信息传递更加迅速。

avatar
文章
阅读
粉丝