@seed-design/mcp 0.0.6 → 0.0.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/mcp",
-  "version": "0.0.6",
+  "version": "0.0.16",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
@@ -12,7 +12,8 @@
   "sideEffects": false,
   "files": [
     "bin",
-    "src"
+    "src",
+    "package.json"
   ],
   "bin": "./bin/index.mjs",
   "scripts": {
@@ -22,11 +23,13 @@
   },
   "dependencies": {
     "@modelcontextprotocol/sdk": "^1.7.0",
-    "@seed-design/figma": "0.0.6",
+    "@seed-design/figma": "0.0.15",
+    "cac": "^6.7.14",
     "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/index.ts

@@ -1,34 +1,238 @@
 #!/usr/bin/env node
 
-import { startServer } from "../index";
-import { ConsoleLogger } from "../logger";
+import { cac } from "cac";
+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 { registerEditingTools, registerTools } from "../tools";
+import { registerPrompts } from "../prompts";
+import { version } from "../../package.json" assert { type: "json" };
+import type { Server, ServerWebSocket } from "bun";
 
-/**
- * Main CLI entry point
- */
-async function main(): Promise<void> {
-  try {
-    // Set environment to indicate CLI mode
-    process.env["NODE_ENV"] = "cli";
+// Initialize CLI
+const cli = cac("@seed-design/mcp");
 
-    // Start server
-    await startServer();
-  } catch (error) {
-    handleStartupError(error);
-    process.exit(1);
-  }
+// Store WebSocket clients by channel
+const channels = new Map<string, Set<ServerWebSocket<any>>>();
+
+function handleWebSocketConnection(ws: ServerWebSocket<any>) {
+  console.log("New client connected");
+
+  ws.send(
+    JSON.stringify({
+      type: "system",
+      message: "Please join a channel to start chatting",
+    }),
+  );
+
+  ws.close = () => {
+    console.log("Client disconnected");
+    channels.forEach((clients, channelName) => {
+      if (clients.has(ws)) {
+        clients.delete(ws);
+        clients.forEach((client) => {
+          if (client.readyState === WebSocket.OPEN) {
+            client.send(
+              JSON.stringify({
+                type: "system",
+                message: "A user has left the channel",
+                channel: channelName,
+              }),
+            );
+          }
+        });
+      }
+    });
+  };
 }
 
-/**
- * Handles and logs startup errors
- */
-function handleStartupError(error: unknown): void {
-  if (error instanceof Error) {
-    ConsoleLogger.error("Failed to start server:", error.message);
-  } else {
-    ConsoleLogger.error("Failed to start server with unknown error:", error);
+async function startWebSocketServer(port: number) {
+  const server = Bun.serve({
+    port,
+    // 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;
+
+      // Return response for non-WebSocket requests
+      return new Response("WebSocket server running", {
+        headers: {
+          "Access-Control-Allow-Origin": "*",
+        },
+      });
+    },
+    websocket: {
+      open: handleWebSocketConnection,
+      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}`);
+  return server;
+}
+
+async function startMcpServer(serverUrl: string, experimental: boolean) {
+  const figmaClient = createFigmaWebSocketClient(serverUrl);
+  const server = new McpServer({
+    name: "SEED Design MCP",
+    version,
+  });
+
+  registerTools(server, figmaClient);
+  if (experimental) {
+    registerEditingTools(server, figmaClient);
   }
+  registerPrompts(server);
+
+  try {
+    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");
+  }
+
+  const transport = new StdioServerTransport();
+  await server.connect(transport);
+  logger.info("FigmaMCP server running on stdio");
 }
 
-// Run the application
-main().catch(handleStartupError);
+// Define CLI commands
+cli
+  .command("", "Start the MCP server")
+  .option("--server <server>", "Server URL", { default: "localhost" })
+  .option("--experimental", "Enable experimental features", { default: false })
+  .action(async (options) => {
+    await startMcpServer(options.server, options.experimental);
+  });
+
+cli
+  .command("socket", "Start the WebSocket server")
+  .option("--port <port>", "Port number", { default: 3055 })
+  .action(async (options) => {
+    await startWebSocketServer(options.port);
+  });
+
+cli.help();
+cli.version(version);
+
+// Parse CLI args
+cli.parse();

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,55 @@
+import type { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
+
+export function registerPrompts(server: McpServer): void {
+  server.prompt(
+    "react_implementation_strategy",
+    "Best practices for implementing React components",
+    (_extra) => {
+      return {
+        messages: [
+          {
+            role: "assistant",
+            content: {
+              type: "text",
+              text: `When implementing React components, 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 node
+  
+  2. Get React code of the selected nodes:
+     - Use get_node_react_code() to get the React code of the selected node
+     - If no selection ask user to select single node
+  `,
+            },
+          },
+        ],
+        description: "Best practices for reading Figma designs",
+      };
+    },
+  );
+
+  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),
+      },
+    ],
+  };
+}