zigzag (Antonio476587)

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

🌍 平台支持

平台特定注意事项

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. 搜索上的现有问题
3. 创建包含详细信息的新问题

包裹信息

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

______________________________________________________________________

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