AI导哈

AI代理MCP工具箱

一个全面的MCP服务器，为AI代理提供视觉、开发和系统监控能力，适用于AI辅助开发、UI/UX测试和系统监控。

  • by Antonio476587
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 antonio476587/zigzag

使用说明

AI代理MCP工具箱

🚀 一个全面的MCP（模型上下文协议）服务器，为AI代理提供可视化、开发和系统监控功能。

✨ 特性

  • 📸 跨平台截图 -在Linux/MOSC/windows上捕获屏幕、窗口或区域
  • 🔍 UI元素检查 -通过可访问性分析提取UI层次结构
  • ⚡ 性能监控 -实时系统指标和性能分析
  • 👁️ 文件系统监视 -实时监控文件/目录更改
  • 🖱️ 屏幕控制 -AI代理的点击、键入、滚动和键盘自动化
  • 🎯 Claude代码集成 -与Claude Code IDE无缝集成

🎯 为什么这很重要

人工智能代理在使用可视化界面和实时系统监控时通常会面临限制。这个工具箱通过提供以下功能弥合了这一差距：

  • 视觉能力：截取屏幕截图并分析UI元素
  • 开发工具：监控文件更改和系统性能
  • 可访问性审计：检查UI合规性和设计模式
  • 与跨平台支持：适用于Linux、macOS和Windows

非常适合人工智能辅助开发、UI/UX测试、系统监控和可访问性审计。

🚀 快速开始

先决条件

  • Node.js 18+
  • Claude Code（用于AI代理集成）

安装

选项1:NPM安装（推荐）

# Install globally
npm install -g @origindot./zigzag

# The package will be ready to use with Claude Code

选项2：来源

# Clone the repository
git clone https://github.com/Antonio476587/zigzag.git
cd zigzag

# Install dependencies
npm install

# Build the project
npm run build

# Set up platform dependencies
./setup-screen-control.sh  # Linux/macOS

选项3：单线安装器

curl -sSL https://raw.githubusercontent.com/Antonio476587/zigzag/main/ai-agent-mcp-toolbox/install.sh | bash

Claude代码配置

对于NPM安装：

添加到您的 ~/.config/claude/mcp_settings.json:

{
  "mcpServers": {
    "ai-agent-toolbox": {
      "command": "npx",
      "args": ["@origindot./zigzag"],
      "env": {}
    }
  }
}

对于源安装：

{
  "mcpServers": {
    "ai-agent-toolbox": {
      "command": "node",
      "args": ["/path/to/zigzag/dist/index.js"],
      "env": {}
    }
  }
}

🛠️ 可用工具

📸 屏幕截图工具

使用具有跨平台兼容性的系统命令捕获屏幕截图。

克劳德代码中的用法：

  • “截取我的屏幕截图”
  • “捕获当前窗口”
  • “特定区域的屏幕截图”

参数：

  • target：“屏幕”|“窗口”|“区域”
  • format：png | jpg | bmp（默认值：png）
  • window_title：要捕获的窗口标题（用于窗口目标）
  • region: {x, y, width, height} （针对区域目标）

🔍 UI检查工具

分析UI元素层次结构并检查可访问性合规性。

克劳德代码中的用法：

  • “检查浏览器的用户界面”
  • “分析我的应用程序中的可访问性问题”
  • “提取UI元素层次结构”

特征：

  • UI元素树提取
  • 可访问性问题检测
  • 设计模式识别
  • WCAG合规性检查

⚡ 性能监控工具

使用详细的指标和建议监控系统性能。

克劳德代码中的用法：

  • “监视我的应用程序的性能60秒”
  • “检查系统CPU和内存使用情况”
  • “分析性能瓶颈”

韵律学：

  • CPU使用率和趋势
  • 内存消耗
  • GPU利用率（可用时）
  • 网络I/O
  • FPS监控
  • 业绩建议

👁️ 文件监视工具

实时监控文件和目录的更改。

克劳德代码中的用法：

  • “查看我的src文件夹中的JavaScript更改”
  • “监视项目文件的修改”
  • “设置文件监视以进行热重新加载”

特征：

  • 多模式文件观看
  • 事件过滤（添加、更改、删除）
  • 基于持续时间的监测
  • 状态报告

🖱️ 屏幕控制工具

自动化AI代理的鼠标和键盘交互。

克劳德代码中的用法：

  • 点击位置100、200
  • “键入‘Hello World’”
  • “按Ctrl+C”
  • “向下滚动3次”
  • “从100100拖动到200200”

行动：

  • click, double_click, right_click：鼠标点击
  • type：文本输入
  • key：键盘快捷键和特殊键
  • scroll：向任何方向滚动
  • drag：拖放操作
  • move_mouse：鼠标定位

跨平台支持：

  • Linux：用途 xdotool
  • macOS：用途 cliclick
  • 视窗：使用PowerShell自动化

🧪 测试

运行附带的测试以验证功能：

# Test individual tools
npm test

# Manual testing
node dist/index.js

📚 例子

基本屏幕截图

echo '{"jsonrpc":"2.0","id":1,"method":"tools/call","params":{"name":"screenshot","arguments":{"target":"screen"}}}' | node dist/index.js

UI检查

echo '{"jsonrpc":"2.0","id":1,"method":"tools/call","params":{"name":"ui_inspect","arguments":{"target":"browser"}}}' | node dist/index.js

文件监视

echo '{"jsonrpc":"2.0","id":1,"method":"tools/call","params":{"name":"file_watcher","arguments":{"action":"start","path":"/path/to/watch","pattern":"*.js"}}}' | node dist/index.js

🏗️ 建筑

src/
├── index.ts          # MCP server entry point
├── server.ts         # Main server implementation  
├── types/            # TypeScript type definitions
├── tools/            # Individual tool implementations
│   ├── screenshot-system.ts
│   ├── ui-inspect-simple.ts
│   ├── performance-monitor-simple.ts
│   └── file-watcher.ts
└── utils/            # Utility functions

🌍 平台支持

平台 屏幕截图 UI检查 性能 文件监视 屏幕控制
Linux ✅ 已满 ✅ 基础 ✅ 已满 ✅ 已满 ✅ 满
macOS ✅ 已满 ✅ 基础 ✅ 已满 ✅ 已满 ✅ 满
Windows ✅ 已满 ✅ 基础 ✅ 已满 ✅ 已满 ✅ 满

平台特定注意事项

Linux：

  • 屏幕截图：使用系统命令(import, gnome-screenshot, scrot等等）
  • 屏幕控制：需要 xdotool (sudo apt install xdotool)

macOS：

  • 截图：内置 screencapture 命令
  • 屏幕控制：需要 cliclick (brew install cliclick)

窗户：

  • 截图：带系统的PowerShell。绘图
  • 屏幕控制：内置PowerShell自动化

🤝 贡献

欢迎投稿！请随时提交拉取请求、报告错误或建议功能。

开发设置

# Clone and install
git clone https://github.com/Antonio476587/zigzag.git
cd zigzag
npm install

# Install platform dependencies
./setup-screen-control.sh  # Linux/macOS

# Development mode
npm run dev

# Build
npm run build

# Lint
npm run lint

# Test
npm test

📝 许可证

MIT许可证-请参阅 许可证 文件以获取详细信息。

🙏 致谢

  • 建立在 模型上下文协议
  • 受AI代理与视觉界面交互需求的启发
  • 感谢Claude Code团队进行MCP集成

🆘 故障排除

截图不起作用

Linux： 安装所需的屏幕截图工具：

# Ubuntu/Debian
sudo apt-get install imagemagick scrot

# Fedora
sudo dnf install ImageMagick scrot

macOS： 无需额外设置

窗户： 确保PowerShell执行策略允许脚本

性能监控问题

某些指标需要提升权限。如果需要，请以适当的权限运行。

文件监视器没有响应

检查文件权限，并确保目标目录存在且可访问。

📞 支持

有关问题、疑问或功能请求，请：

  1. 检查上面的故障排除部分
  2. 搜索上的现有问题 GitHub
  3. 创建包含详细信息的新问题

包裹信息

  • npm: @origindot./zigzag
  • GitHub: https://github.com/Antonio476587/zigzag
  • 文档: https://github.com/Antonio476587/zigzag#readme

由以下材料制成❤️ 面向人工智能开发社区

相关 MCP