@seed-design/mcp 0.0.6 → 0.0.15

package/bin/socket.mjs

@@ -0,0 +1,155 @@
+#!/usr/bin/env node
+// Store clients by channel
+const channels = new Map();
+function handleConnection(ws) {
+    // Don't add to clients immediately - wait for channel join
+    console.log("New client connected");
+    // Send welcome message to the new client
+    ws.send(JSON.stringify({
+        type: "system",
+        message: "Please join a channel to start chatting"
+    }));
+    ws.close = ()=>{
+        console.log("Client disconnected");
+        // Remove client from their channel
+        channels.forEach((clients, channelName)=>{
+            if (clients.has(ws)) {
+                clients.delete(ws);
+                // Notify other clients in same channel
+                clients.forEach((client)=>{
+                    if (client.readyState === WebSocket.OPEN) {
+                        client.send(JSON.stringify({
+                            type: "system",
+                            message: "A user has left the channel",
+                            channel: channelName
+                        }));
+                    }
+                });
+            }
+        });
+    };
+}
+const server = Bun.serve({
+    port: 3055,
+    // uncomment this to allow connections in windows wsl
+    // hostname: "0.0.0.0",
+    fetch (req, server) {
+        // Handle CORS preflight
+        if (req.method === "OPTIONS") {
+            return new Response(null, {
+                headers: {
+                    "Access-Control-Allow-Origin": "*",
+                    "Access-Control-Allow-Methods": "GET, POST, OPTIONS",
+                    "Access-Control-Allow-Headers": "Content-Type, Authorization"
+                }
+            });
+        }
+        // Handle WebSocket upgrade
+        const success = server.upgrade(req, {
+            headers: {
+                "Access-Control-Allow-Origin": "*"
+            }
+        });
+        if (success) {
+            return; // Upgraded to WebSocket
+        }
+        // Return response for non-WebSocket requests
+        return new Response("WebSocket server running", {
+            headers: {
+                "Access-Control-Allow-Origin": "*"
+            }
+        });
+    },
+    websocket: {
+        open: handleConnection,
+        message (ws, message) {
+            try {
+                console.log("Received message from client:", message);
+                const data = JSON.parse(message);
+                if (data.type === "join") {
+                    const channelName = data.channel;
+                    if (!channelName || typeof channelName !== "string") {
+                        ws.send(JSON.stringify({
+                            type: "error",
+                            message: "Channel name is required"
+                        }));
+                        return;
+                    }
+                    // Create channel if it doesn't exist
+                    if (!channels.has(channelName)) {
+                        channels.set(channelName, new Set());
+                    }
+                    // Add client to channel
+                    const channelClients = channels.get(channelName);
+                    channelClients.add(ws);
+                    // Notify client they joined successfully
+                    ws.send(JSON.stringify({
+                        type: "system",
+                        message: `Joined channel: ${channelName}`,
+                        channel: channelName
+                    }));
+                    console.log("Sending message to client:", data.id);
+                    ws.send(JSON.stringify({
+                        type: "system",
+                        message: {
+                            id: data.id,
+                            result: "Connected to channel: " + channelName
+                        },
+                        channel: channelName
+                    }));
+                    // Notify other clients in channel
+                    channelClients.forEach((client)=>{
+                        if (client !== ws && client.readyState === WebSocket.OPEN) {
+                            client.send(JSON.stringify({
+                                type: "system",
+                                message: "A new user has joined the channel",
+                                channel: channelName
+                            }));
+                        }
+                    });
+                    return;
+                }
+                // Handle regular messages
+                if (data.type === "message") {
+                    const channelName = data.channel;
+                    if (!channelName || typeof channelName !== "string") {
+                        ws.send(JSON.stringify({
+                            type: "error",
+                            message: "Channel name is required"
+                        }));
+                        return;
+                    }
+                    const channelClients = channels.get(channelName);
+                    if (!channelClients || !channelClients.has(ws)) {
+                        ws.send(JSON.stringify({
+                            type: "error",
+                            message: "You must join the channel first"
+                        }));
+                        return;
+                    }
+                    // Broadcast to all clients in the channel
+                    channelClients.forEach((client)=>{
+                        if (client.readyState === WebSocket.OPEN) {
+                            console.log("Broadcasting message to client:", data.message);
+                            client.send(JSON.stringify({
+                                type: "broadcast",
+                                message: data.message,
+                                sender: client === ws ? "You" : "User",
+                                channel: channelName
+                            }));
+                        }
+                    });
+                }
+            } catch (err) {
+                console.error("Error handling message:", err);
+            }
+        },
+        close (ws) {
+            // Remove client from their channel
+            channels.forEach((clients)=>{
+                clients.delete(ws);
+            });
+        }
+    }
+});
+console.log(`WebSocket server running on port ${server.port}`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/mcp",
-  "version": "0.0.6",
+  "version": "0.0.15",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
@@ -14,19 +14,24 @@
     "bin",
     "src"
   ],
-  "bin": "./bin/index.mjs",
+  "bin": {
+    "main": "./bin/main.mjs",
+    "socket": "./bin/socket.mjs"
+  },
   "scripts": {
     "clean": "rm -rf lib",
+    "dev": "bun run --watch ./src/bin/socket.ts",
     "build": "bunchee",
     "lint:publish": "bun publint"
   },
   "dependencies": {
     "@modelcontextprotocol/sdk": "^1.7.0",
-    "@seed-design/figma": "0.0.6",
+    "@seed-design/figma": "0.0.15",
     "express": "^4.21.2",
     "yargs": "^17.7.2"
   },
   "devDependencies": {
+    "@types/bun": "^1.2.8",
     "@types/yargs": "^17.0.33",
     "typescript": "^5.4.5"
   },

package/src/bin/main.ts

@@ -0,0 +1,52 @@
+#!/usr/bin/env node
+
+import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
+import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
+import { logger } from "../logger";
+import { createFigmaWebSocketClient } from "../websocket";
+import { registerTools } from "../tools";
+import { registerPrompts } from "../prompts";
+
+// Add command line argument parsing
+const args = process.argv.slice(2);
+const serverArg = args.find((arg) => arg.startsWith("--server="));
+const serverUrl = serverArg ? serverArg.split("=")[1] : "localhost";
+
+// Create Figma WebSocket client
+const figmaClient = createFigmaWebSocketClient(serverUrl);
+
+// Create MCP server
+const server = new McpServer({
+  name: "SEED Design MCP",
+  version: "1.0.0",
+});
+
+// Register tools and prompts
+registerTools(server, figmaClient);
+registerPrompts(server);
+
+// Start the server
+async function main() {
+  try {
+    // Try to connect to Figma socket server
+    figmaClient.connectToFigma();
+  } catch (error) {
+    logger.warn(
+      `Could not connect to Figma initially: ${error instanceof Error ? error.message : String(error)}`,
+    );
+    logger.warn("Will try to connect when the first command is sent");
+  }
+
+  // Start the MCP server with stdio transport
+  const transport = new StdioServerTransport();
+  await server.connect(transport);
+  logger.info("FigmaMCP server running on stdio");
+}
+
+// Run the server
+main().catch((error) => {
+  logger.error(
+    `Error starting FigmaMCP server: ${error instanceof Error ? error.message : String(error)}`,
+  );
+  process.exit(1);
+});

package/src/bin/socket.ts

@@ -0,0 +1,194 @@
+import type { Server, ServerWebSocket } from "bun";
+
+// Store clients by channel
+const channels = new Map<string, Set<ServerWebSocket<any>>>();
+
+function handleConnection(ws: ServerWebSocket<any>) {
+  // Don't add to clients immediately - wait for channel join
+  console.log("New client connected");
+
+  // Send welcome message to the new client
+  ws.send(
+    JSON.stringify({
+      type: "system",
+      message: "Please join a channel to start chatting",
+    }),
+  );
+
+  ws.close = () => {
+    console.log("Client disconnected");
+
+    // Remove client from their channel
+    channels.forEach((clients, channelName) => {
+      if (clients.has(ws)) {
+        clients.delete(ws);
+
+        // Notify other clients in same channel
+        clients.forEach((client) => {
+          if (client.readyState === WebSocket.OPEN) {
+            client.send(
+              JSON.stringify({
+                type: "system",
+                message: "A user has left the channel",
+                channel: channelName,
+              }),
+            );
+          }
+        });
+      }
+    });
+  };
+}
+
+const server = Bun.serve({
+  port: 3055,
+  // uncomment this to allow connections in windows wsl
+  // hostname: "0.0.0.0",
+  fetch(req: Request, server: Server) {
+    // Handle CORS preflight
+    if (req.method === "OPTIONS") {
+      return new Response(null, {
+        headers: {
+          "Access-Control-Allow-Origin": "*",
+          "Access-Control-Allow-Methods": "GET, POST, OPTIONS",
+          "Access-Control-Allow-Headers": "Content-Type, Authorization",
+        },
+      });
+    }
+
+    // Handle WebSocket upgrade
+    const success = server.upgrade(req, {
+      headers: {
+        "Access-Control-Allow-Origin": "*",
+      },
+    });
+
+    if (success) {
+      return; // Upgraded to WebSocket
+    }
+
+    // Return response for non-WebSocket requests
+    return new Response("WebSocket server running", {
+      headers: {
+        "Access-Control-Allow-Origin": "*",
+      },
+    });
+  },
+  websocket: {
+    open: handleConnection,
+    message(ws: ServerWebSocket<any>, message: string | Buffer) {
+      try {
+        console.log("Received message from client:", message);
+        const data = JSON.parse(message as string);
+
+        if (data.type === "join") {
+          const channelName = data.channel;
+          if (!channelName || typeof channelName !== "string") {
+            ws.send(
+              JSON.stringify({
+                type: "error",
+                message: "Channel name is required",
+              }),
+            );
+            return;
+          }
+
+          // Create channel if it doesn't exist
+          if (!channels.has(channelName)) {
+            channels.set(channelName, new Set());
+          }
+
+          // Add client to channel
+          const channelClients = channels.get(channelName)!;
+          channelClients.add(ws);
+
+          // Notify client they joined successfully
+          ws.send(
+            JSON.stringify({
+              type: "system",
+              message: `Joined channel: ${channelName}`,
+              channel: channelName,
+            }),
+          );
+
+          console.log("Sending message to client:", data.id);
+
+          ws.send(
+            JSON.stringify({
+              type: "system",
+              message: {
+                id: data.id,
+                result: "Connected to channel: " + channelName,
+              },
+              channel: channelName,
+            }),
+          );
+
+          // Notify other clients in channel
+          channelClients.forEach((client) => {
+            if (client !== ws && client.readyState === WebSocket.OPEN) {
+              client.send(
+                JSON.stringify({
+                  type: "system",
+                  message: "A new user has joined the channel",
+                  channel: channelName,
+                }),
+              );
+            }
+          });
+          return;
+        }
+
+        // Handle regular messages
+        if (data.type === "message") {
+          const channelName = data.channel;
+          if (!channelName || typeof channelName !== "string") {
+            ws.send(
+              JSON.stringify({
+                type: "error",
+                message: "Channel name is required",
+              }),
+            );
+            return;
+          }
+
+          const channelClients = channels.get(channelName);
+          if (!channelClients || !channelClients.has(ws)) {
+            ws.send(
+              JSON.stringify({
+                type: "error",
+                message: "You must join the channel first",
+              }),
+            );
+            return;
+          }
+
+          // Broadcast to all clients in the channel
+          channelClients.forEach((client) => {
+            if (client.readyState === WebSocket.OPEN) {
+              console.log("Broadcasting message to client:", data.message);
+              client.send(
+                JSON.stringify({
+                  type: "broadcast",
+                  message: data.message,
+                  sender: client === ws ? "You" : "User",
+                  channel: channelName,
+                }),
+              );
+            }
+          });
+        }
+      } catch (err) {
+        console.error("Error handling message:", err);
+      }
+    },
+    close(ws: ServerWebSocket<any>) {
+      // Remove client from their channel
+      channels.forEach((clients) => {
+        clients.delete(ws);
+      });
+    },
+  },
+});
+
+console.log(`WebSocket server running on port ${server.port}`);

package/src/logger.ts

@@ -1,43 +1,41 @@
 /**
- * Centralized logger module for the Figma MCP Server
+ * Custom logging module that writes to stderr instead of stdout
+ * to avoid being captured in MCP protocol communication
  */
-export interface Logger {
-  log(...args: any[]): void;
-  error(...args: any[]): void;
-}
 
-/**
- * Default logger implementation that does nothing
- */
-export const NoOpLogger: Logger = {
-  log: () => {},
-  error: () => {},
-};
+export const logger = {
+  /**
+   * Log an informational message
+   */
+  info: (message: string) => process.stderr.write(`[INFO] ${message}\n`),
 
-/**
- * Logger that writes to the console
- */
-export const ConsoleLogger: Logger = {
-  log: console.log,
-  error: console.error,
+  /**
+   * Log a debug message
+   */
+  debug: (message: string) => process.stderr.write(`[DEBUG] ${message}\n`),
+
+  /**
+   * Log a warning message
+   */
+  warn: (message: string) => process.stderr.write(`[WARN] ${message}\n`),
+
+  /**
+   * Log an error message
+   */
+  error: (message: string) => process.stderr.write(`[ERROR] ${message}\n`),
+
+  /**
+   * Log a general message
+   */
+  log: (message: string) => process.stderr.write(`[LOG] ${message}\n`),
 };
 
 /**
- * Creates a logger that sends messages to an MCP server
+ * Format an error for logging
  */
-export function createMcpLogger(sendLoggingMessage: (message: any) => void): Logger {
-  return {
-    log: (...args: any[]) => {
-      sendLoggingMessage({
-        level: "info",
-        data: args,
-      });
-    },
-    error: (...args: any[]) => {
-      sendLoggingMessage({
-        level: "error",
-        data: args,
-      });
-    },
-  };
+export function formatError(error: unknown): string {
+  if (error instanceof Error) {
+    return error.message;
+  }
+  return String(error);
 }

package/src/prompts.ts

@@ -0,0 +1,27 @@
+import type { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
+
+export function registerPrompts(server: McpServer): void {
+  server.prompt("read_design_strategy", "Best practices for reading Figma designs", (_extra) => {
+    return {
+      messages: [
+        {
+          role: "assistant",
+          content: {
+            type: "text",
+            text: `When reading Figma designs, follow these best practices:
+  
+  1. Start with selection:
+     - First use get_selection() to understand the current selection
+     - If no selection ask user to select single or multiple nodes
+  
+  2. Get node infos of the selected nodes:
+     - Use get_nodes_info() to get the information of the selected nodes
+     - If no selection ask user to select single or multiple nodes
+  `,
+          },
+        },
+      ],
+      description: "Best practices for reading Figma designs",
+    };
+  });
+}

package/src/responses.ts

@@ -0,0 +1,90 @@
+import { formatError } from "./logger";
+
+/**
+ * Helper type for a tool response content item
+ */
+export type ContentItem =
+  | { type: "text"; text: string }
+  | { type: "image"; data: string; mimeType: string };
+
+/**
+ * Helper type for a tool response
+ */
+export type ToolResponse = {
+  content: ContentItem[];
+};
+
+/**
+ * Format an object response
+ */
+export function formatObjectResponse(result: unknown): ToolResponse {
+  return {
+    content: [
+      {
+        type: "text",
+        text: JSON.stringify(result),
+      },
+    ],
+  };
+}
+
+/**
+ * Format a text response
+ */
+export function formatTextResponse(text: string): ToolResponse {
+  return {
+    content: [
+      {
+        type: "text",
+        text,
+      },
+    ],
+  };
+}
+
+/**
+ * Format an image response
+ */
+export function formatImageResponse(imageData: string, mimeType = "image/png"): ToolResponse {
+  return {
+    content: [
+      {
+        type: "image",
+        data: imageData,
+        mimeType,
+      },
+    ],
+  };
+}
+
+/**
+ * Format an error response
+ */
+export function formatErrorResponse(toolName: string, error: unknown): ToolResponse {
+  return {
+    content: [
+      {
+        type: "text",
+        text: `Error in ${toolName}: ${formatError(error)}`,
+      },
+    ],
+  };
+}
+
+/**
+ * Format a progress response with initial message
+ */
+export function formatProgressResponse(initialMessage: string, result: unknown): ToolResponse {
+  return {
+    content: [
+      {
+        type: "text",
+        text: initialMessage,
+      },
+      {
+        type: "text",
+        text: typeof result === "string" ? result : JSON.stringify(result),
+      },
+    ],
+  };
+}