使用说明内容(Markdown格式)

  • 项目简介

    • 该仓库实现了一个 MCP 服务器端,专注于在 TemPad Dev 的 Figma 插件环境中向外部的 MCP 客户端提供标准化的上下文服务。服务器通过 JSON-RPC 处理来自客户端的请求,能够读取资源、执行工具、并提供代码生成相关的输出以支持 LLM 的推理与协作。并且集成了资产上传、向外部工具暴露能力、以及对代码渲染/生成的支持。
  • 主要功能点

    • MCP 协议核心能力:实现了对 MCP 请求的处理、响应以及工具调用的通知机制,按 JSON-RPC 规范完成通信。
    • 资源与资产管理:提供资源读取与资产上传的能力,支持将二进制数据(如图片/矢量图)上传并通过 resourceUri 暴露。
    • 工具注册与执行:提供工具注册、调用及返回结果的完整流程,确保 LLM 客户端可以调用外部功能并获取结果。
    • 代码/结构/截图等输出:实现 get_code、get_structure、get_screenshot、get_token_defs 等 MCP 操作,支持将当前 Figma 选择导出为高保真代码、结构树、截图等。
    • 会话与连接管理:包括连接状态、多端同步、自动重连等机制,确保 MCP 客户端能够稳定通信。
    • 多传输协议支持:设计了 stdio、WebSocket、SSE 等传输方案,适配不同环境的 MCP 客户端。
    • 与 TemPad Figma 插件集成:服务器端实现与 TemPad Figma 插件紧密集成,能够在插件上下文中提供实时的 MCP 服务。
  • 安装与运行步骤

    • 环境要求:Node.js 18 及以上、TemPad Dev 插件/环境处于可运行状态。
    • 启用 MCP 服务器
      • 在 TemPad Dev 的首选项中打开“Preferences → MCP server”,并启用“Enable MCP server”。
    • 与客户端连接的两种方式
      • 快速连接:在 MCP 客户端中选择 TemPad Dev 的服务器进行连接(通常通过简单的 UI 操作即可建立连接)。
      • 手动配置(stdio 传输,适用于 CLI 客户端):在 MCP 客户端的配置中添加如下服务器信息(注意该信息仅用于客户端配置示例,不需要你在这里执行代码):
        • 服务器名称:TemPad Dev
        • command: npx
        • args: ["-y", "@tempad-dev/mcp@latest"]
    • 连接状态
      • Unavailable:本地 MCP 服务器未配置或未运行。
      • Inactive:已连接但当前标签页未处于活动状态(需要切换到对应标签页以启用)。
      • Active:MCP 服务器正在运行并可响应工具调用。
  • 服务器配置(供 MCP 客户端参考) 说明:以下配置用于 MCP 客户端注册 TemPad Dev 服务器。客户端不需要直接执行此配置,仅用于理解服务器的连接参数。 { "mcpServers": { "TemPad Dev": { "command": "npx", "args": ["-y", "@tempad-dev/mcp@latest"] }

    }, "说明": "TemPad Dev 服务器的启动命令与参数,使用标准输出/输入或其他传输方案进行通信。" }

  • 基本使用方法

    • 启动后,确保 TemPad Dev 的 MCP 服务处于可用状态并在 MCP 客户端中连接成功。
    • 客户端可以通过 MCP 请求获取代码(get_code)、结构(get_structure)、截图(get_screenshot)以及令牌定义(get_token_defs)等能力。
    • 客户端发送 JSON-RPC 请求,服务端返回相应的结果或错误信息,支持以扩展插件的方式获取自定义的输出(如自定义插件对名称/输出的变换)。
    • 如需进行自定义流程,可以通过插件拓展变换逻辑,服务端会处理来自插件的输出并将结果返回给客户端。

信息

分类

开发者工具