with-figma 0.1.5 → 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,6 +30114,222 @@ 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;
@@ -30155,20 +30371,20 @@ function handleFigmaMessage(msg) {
     case "chat-message":
       currentSelection = msg.selection || currentSelection;
       currentPage = msg.page || currentPage;
-      chatQueue.push({
-        text: msg.text,
-        selection: msg.selection || [],
-        page: msg.page || null,
-        timestamp: (/* @__PURE__ */ new Date()).toISOString()
-      });
-      console.error(`[with-figma] Chat message queued: "${msg.text}"`);
-      if (figmaSocket) {
-        figmaSocket.send(JSON.stringify({
-          type: "chat-response",
-          text: `Queued for AI agent. Tell Codex in VS Code:
-"Check Figma messages and process them"`
-        }));
-      }
+      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":

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "with-figma",
-  "version": "0.1.5",
+  "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": {