with-figma 0.1.4 → 0.1.6

package/bin/with-figma.js

@@ -24,6 +24,9 @@ if (command === "init") {
   mcpJson.servers["with-figma"] = {
     command: "npx",
     args: ["-y", "with-figma", "serve"],
+    env: {
+      OPENAI_API_KEY: "${env:OPENAI_API_KEY}",
+    },
   };
   fs.writeFileSync(mcpJsonPath, JSON.stringify(mcpJson, null, 2) + "\n");
   console.log("✓ .vscode/mcp.json updated");
@@ -41,6 +44,9 @@ if (command === "init") {
   claudeJson.mcpServers["with-figma"] = {
     command: "npx",
     args: ["-y", "with-figma", "serve"],
+    env: {
+      OPENAI_API_KEY: "${env:OPENAI_API_KEY}",
+    },
   };
   fs.writeFileSync(claudePath, JSON.stringify(claudeJson, null, 2) + "\n");
   console.log("✓ .claude/settings.json updated");

package/mcp-server/dist/index.js

@@ -30114,12 +30114,229 @@ var StdioServerTransport = class {
 
 // mcp-server/index.ts
 var import_ws = require("ws");
+
+// mcp-server/agent.ts
+var import_openai = __toESM(require("openai"));
+var TOOLS = [
+  {
+    type: "function",
+    function: {
+      name: "create_frame",
+      description: "Create a new frame (artboard)",
+      parameters: {
+        type: "object",
+        properties: {
+          name: { type: "string" },
+          width: { type: "number", default: 375 },
+          height: { type: "number", default: 812 },
+          x: { type: "number", default: 0 },
+          y: { type: "number", default: 0 }
+        },
+        required: ["name"]
+      }
+    }
+  },
+  {
+    type: "function",
+    function: {
+      name: "create_rectangle",
+      description: "Create a rectangle, optionally inside a parent frame",
+      parameters: {
+        type: "object",
+        properties: {
+          name: { type: "string" },
+          width: { type: "number" },
+          height: { type: "number" },
+          x: { type: "number", default: 0 },
+          y: { type: "number", default: 0 },
+          parentId: { type: "string" },
+          cornerRadius: { type: "number" },
+          fillColor: {
+            type: "object",
+            properties: { r: { type: "number" }, g: { type: "number" }, b: { type: "number" }, a: { type: "number" } }
+          }
+        },
+        required: ["width", "height"]
+      }
+    }
+  },
+  {
+    type: "function",
+    function: {
+      name: "create_text",
+      description: "Create a text element",
+      parameters: {
+        type: "object",
+        properties: {
+          characters: { type: "string" },
+          name: { type: "string" },
+          fontSize: { type: "number", default: 16 },
+          x: { type: "number", default: 0 },
+          y: { type: "number", default: 0 },
+          parentId: { type: "string" },
+          fillColor: {
+            type: "object",
+            properties: { r: { type: "number" }, g: { type: "number" }, b: { type: "number" }, a: { type: "number" } }
+          }
+        },
+        required: ["characters"]
+      }
+    }
+  },
+  {
+    type: "function",
+    function: {
+      name: "modify_node",
+      description: "Modify properties of an existing node",
+      parameters: {
+        type: "object",
+        properties: {
+          nodeId: { type: "string" },
+          properties: { type: "object" }
+        },
+        required: ["nodeId", "properties"]
+      }
+    }
+  },
+  {
+    type: "function",
+    function: {
+      name: "delete_node",
+      description: "Delete a node",
+      parameters: {
+        type: "object",
+        properties: { nodeId: { type: "string" } },
+        required: ["nodeId"]
+      }
+    }
+  },
+  {
+    type: "function",
+    function: {
+      name: "get_node",
+      description: "Get detailed info about a node by ID",
+      parameters: {
+        type: "object",
+        properties: { nodeId: { type: "string" } },
+        required: ["nodeId"]
+      }
+    }
+  }
+];
+async function executeTool(name, args, deps) {
+  try {
+    switch (name) {
+      case "create_frame": {
+        const r = await deps.sendToFigma({ type: "create-frame", ...args });
+        return JSON.stringify(r.node);
+      }
+      case "create_rectangle": {
+        const cmd = { type: "create-rectangle", ...args };
+        if (args.fillColor) {
+          cmd.fills = [{ type: "SOLID", color: args.fillColor }];
+          delete cmd.fillColor;
+        }
+        const r = await deps.sendToFigma(cmd);
+        return JSON.stringify(r.node);
+      }
+      case "create_text": {
+        const cmd = { type: "create-text", ...args };
+        if (args.fillColor) {
+          cmd.fills = [{ type: "SOLID", color: args.fillColor }];
+          delete cmd.fillColor;
+        }
+        const r = await deps.sendToFigma(cmd);
+        return JSON.stringify(r.node);
+      }
+      case "modify_node": {
+        const r = await deps.sendToFigma({ type: "modify-node", nodeId: args.nodeId, properties: args.properties });
+        return JSON.stringify(r.node);
+      }
+      case "delete_node": {
+        const r = await deps.sendToFigma({ type: "delete-node", nodeId: args.nodeId });
+        return `Deleted: ${r.nodeId}`;
+      }
+      case "get_node": {
+        const r = await deps.sendToFigma({ type: "get-node", nodeId: args.nodeId });
+        return JSON.stringify(r.node);
+      }
+      default:
+        return `Unknown tool: ${name}`;
+    }
+  } catch (err) {
+    return `Error: ${err.message}`;
+  }
+}
+var SYSTEM_PROMPT = `You are a Figma design agent. You receive messages from a user via a Figma plugin chat.
+You directly manipulate their Figma document using the provided tools.
+
+Guidelines:
+- When creating wireframes: use a Frame as container, Rectangles for sections/buttons/cards, Text for labels
+- Mobile wireframe: 375\xD7812, Desktop: 1440\xD7900
+- Wireframe fills: light gray (r:0.95,g:0.95,b:0.95), text: dark (r:0.2,g:0.2,b:0.2)
+- Respond in the same language as the user
+- Keep responses short \u2014 the chat panel is small
+- When the user has selected elements, use their IDs to modify/inspect them`;
+var conversationHistory = [
+  { role: "system", content: SYSTEM_PROMPT }
+];
+async function handleChatMessage(text, selection, page, deps) {
+  const apiKey = process.env.OPENAI_API_KEY;
+  if (!apiKey) {
+    deps.sendChat("OPENAI_API_KEY \uD658\uACBD\uBCC0\uC218\uAC00 \uC124\uC815\uB418\uC9C0 \uC54A\uC558\uC2B5\uB2C8\uB2E4.");
+    return;
+  }
+  const openai = new import_openai.default({ apiKey });
+  let userContent = text;
+  if (selection.length > 0) {
+    userContent += `
+
+[Selected elements: ${JSON.stringify(selection)}]`;
+  }
+  if (page) {
+    userContent += `
+[Page: ${page.name}]`;
+  }
+  conversationHistory.push({ role: "user", content: userContent });
+  deps.sendChat("\uC791\uC5C5 \uC911...");
+  try {
+    for (let i = 0; i < 20; i++) {
+      const response = await openai.chat.completions.create({
+        model: process.env.OPENAI_MODEL || "gpt-4o",
+        messages: conversationHistory,
+        tools: TOOLS,
+        tool_choice: "auto"
+      });
+      const msg = response.choices[0].message;
+      conversationHistory.push(msg);
+      if (msg.tool_calls && msg.tool_calls.length > 0) {
+        for (const tc of msg.tool_calls) {
+          const args = JSON.parse(tc.function.arguments);
+          console.error(`[agent] ${tc.function.name}(${JSON.stringify(args)})`);
+          const result = await executeTool(tc.function.name, args, deps);
+          conversationHistory.push({ role: "tool", tool_call_id: tc.id, content: result });
+        }
+        continue;
+      }
+      if (msg.content) {
+        deps.sendChat(msg.content);
+      }
+      break;
+    }
+  } catch (err) {
+    console.error("[agent] Error:", err.message);
+    deps.sendChat(`Error: ${err.message}`);
+  }
+}
+
+// mcp-server/index.ts
 var figmaSocket = null;
 var currentSelection = [];
 var currentPage = null;
 var pages = [];
 var pendingRequests = /* @__PURE__ */ new Map();
 var requestCounter = 0;
+var chatQueue = [];
 function genRequestId() {
   return `req_${++requestCounter}_${Date.now()}`;
 }
@@ -30154,12 +30371,20 @@ function handleFigmaMessage(msg) {
     case "chat-message":
       currentSelection = msg.selection || currentSelection;
       currentPage = msg.page || currentPage;
-      if (figmaSocket) {
-        figmaSocket.send(JSON.stringify({
-          type: "chat-response",
-          text: `Received: "${msg.text}". Processing via AI agent...`
-        }));
-      }
+      console.error(`[with-figma] Chat: "${msg.text}"`);
+      handleChatMessage(
+        msg.text,
+        msg.selection || currentSelection,
+        msg.page || currentPage,
+        {
+          sendToFigma,
+          sendChat: (text) => {
+            if (figmaSocket && figmaSocket.readyState === import_ws.WebSocket.OPEN) {
+              figmaSocket.send(JSON.stringify({ type: "chat-response", text }));
+            }
+          }
+        }
+      );
       break;
     // Results from Figma plugin operations
     case "node-data":
@@ -30358,6 +30583,28 @@ server.tool(
     };
   }
 );
+server.tool(
+  "get_chat_messages",
+  "Get pending chat messages from the Figma plugin. Users send design requests via the Figma chat UI. Call this tool to check for new messages, then use other Figma tools to fulfill the requests. After processing, the queue is cleared.",
+  {},
+  async () => {
+    if (chatQueue.length === 0) {
+      return {
+        content: [{ type: "text", text: "No pending messages from Figma." }]
+      };
+    }
+    const messages = [...chatQueue];
+    chatQueue.length = 0;
+    return {
+      content: [
+        {
+          type: "text",
+          text: JSON.stringify(messages, null, 2)
+        }
+      ]
+    };
+  }
+);
 server.tool(
   "send_chat_message",
   "Send a message back to the Figma plugin chat UI to communicate with the user.",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "with-figma",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "description": "MCP server that connects AI agents to Figma via WebSocket",
   "license": "MIT",
   "bin": {
@@ -15,11 +15,12 @@
   ],
   "scripts": {
     "build:plugin": "esbuild figma-plugin/code.ts --bundle --outfile=figma-plugin/dist/code.js --target=es2020",
-    "build:server": "esbuild mcp-server/index.ts --bundle --outfile=mcp-server/dist/index.js --platform=node --target=node18 --format=cjs --external:ws",
+    "build:server": "esbuild mcp-server/index.ts --bundle --outfile=mcp-server/dist/index.js --platform=node --target=node18 --format=cjs --external:ws --external:openai",
     "build": "npm run build:plugin && npm run build:server",
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
+    "openai": "^6.34.0",
     "ws": "^8.18.0"
   },
   "devDependencies": {