使用说明内容(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 请求,服务端返回相应的结果或错误信息,支持以扩展插件的方式获取自定义的输出(如自定义插件对名称/输出的变换)。
- 如需进行自定义流程,可以通过插件拓展变换逻辑,服务端会处理来自插件的输出并将结果返回给客户端。
信息
分类
开发者工具