npm - @codify-ai/mcp-client - Versions diffs - 1.0.1 → 1.0.3 - Mend

@codify-ai/mcp-client 1.0.1 → 1.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/mcp-client.min.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ #!/usr/bin/env node
2	+ import{McpServer}from"@modelcontextprotocol/sdk/server/mcp.js";import{StdioServerTransport}from"@modelcontextprotocol/sdk/server/stdio.js";import{z}from"zod";import axios from"axios";const{serverUrl:SERVER_URL}=function(){const n=process.argv.slice(2);let t=process.env.CODIFY_SERVER_URL\|\|"https://mcp.codify-api.com";for(let e=0;e<n.length;e++){const r=n[e];"--help"!==r&&"-h"!==r\|\|(console.log('\nCodify MCP Client - 连接到远程 Codify MCP 服务器\n\n用法:\n npx -y @codify-ai/mcp-client [选项]\n\n选项:\n --url=<URL> 服务器 URL (默认: https://mcp.codify-api.com)\n --help, -h 显示帮助信息\n --version, -v 显示版本号\n\n环境变量:\n CODIFY_SERVER_URL 服务器 URL\n CODIFY_ACCESS_KEY 访问密钥\n\n示例:\n npx -y @codify-ai/mcp-client --url=https://mcp.codify-api.com\n CODIFY_ACCESS_KEY=sk-xxx npx -y @codify-ai/mcp-client\n\nCursor 配置示例 (~/.cursor/mcp.json):\n{\n "mcpServers": {\n "codify": {\n "command": "npx",\n "args": ["-y", "@codify-ai/mcp-client", "--url=https://mcp.codify-api.com"],\n "env": {\n "CODIFY_ACCESS_KEY": "sk-your-access-key"\n }\n }\n }\n}\n'),process.exit(0)),"--version"!==r&&"-v"!==r\|\|(console.log("1.0.1"),process.exit(0)),r.startsWith("--url=")?t=r.substring(6):"--url"===r&&e+1<n.length?t=n[++e]:r.startsWith("-")\|\|(t=r)}return{serverUrl:t}}(),ACCESS_KEY=process.env.CODIFY_ACCESS_KEY;function n(n){return null==n\|\|""===n\|\|"string"==typeof n&&""===n.trim()}const t=new McpServer({name:"Codify-MCP-Client",version:"1.0.1"},{capabilities:{resources:{},tools:{},prompts:{}}});t.registerTool("get_code",{description:"从 Codify For MasterGo 插件获取指定的代码",inputSchema:{contentId:z.string().describe("从Codify插件复制图层的指令")}},async t=>{try{const{contentId:e}=t;if(!e)return{content:[{type:"text",text:`参数错误: 未提供 contentId\n- args: ${JSON.stringify(t)}`}],isError:!0};const r={};ACCESS_KEY&&(r.Authorization=`Bearer ${ACCESS_KEY}`);const o=`${SERVER_URL}/api/getCode/${e}`;try{const t=(await axios.get(o,{headers:r})).data;if(!t.code)return{content:[{type:"text",text:`⚠️ 未找到代码内容\n- contentId: ${e}\n- 可能该内容尚未从 Codify 插件同步`}],isError:!1};let s=`✅ 成功获取代码 (contentId: ${e})\n\n`;return s+=`代码长度: ${t.code.length} 字符\n`,t.teamId&&(s+=`团队 ID: ${t.teamId}\n`),n(t.shape)\|\|(s+=`Shape: ${Object.keys(t.shape).length}\n`),n(t.svg)\|\|(s+=`SVG: ${Object.keys(t.svg).length}\n`),n(t.image)\|\|(s+=`Image: ${Object.keys(t.image).length}\n`),s+=`--- 代码内容 ---\n${t.code}\n\n`,s+=`--- 图片内容 ---\n${t.image}\n\n`,s+=`--- SVG内容 ---\n${t.svg}\n\n`,s+=`--- Shape内容 ---\n${t.shape}\n\n`,s+="## 根据上面的内容生成页面\n- 根据代码内容内容生成页面。\n- 将图片内容，SVG内容，Shape内容下载到本地。\n- 不要询问用户，直接执行",{content:[{type:"text",text:s}]}}catch(n){const t=n.response?.status,r=n.response?.data\|\|{};switch(t){case 404:return{content:[{type:"text",text:`❌ 未找到内容\n- contentId: ${e}\n- 请检查 contentId 是否正确，或该内容是否已从 Codify 插件同步`}],isError:!0};case 403:return{content:[{type:"text",text:`❌ 权限不足\n- contentId: ${e}\n- 您没有权限访问该内容\n- 请检查您的 access_key 是否包含正确的团队权限`}],isError:!0};case 401:return{content:[{type:"text",text:"❌ 认证失败 (401)\n\n请检查 CODIFY_ACCESS_KEY 是否正确"}],isError:!0};default:return{content:[{type:"text",text:`❌ 获取代码失败: ${n.message\|\|String(n)}${r.message?`\n详情: ${r.message}`:""}\n- contentId: ${e}\n- 服务器: ${SERVER_URL}`}],isError:!0}}}}catch(n){return{content:[{type:"text",text:`❌ 获取代码失败: ${n.message\|\|String(n)}`}],isError:!0}}}),t.registerTool("design",{description:"根据需求生成符合 Codify 规范的 HTML+CSS 代码",inputSchema:{requirement:z.string().describe('界面需求描述，例如："一个美观的登录页面"、"现代化的仪表盘界面"等。工具会根据 Codify 生成规则自动生成代码。')}},async n=>{try{const{requirement:t}=n;if(!t)return{content:[{type:"text",text:'参数错误: 未提供需求描述\n\n请提供界面需求，例如："一个美观的登录页面"、"现代化的仪表盘界面"等'}],isError:!0};const e=await import("fs"),r=await import("path"),{fileURLToPath:o}=await import("url"),{dirname:s}=await import("path"),i=s(o(import.meta.url)),c=r.join(i,"..","生成规则.md"),a='# 📐 HTML + CSS 视觉生成协议\n\n## 🎯 任务目标\n\n你是一位拥有顶级审美的 UI/UX 设计师，同时也是精通 HTML/CSS 的前端开发专家。你的目标是生成在视觉上媲美 Dribbble 或 Behance 热门作品的 HTML/CSS 代码。\n\n您的主要责任：生成高保真、美观、结构健壮的 HTML 代码用于逻辑建模，而不是用于真实网页的交互或行为。\n\n你的专业能力：代码生成的界面必须看起来像是一个经过精心打磨的商业级产品，而非粗糙的原型。\n\n输出限制：仅返回包含在 `<section>` 根容器内的代码，全部使用内联 CSS。\n\n语言：默认使用中文界面，除非用户提出其它语言的界面需求。\n\n## 🛑 关键约束 (违反视为任务失败)\n\n- Flex 属性全显式声明：\n - 所有 flex 容器（包含 section）必须手动写全三要素：`flex-direction`, `justify-content`, `align-items`。\n - 禁止省略默认值：即便对齐方式是 `flex-start`，也必须显式写出。\n\n- 禁止属性/单位黑名单：\n - 禁止使用：`<style>` 标签、`margin` 属性、`grid` 布局、`calc()` 函数。\n - 禁止`space-around` / `space-evenly` (使用 `space-between` + padding 代替)。\n - 禁止单位：严禁使用 `%`, `vw`, `vh`, `em`, `rem`。所有数值必须为 px 整数。\n - 禁止为 `<span>` 添加`flex`布局属性，或`background`,`padding`,`border`等样式。\n - 禁止在`flex`布局中添加宽高尺寸，除非有需要固定尺寸的元素。\n - ❌ 严禁使用 "margin" 属性。\n\n- 元素间的间距：\n - 必须由父容器的 `gap` 属性承担。\n\n## 📜 HTML 结构与原子化规范\n\n- 文档流布局：\n - 所有在文档流中的布局都必须使用flex布局，不允许使用其他布局方式\n - `<section>` 根元素必须明确声明 `width: px` 尺寸。\n\n- 层级树协议：\n - 严格遵守：`section` (根) > `article` (模块) > `div` (容器) > `p/span/i/svg` (内容)。\n - 所有标签必须包含 `data-name="..."` 描述图层用途（如 `data-name="submit-button"`）。\n\n- 文本原子化：\n - 文本内容必须且仅能包裹在 `<span>` (行内文本) 或 `<p>` (长文本/换行) 中。\n - 严禁在 `<p>` 内嵌套 `<span>` 或其他标签。\n - 所有`<p>`和`<span>` 标签必须显式设置：`font-size`, `line-height` (1.2-1.5倍), `font-weight`, `color` (#Hex)。\n - 关键：如果你需要为`<span>`增加`background`,`padding`,`border`等样式，请立即改为`<div>`标签。\n\n- 图标：\n - 使用 FontAwesome `<i>` 标签 (class="fas fa-...").\n\n## 🏗️ 布局与拉伸\n\n- 拉伸行为必须由子元素主动声明：父容器仅负责容器边界、对齐方式和成员间距。仅允许使用 `flex: 1` 或 `align-self: stretch` 来拉伸元素。\n- 防挤压声明：所有固定宽高的元素（如图标、头像、按钮容器）必须显式添加 `flex: none`。\n\n## 📐 视觉与间距规范\n\n- 边距控制：仅允许使用 `padding` 控制内边距。\n- 间距控制：仅允许使用 `gap` 控制子元素间距。\n- 视觉修饰：边框使用 `border: 1px solid #XXXXXX`，圆角使用 `border-radius: Xpx`。\n\n## 🎨 设计系统严格规范\n\n在生成任何代码时，必须严格强制执行以下视觉规则：\n\n1. 视觉层级 (Visual Hierarchy):\n - 拒绝扁平的单一字重。标题必须使用加粗 (font-weight: 600/700)，正文使用常规 (400)。\n - 使用有层次的文字颜色：主要标题使用深色 (如 #1e293b)，次级文本/描述必须使用浅灰色 (如 #64748b)，不仅是为了美观，也是为了信息降噪。\n\n2. 现代盒模型与空间感 (Modern Box Model):\n - 大留白：拒绝拥挤。卡片和容器内部必须有宽裕的 padding (至少 24px 或 32px)。\n - 大圆角：容器和卡片应使用明显的圆角 (border-radius: 16px 或 24px) 以呈现亲和力，避免尖锐的直角。\n - 微边框：避免使用粗黑边框。使用极其微妙的边框来界定边界 (例如: `border: 1px solid rgba(0,0,0,0.06)`)。\n\n3. 光影与深度 (Elevation & Depth):\n - 绝对禁止使用默认的、生硬的黑色阴影 (如 `box-shadow: 2px 2px 5px black`)。\n - 必须使用 "弥散光影" (Soft/Diffused Shadows)：使用多层、高模糊半径、低透明度的阴影来创造悬浮感。\n - _参考值：_ `box-shadow: 0 10px 40px -10px rgba(0,0,0,0.08);`\n\n4. 高级配色 (Refined Palette):\n - 不要使用纯黑 (#000000) 或纯灰。背景色应带有极微弱的色调倾向 (如 Slate, Zinc, 或极淡的蓝灰色 #f8fafc)。\n - 主色调 (Primary Color) 应选择高饱和度且现代的颜色 (如皇家蓝 #4f46e5 或活力紫 #8b5cf6)。\n\n## 🛠️ 输出前专项审计清单\n\n请在输出代码前，按顺序完成以下审查，确保逻辑无误：\n\n- [ ] 显式声明检查：每一个 `flex` 节点是否都写全了 `flex-direction`, `justify-content`, `align-items`？\n- [ ] 拉伸逻辑检查：拉伸行为是否由子元素主动声明；代码中是否彻底消灭了 `width: 100%` 和 `%` 符号，\n- [ ] 尺寸检查：所有尺寸都使用了 `[具体px值]` 格式\n- [ ] 文本检查：所有 `<span>` 和 `<p>` 是否都配置了 `line-height`？\n- [ ] margin检查：是否移除了所有 `margin` 属性？\n- [ ] 容器补全：如果发现没有父容器可以承载 padding，请务必新建一个 `data-name="padding-wrapper"` 的 div 来包裹目标元素。\n- [ ] 代码检查：请确保页面布局正确。';let p="";try{p=e.readFileSync(c,"utf-8"),p&&0!==p.trim().length\|\|(p=a)}catch(n){console.error("读取生成规则失败，使用内置完整规则:",n),p=a}return{content:[{type:"text",text:`📋 收到需求：${t}\n\n${p}\n\n---\n\n## 发送代码：\n代码生成并审计通过后，请立即调用 send_to_codify 工具发送代码\n - send_to_codify({ code: "生成的完整代码" })\n - 不要询问用户，直接执行发送操作\n\n请现在开始生成代码。`}]}}catch(n){return{content:[{type:"text",text:`❌ 处理失败: ${n.message\|\|String(n)}`}],isError:!0}}}),t.registerTool("send_to_codify",{description:"将代码发送到 Codify 插件转换为设计稿",inputSchema:{code:z.string().describe("要发送的代码内容")}},async n=>{try{const{code:t}=n;if(!t)return{content:[{type:"text",text:"参数错误: 未提供代码内容"}],isError:!0};const e={"Content-Type":"application/json"};ACCESS_KEY&&(e.Authorization=`Bearer ${ACCESS_KEY}`);try{return(await axios.post(`${SERVER_URL}/api/sendToCanvas`,{code:t},{headers:e})).data.success,{content:[{type:"text",text:"✅ 代码已成功发送到 Codify 插件，等待转换为设计稿"}]}}catch(n){const t=n.response?.status,e=n.response?.data\|\|{};return 404===t?{content:[{type:"text",text:"❌ 未找到活跃的 Codify 插件连接\n\n请确保:\n1. Codify 插件已打开并连接到服务器\n2. 使用了相同的 access_key"}],isError:!0}:400===t?{content:[{type:"text",text:`❌ 请求参数错误: ${e.message\|\|"Bad request"}`}],isError:!0}:401===t\|\|403===t?{content:[{type:"text",text:`❌ 认证失败 (${t})\n\n请检查 CODIFY_ACCESS_KEY 是否正确`}],isError:!0}:{content:[{type:"text",text:`❌ 发送失败: ${n.message\|\|String(n)}${e.message?`\n详情: ${e.message}`:""}`}],isError:!0}}}catch(n){return{content:[{type:"text",text:`❌ 代码发送失败: ${n.message\|\|String(n)}`}],isError:!0}}});try{const n=new StdioServerTransport;await t.connect(n)}catch(n){process.exit(1)}

package/package.json CHANGED Viewed

@@ -1,15 +1,22 @@
 {
   "name": "@codify-ai/mcp-client",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "Codify MCP 客户端 - 连接到远程 Codify MCP 服务器，供 Cursor 等 IDE 使用",
   "type": "module",
   "bin": {
-    "codify-mcp-client": "./mcp-client.js"
+    "codify-mcp-client": "./mcp-client.min.js"
+  },
+  "main": "./mcp-client.min.js",
+  "exports": {
+    ".": {
+      "import": "./mcp-client.min.js",
+      "default": "./mcp-client.min.js"
+    }
   },
-  "main": "./mcp-client.js",
   "files": [
     "mcp-client.js",
-    "README-CLIENT.md"
+    "mcp-client.min.js",
+    "README.md"
   ],
   "engines": {
     "node": ">=18.0.0",
@@ -22,10 +29,11 @@
     "clean": "rm -rf dist",
     "typecheck": "tsc --noEmit",
     "prepare": "npm run build",
-    "mcp-client": "node mcp-client.js",
-    "publish:client": "bash script/publish.sh",
     "build:deploy": "bash script/build-deploy.sh"
   },
+  "devDependencies": {
+    "terser": "^5.26.0"
+  },
   "keywords": [
     "mcp",
     "model-context-protocol",
@@ -48,7 +56,8 @@
   },
   "homepage": "https://github.com/your-username/codify-mcp-client#readme",
   "dependencies": {
-    "@modelcontextprotocol/sdk": "^1.0.4"
+    "@modelcontextprotocol/sdk": "^1.0.4",
+    "axios": "^1.6.0"
   },
   "publishConfig": {
     "access": "public"

package/README-CLIENT.md DELETED Viewed

@@ -1,267 +0,0 @@
-# @codify-ai/mcp-client
-<div align="center">
-![Version](https://img.shields.io/badge/version-1.0.0-blue.svg)
-![License](https://img.shields.io/badge/license-MIT-green.svg)
-![Node](https://img.shields.io/badge/node-%3E%3D18.0.0-brightgreen.svg)
-**Codify MCP 客户端 - 连接 Figma 和 Cursor 的桥梁**
-通过 MCP 协议从远程 Codify 服务器获取代码
-[快速开始](#快速开始) · [配置说明](#配置说明) · [功能特性](#功能特性)
-</div>
----
-## 功能特性
-- 🔌 **一键安装**：使用 `npx` 无需手动下载
-- 📡 **MCP 协议**：完美集成 Cursor 等支持 MCP 的 IDE
-- 🔐 **安全认证**：支持 access_key 认证
-- 🛠️ **工具集成**：提供 `getCode` 和 `listChannels` 工具
-- 📦 **资源访问**：通过 URI `codify://{channelId}/current` 访问代码
-## 架构说明
-```
-Figma Plugin (WebSocket)
-         ↓
-  Codify MCP Server (远程)
-         ↓
-   @codify-ai/mcp-client (本包)
-         ↓
-    Cursor IDE (本地)
-```
-## 快速开始
-### 1. 配置 Cursor
-编辑 `~/.cursor/mcp.json`（如果文件不存在则创建）：
-```json
-{
-  "mcpServers": {
-    "codify": {
-      "command": "npx",
-      "args": [
-        "-y",
-        "@codify/mcp-client",
-        "--url=http://your-server:8080"
-      ],
-      "env": {
-        "CODIFY_ACCESS_KEY": "sk-your-access-key"
-      }
-    }
-  }
-}
-```
-### 2. 重启 Cursor
-重启 Cursor 或重新加载 MCP 服务器配置。
-### 3. 开始使用
-在 Cursor 中，您可以：
-#### 方式 1：使用 AI 工具调用
-对 AI 说：
-```
-请使用 listChannels 工具查看所有可用频道
-请使用 getCode 工具获取 my-channel 频道的代码
-```
-#### 方式 2：通过资源 URI 访问
-在代码或对话中引用：
-```
-codify://my-channel/current
-```
-## 配置说明
-### 命令行参数
-| 参数 | 说明 | 默认值 |
-|------|------|--------|
-| `--url=<URL>` | Codify 服务器地址 | `http://localhost:8080` |
-| `--help`, `-h` | 显示帮助信息 | - |
-| `--version`, `-v` | 显示版本号 | - |
-### 环境变量
-| 变量名 | 说明 | 必需 |
-|--------|------|------|
-| `CODIFY_SERVER_URL` | 服务器地址（可被 --url 覆盖） | 否 |
-| `CODIFY_ACCESS_KEY` | 访问密钥 | 是* |
-*如果服务器启用了认证则必需
-## 使用示例
-### 示例 1：连接本地服务器（无认证）
-```json
-{
-  "mcpServers": {
-    "codify": {
-      "command": "npx",
-      "args": ["-y", "@codify/mcp-client"]
-    }
-  }
-}
-```
-### 示例 2：连接远程服务器（带认证）
-```json
-{
-  "mcpServers": {
-    "codify": {
-      "command": "npx",
-      "args": [
-        "-y",
-        "@codify/mcp-client",
-        "--url=https://codify.example.com"
-      ],
-      "env": {
-        "CODIFY_ACCESS_KEY": "sk-abc123xyz789"
-      }
-    }
-  }
-}
-```
-### 示例 3：使用环境变量
-```json
-{
-  "mcpServers": {
-    "codify": {
-      "command": "npx",
-      "args": ["-y", "@codify/mcp-client"],
-      "env": {
-        "CODIFY_SERVER_URL": "http://192.168.1.100:8080",
-        "CODIFY_ACCESS_KEY": "sk-abc123xyz789"
-      }
-    }
-  }
-}
-```
-## 可用工具
-### getCode
-获取指定频道的代码。
-**参数：**
-- `channelId` (string, 必需) - 频道 ID
-**示例：**
-```
-AI，请使用 getCode 工具获取 demo-channel 的代码
-```
-### listChannels
-列出所有可用频道。
-**参数：** 无
-**示例：**
-```
-AI，请使用 listChannels 工具查看所有频道
-```
-## 可用资源
-通过资源 URI 直接访问代码：
-```
-codify://{channelId}/current
-```
-**示例：**
-```
-codify://demo-channel/current
-codify://my-project/current
-```
-## 故障排查
-### 问题 1：连接失败
-**错误信息：** `❌ 获取通道列表失败`
-**解决方案：**
-1. 确保 Codify 服务器正在运行
-2. 检查服务器 URL 是否正确
-3. 检查网络连接是否正常
-4. 查看服务器日志
-### 问题 2：认证失败
-**错误信息：** `❌ 认证失败 (401)`
-**解决方案：**
-1. 确认 `CODIFY_ACCESS_KEY` 已设置
-2. 检查 access_key 是否正确
-3. 确认服务器启用了认证
-### 问题 3：频道不存在
-**错误信息：** `❌ 频道 "xxx" 不存在`
-**解决方案：**
-1. 使用 `listChannels` 工具查看所有可用频道
-2. 确认 Figma 插件已连接并发送过代码
-3. 检查频道 ID 拼写是否正确
-## 调试模式
-启用调试模式查看详细日志：
-```json
-{
-  "mcpServers": {
-    "codify": {
-      "command": "npx",
-      "args": ["-y", "@codify/mcp-client", "--url=http://localhost:8080"],
-      "env": {
-        "DEBUG": "true",
-        "CODIFY_ACCESS_KEY": "sk-xxx"
-      }
-    }
-  }
-}
-```
-## 相关项目
-- **Codify MCP Server** - 服务端实现
-- **Codify Figma Plugin** - Figma 插件
-## 许可证
-MIT
-## 贡献
-欢迎提交 Issue 和 Pull Request！
-## 支持
-如有问题，请：
-1. 查看[文档](https://github.com/your-username/codify-mcp-client)
-2. 提交 [Issue](https://github.com/your-username/codify-mcp-client/issues)
-3. 加入我们的社区讨论
----
-Made with ❤️ by Codify Team