关键词

Mastergo集成设计自动化AI设计工具插件开发UI自动化

使用说明

项目简介

本项目是一个基于 Model Context Protocol (MCP) 的服务器实现，旨在作为 AI 助手（如 Cursor）与 Mastergo 设计工具之间的桥梁。它允许 AI 助手通过标准化的 MCP 协议与 Mastergo 进行交互，执行读取设计信息、创建和修改设计元素等任务。

该项目包含三个主要部分：

  1. MCP 服务器 ('src/talk_to_msg_mcp/server.ts'): 运行在用户本地，负责接收来自 AI 客户端（如 Cursor）的 MCP 请求，并将这些请求转换为通过 WebSocket 发送给 Mastergo 插件的命令。同时接收插件的执行结果并通过 MCP 协议返回给客户端。
  2. WebSocket 服务器 ('src/socket.ts'): 一个简单的 WebSocket 服务，用于在 MCP 服务器和 Mastergo 插件之间转发消息。
  3. Mastergo 插件 ('src/cursor_mcp_plugin/'): 运行在 Mastergo 环境内，通过 Mastergo 的插件 API 执行 MCP 服务器发送来的命令，并将结果返回。

主要功能点

该 MCP 服务器提供了一系列工具，使 AI 能够：

  • 获取设计信息: 查看当前文档、选中的节点以及特定节点的详细信息。
  • 创建设计元素: 创建矩形、椭圆、框架、文本等基本图形元素。
  • 修改节点属性: 设置节点的填充色、描边颜色及粗细、位置、尺寸、圆角、文本内容等。
  • 管理组件和样式: 获取本地或团队组件/样式信息，导入组件/样式，创建组件实例，以及管理组件属性和变体。
  • 操作节点树: 在父节点中添加或插入子节点，查找满足条件的节点（所有、第一个、直接子节点），获取节点的直接子级列表。
  • 设置布局: 配置框架的自动布局模式及相关属性。
  • 导出: 将节点导出为图像文件。
  • 连接管理: 加入特定的频道以与 Mastergo 插件建立通信会话。

安装步骤

  1. 安装 Bun: 这是一个快速的 JavaScript 运行时。如果未安装，请运行： 
    curl -fsSL https://bun.sh/install | bash
  2. 克隆仓库: 将本项目代码下载到本地。
  3. 安装依赖: 在项目根目录运行 'bun install'。
  4. 运行设置脚本: 运行 'bun setup'。此脚本可能会尝试自动配置 Cursor 的 MCP 设置，但手动配置更可靠。
  5. 启动 WebSocket 服务器: 在项目根目录运行 'bun start'。这会启动一个在端口 9509 监听的 WebSocket 服务器。
  6. 安装 Mastergo 插件:
    • 打开 Mastergo 客户端。
    • 进入“插件” > “开发” > “新建插件”。
    • 选择“链接现有插件”。
    • 选择本项目目录下 'src/cursor_mcp_plugin/manifest.json' 文件。
    • 插件将出现在 Mastergo 的开发插件列表中。

服务器配置（用于 MCP 客户端，如 Cursor）

要让支持 MCP 的 AI 客户端连接到此服务器，需要在客户端的配置中添加服务器信息。以 Cursor 为例，通常在 '~/.cursor/mcp.json' 文件中添加一个服务器条目。请根据您的实际安装路径调整配置：

  • 服务器名称 (server name): 'TalkToMastergo' (在 MCP 客户端中用于引用此服务器的名称)
  • 命令 (command): 'bun' (用于启动服务器的可执行文件)
  • 参数 (args): 指向 MCP 服务器主文件的路径，例如 '["/path/to/your/talk-to-msg/src/talk_to_msg_mcp/server.ts"]' (请将 '/path/to/your/talk-to-msg/' 替换为您实际克隆项目的路径)。

请查阅您的 MCP 客户端文档以了解具体的配置方法。

基本使用方法

  1. 启动 WebSocket 服务器: 在项目根目录运行 'bun start'。
  2. 启动 MCP 服务器: 您的 MCP 客户端（如 Cursor）会根据配置自动启动此服务器。
  3. 在 Mastergo 中运行插件: 打开 Mastergo，从开发插件列表中找到并运行 "Cursor MCP Plugin"。
  4. 连接 MCP 服务器与 Mastergo 插件: 在您的 AI 客户端中使用 'join_channel' 工具，并提供一个频道名称（例如，您的用户名或项目名）。MCP 服务器会通过 WebSocket 连接到 Mastergo 插件并加入指定的频道，建立通信会话。
  5. 通过 AI 客户端使用工具: 一旦连接建立，您就可以在 AI 客户端中通过自然语言或工具调用来操作 Mastergo，例如让 AI 调用 'create_rectangle' 工具创建一个矩形，或调用 'get_document_info' 获取文档信息。

信息

分类

桌面与硬件

访问项目