@seed-design/mcp 0.0.6 → 0.0.16

package/src/websocket.ts

@@ -0,0 +1,248 @@
+import { v4 as uuidv4 } from "uuid";
+import WebSocket from "ws";
+import { logger } from "./logger";
+import type { CommandProgressUpdate, FigmaCommand, FigmaResponse } from "./types";
+
+export interface FigmaWebSocketClient {
+  connectToFigma: (port?: number) => void;
+  joinChannel: (channelName: string) => Promise<void>;
+  sendCommandToFigma: (
+    command: FigmaCommand,
+    params?: unknown,
+    timeoutMs?: number,
+  ) => Promise<unknown>;
+}
+
+// Define a more specific type with an index signature to allow any property access
+interface ProgressMessage {
+  message: FigmaResponse | any;
+  type?: string;
+  id?: string;
+  [key: string]: any; // Allow any other properties
+}
+
+export function createFigmaWebSocketClient(serverUrl: string) {
+  const WS_URL = serverUrl === "localhost" ? `ws://${serverUrl}` : `wss://${serverUrl}`;
+
+  // Track which channel each client is in
+  let currentChannel: string | null = null;
+
+  // WebSocket connection and request tracking
+  let ws: WebSocket | null = null;
+  const pendingRequests = new Map<
+    string,
+    {
+      resolve: (value: unknown) => void;
+      reject: (reason: unknown) => void;
+      timeout: ReturnType<typeof setTimeout>;
+      lastActivity: number; // Add timestamp for last activity
+    }
+  >();
+
+  // Update the connectToFigma function
+  function connectToFigma(port = 3055) {
+    // If already connected, do nothing
+    if (ws && ws.readyState === WebSocket.OPEN) {
+      logger.info("Already connected to Figma");
+      return;
+    }
+
+    const wsUrl = serverUrl === "localhost" ? `${WS_URL}:${port}` : WS_URL;
+    logger.info(`Connecting to Figma socket server at ${wsUrl}...`);
+    ws = new WebSocket(wsUrl);
+
+    ws.on("open", () => {
+      logger.info("Connected to Figma socket server");
+      // Reset channel on new connection
+      currentChannel = null;
+    });
+
+    ws.on("message", (data: any) => {
+      try {
+        const json = JSON.parse(data) as ProgressMessage;
+
+        // Handle progress updates
+        if (json.type === "progress_update") {
+          const progressData = json.message.data as CommandProgressUpdate;
+          const requestId = json.id || "";
+
+          if (requestId && pendingRequests.has(requestId)) {
+            const request = pendingRequests.get(requestId)!;
+
+            // Update last activity timestamp
+            request.lastActivity = Date.now();
+
+            // Reset the timeout to prevent timeouts during long-running operations
+            clearTimeout(request.timeout);
+
+            // Create a new timeout
+            request.timeout = setTimeout(() => {
+              if (pendingRequests.has(requestId)) {
+                logger.error(`Request ${requestId} timed out after extended period of inactivity`);
+                pendingRequests.delete(requestId);
+                request.reject(new Error("Request to Figma timed out"));
+              }
+            }, 60000); // 60 second timeout for inactivity
+
+            // Log progress
+            logger.info(
+              `Progress update for ${progressData.commandType}: ${progressData.progress}% - ${progressData.message}`,
+            );
+
+            // For completed updates, we could resolve the request early if desired
+            if (progressData.status === "completed" && progressData.progress === 100) {
+              // Optionally resolve early with partial data
+              // request.resolve(progressData.payload);
+              // pendingRequests.delete(requestId);
+
+              // Instead, just log the completion, wait for final result from Figma
+              logger.info(
+                `Operation ${progressData.commandType} completed, waiting for final result`,
+              );
+            }
+          }
+          return;
+        }
+
+        // Handle regular responses
+        const myResponse = json.message;
+        logger.debug(`Received message: ${JSON.stringify(myResponse)}`);
+        logger.log("myResponse" + JSON.stringify(myResponse));
+
+        // Handle response to a request
+        if (
+          myResponse.id &&
+          pendingRequests.has(myResponse.id) &&
+          (myResponse.result || myResponse.error)
+        ) {
+          const request = pendingRequests.get(myResponse.id)!;
+          clearTimeout(request.timeout);
+
+          if (myResponse.error) {
+            logger.error(`Error from Figma: ${myResponse.error}`);
+            request.reject(new Error(myResponse.error));
+          } else {
+            if (myResponse.result) {
+              request.resolve(myResponse.result);
+            }
+          }
+
+          pendingRequests.delete(myResponse.id);
+        } else {
+          // Handle broadcast messages or events not associated with a request ID
+          logger.info(`Received broadcast message: ${JSON.stringify(myResponse)}`);
+        }
+      } catch (error) {
+        logger.error(
+          `Error parsing message: ${error instanceof Error ? error.message : String(error)}`,
+        );
+      }
+    });
+
+    ws.on("error", (error) => {
+      logger.error(`Socket error: ${error}`);
+    });
+
+    ws.on("close", () => {
+      logger.info("Disconnected from Figma socket server");
+      ws = null;
+
+      // Reject all pending requests
+      for (const [id, request] of pendingRequests.entries()) {
+        clearTimeout(request.timeout);
+        request.reject(new Error("Connection closed"));
+        pendingRequests.delete(id);
+      }
+
+      // Attempt to reconnect
+      logger.info("Attempting to reconnect in 2 seconds...");
+      setTimeout(() => connectToFigma(port), 2000);
+    });
+  }
+
+  // Function to join a channel
+  async function joinChannel(channelName: string): Promise<void> {
+    if (!ws || ws.readyState !== WebSocket.OPEN) {
+      throw new Error("Not connected to Figma");
+    }
+
+    try {
+      await sendCommandToFigma("join", { channel: channelName });
+      currentChannel = channelName;
+      logger.info(`Joined channel: ${channelName}`);
+    } catch (error) {
+      logger.error(
+        `Failed to join channel: ${error instanceof Error ? error.message : String(error)}`,
+      );
+      throw error;
+    }
+  }
+
+  // Function to send commands to Figma
+  function sendCommandToFigma(
+    command: FigmaCommand,
+    params: unknown = {},
+    timeoutMs = 30000,
+  ): Promise<unknown> {
+    return new Promise((resolve, reject) => {
+      // If not connected, try to connect first
+      if (!ws || ws.readyState !== WebSocket.OPEN) {
+        connectToFigma();
+        reject(new Error("Not connected to Figma. Attempting to connect..."));
+        return;
+      }
+
+      // Check if we need a channel for this command
+      const requiresChannel = command !== "join";
+      if (requiresChannel && !currentChannel) {
+        reject(new Error("Must join a channel before sending commands"));
+        return;
+      }
+
+      const id = uuidv4();
+      const request = {
+        id,
+        type: command === "join" ? "join" : "message",
+        ...(command === "join"
+          ? { channel: (params as any).channel }
+          : { channel: currentChannel }),
+        message: {
+          id,
+          command,
+          params: {
+            ...(params as any),
+            commandId: id, // Include the command ID in params
+          },
+        },
+      };
+
+      // Set timeout for request
+      const timeout = setTimeout(() => {
+        if (pendingRequests.has(id)) {
+          pendingRequests.delete(id);
+          logger.error(`Request ${id} to Figma timed out after ${timeoutMs / 1000} seconds`);
+          reject(new Error("Request to Figma timed out"));
+        }
+      }, timeoutMs);
+
+      // Store the promise callbacks to resolve/reject later
+      pendingRequests.set(id, {
+        resolve,
+        reject,
+        timeout,
+        lastActivity: Date.now(),
+      });
+
+      // Send the request
+      logger.info(`Sending command to Figma: ${command}`);
+      logger.debug(`Request details: ${JSON.stringify(request)}`);
+      ws.send(JSON.stringify(request));
+    });
+  }
+
+  return {
+    connectToFigma,
+    joinChannel,
+    sendCommandToFigma,
+  };
+}

package/src/config.ts

@@ -1,166 +0,0 @@
-import yargs from "yargs";
-import { hideBin } from "yargs/helpers";
-import type { Logger } from "./logger";
-import { NoOpLogger } from "./logger";
-
-/**
- * Configuration for the Figma MCP Server
- */
-export interface ServerConfig {
-  figmaApiKey: string;
-  port: number;
-  configSources: {
-    figmaApiKey: ConfigSource;
-    port: ConfigSource;
-  };
-}
-
-/**
- * Source of configuration value
- */
-type ConfigSource = "cli" | "env" | "default";
-
-/**
- * Command line arguments
- */
-interface CliArgs {
-  "figma-api-key"?: string;
-  port?: number;
-}
-
-/**
- * Configuration manager for the Figma MCP Server
- */
-export class ConfigManager {
-  private readonly isStdioMode: boolean;
-  private readonly logger: Logger;
-
-  /**
-   * Creates a new ConfigManager instance
-   */
-  constructor(options: { isStdioMode: boolean; logger?: Logger }) {
-    this.isStdioMode = options.isStdioMode;
-    this.logger = options.logger || NoOpLogger;
-  }
-
-  /**
-   * Gets the server configuration from command line arguments and environment variables
-   */
-  getServerConfig(): ServerConfig {
-    // Parse command line arguments
-    const argv = this.parseCommandLineArgs();
-
-    // Initialize config with default values
-    const config: ServerConfig = {
-      figmaApiKey: "",
-      port: 3333,
-      configSources: {
-        figmaApiKey: "env",
-        port: "default",
-      },
-    };
-
-    // Handle FIGMA_API_KEY
-    this.configureFigmaApiKey(config, argv);
-
-    // Handle PORT
-    this.configurePort(config, argv);
-
-    // Validate configuration
-    this.validateConfig(config);
-
-    // Log configuration sources
-    this.logConfig(config);
-
-    return config;
-  }
-
-  /**
-   * Parses command line arguments
-   */
-  private parseCommandLineArgs(): CliArgs {
-    return yargs(hideBin(process.argv))
-      .options({
-        "figma-api-key": {
-          type: "string",
-          description: "Figma API key",
-        },
-        port: {
-          type: "number",
-          description: "Port to run the server on",
-        },
-      })
-      .help()
-      .parseSync() as CliArgs;
-  }
-
-  /**
-   * Configures the Figma API key
-   */
-  private configureFigmaApiKey(config: ServerConfig, argv: CliArgs): void {
-    if (argv["figma-api-key"]) {
-      config.figmaApiKey = argv["figma-api-key"];
-      config.configSources.figmaApiKey = "cli";
-    } else if (process.env["FIGMA_API_KEY"]) {
-      config.figmaApiKey = process.env["FIGMA_API_KEY"];
-      config.configSources.figmaApiKey = "env";
-    }
-  }
-
-  /**
-   * Configures the server port
-   */
-  private configurePort(config: ServerConfig, argv: CliArgs): void {
-    if (argv.port) {
-      config.port = argv.port;
-      config.configSources.port = "cli";
-    } else if (process.env["PORT"]) {
-      config.port = Number.parseInt(process.env["PORT"], 10);
-      config.configSources.port = "env";
-    }
-  }
-
-  /**
-   * Validates the configuration
-   */
-  private validateConfig(config: ServerConfig): void {
-    if (!config.figmaApiKey) {
-      this.logger.error(
-        "FIGMA_API_KEY is required (via CLI argument --figma-api-key or .env file)",
-      );
-      process.exit(1);
-    }
-  }
-
-  /**
-   * Logs the configuration
-   */
-  private logConfig(config: ServerConfig): void {
-    if (this.isStdioMode) {
-      return;
-    }
-
-    this.logger.log("\nConfiguration:");
-    this.logger.log(
-      `- FIGMA_API_KEY: ${this.maskApiKey(config.figmaApiKey)} (source: ${config.configSources.figmaApiKey})`,
-    );
-    this.logger.log(`- PORT: ${config.port} (source: ${config.configSources.port})`);
-    this.logger.log(""); // Empty line for better readability
-  }
-
-  /**
-   * Masks an API key for secure logging
-   */
-  private maskApiKey(key: string): string {
-    if (key.length <= 4) return "****";
-    return `****${key.slice(-4)}`;
-  }
-}
-
-/**
- * Gets the server configuration
- */
-export function getServerConfig(isStdioMode: boolean): ServerConfig {
-  const configManager = new ConfigManager({ isStdioMode });
-  return configManager.getServerConfig();
-}

package/src/figma.ts

@@ -1,211 +0,0 @@
-import type { GetFileNodesResponse, GetImagesResponse } from "@figma/rest-api-spec";
-import fs from "fs";
-import { generateCode, createRestNormalizer } from "@seed-design/figma";
-import type { Logger } from "./logger";
-import { NoOpLogger } from "./logger";
-
-export interface FigmaError {
-  status: number;
-  err: string;
-}
-
-export interface FetchImageParams {
-  /**
-   * The Node in Figma that will either be rendered or have its background image downloaded
-   */
-  nodeId: string;
-  /**
-   * The file mimetype for the image
-   */
-  fileType: "png" | "svg";
-  /**
-   * The filename to save the image as
-   */
-  name: string;
-}
-
-export interface FigmaImage {
-  nodeId: string;
-  name: string;
-  blob: Buffer;
-  fileType: "png" | "svg";
-}
-
-export interface SimplifiedDesign {
-  name: string;
-  lastModified: string;
-  code: string;
-}
-
-interface FigmaServiceOptions {
-  apiKey: string;
-  baseUrl?: string;
-  logger?: Logger;
-}
-
-export class FigmaService {
-  private readonly apiKey: string;
-  private readonly baseUrl: string;
-  private readonly logger: Logger;
-
-  constructor(options: FigmaServiceOptions) {
-    this.apiKey = options.apiKey;
-    this.baseUrl = options.baseUrl || "https://api.figma.com/v1";
-    this.logger = options.logger || NoOpLogger;
-  }
-
-  private async request<T>(endpoint: string): Promise<T> {
-    try {
-      this.logger.log(`Calling ${this.baseUrl}${endpoint}`);
-      const response = await fetch(`${this.baseUrl}${endpoint}`, {
-        headers: {
-          "X-Figma-Token": this.apiKey,
-        },
-      });
-
-      if (!response.ok) {
-        const errorData = (await response.json().catch(() => ({}))) as { err?: string };
-        throw {
-          status: response.status,
-          err: errorData.err || "Unknown error",
-        } as FigmaError;
-      }
-
-      return response.json() as Promise<T>;
-    } catch (error) {
-      if (error instanceof Error) {
-        throw new Error(`Failed to make request to Figma API: ${error.message}`);
-      }
-      throw error;
-    }
-  }
-
-  async getImages(fileKey: string, nodes: FetchImageParams[]): Promise<FigmaImage[]> {
-    const pngNodes = nodes.filter(({ fileType }) => fileType === "png");
-    const svgNodes = nodes.filter(({ fileType }) => fileType === "svg");
-
-    const imagesMap = await this.fetchImageUrls(fileKey, pngNodes, svgNodes);
-
-    const images = await this.fetchImage(nodes, imagesMap);
-
-    return images;
-  }
-
-  private async fetchImageUrls(
-    fileKey: string,
-    pngNodes: FetchImageParams[],
-    svgNodes: FetchImageParams[],
-  ): Promise<Record<string, string>> {
-    const pngIds = pngNodes.map(({ nodeId }) => nodeId);
-    const pngFiles =
-      pngIds.length > 0
-        ? this.request<GetImagesResponse>(
-            `/images/${fileKey}?ids=${pngIds.join(",")}&scale=2&format=png`,
-          ).then(({ images = {} }) => images)
-        : ({} as GetImagesResponse["images"]);
-
-    const svgIds = svgNodes.map(({ nodeId }) => nodeId);
-    const svgFiles =
-      svgIds.length > 0
-        ? this.request<GetImagesResponse>(
-            `/images/${fileKey}?ids=${svgIds.join(",")}&format=svg`,
-          ).then(({ images = {} }) => images)
-        : ({} as GetImagesResponse["images"]);
-
-    const [pngImages, svgImages] = await Promise.all([pngFiles, svgFiles]);
-    const combinedImages: Record<string, string> = {};
-
-    Object.entries({ ...pngImages, ...svgImages }).forEach(([key, value]) => {
-      if (value !== null) {
-        combinedImages[key] = value;
-      }
-    });
-
-    return combinedImages;
-  }
-
-  private async fetchImage(
-    nodes: FetchImageParams[],
-    imagesMap: Record<string, string>,
-  ): Promise<FigmaImage[]> {
-    const fetchPromises = nodes
-      .map(({ nodeId, name, fileType }) => {
-        const imageUrl = imagesMap[nodeId];
-        if (imageUrl) {
-          return fetch(imageUrl)
-            .then((response) => response.arrayBuffer())
-            .then((arrayBuffer) => Buffer.from(arrayBuffer))
-            .then((buffer) => {
-              return {
-                nodeId,
-                name,
-                blob: buffer,
-                fileType,
-              };
-            })
-            .catch((error) => {
-              this.logger.error(`Failed to fetch image for ${nodeId}:`, error);
-              return undefined;
-            });
-        }
-        return undefined;
-      })
-      .filter((x): x is Promise<FigmaImage> => x !== undefined);
-
-    return Promise.all(fetchPromises);
-  }
-
-  async getGeneratedCode(
-    fileKey: string,
-    nodeId: string,
-    depth?: number,
-  ): Promise<SimplifiedDesign> {
-    const endpoint = `/files/${fileKey}/nodes?ids=${nodeId}${depth ? `&depth=${depth}` : ""}`;
-    const response = await this.request<GetFileNodesResponse>(endpoint);
-
-    this.writeDebugLogs("figma-raw.json", response);
-
-    const node = Object.values(response.nodes)[0]!;
-
-    const normalizer = createRestNormalizer({
-      styles: node.styles,
-      components: node.components,
-      componentSets: node.componentSets,
-    });
-
-    const normalizedNode = normalizer(node.document);
-    const code = generateCode(normalizedNode) ?? "";
-
-    const result = {
-      name: node.document.name,
-      lastModified: response.lastModified,
-      code,
-    };
-
-    this.writeDebugLogs("figma-result.json", result);
-    return result;
-  }
-
-  private writeDebugLogs(name: string, value: any): void {
-    try {
-      if (process.env["NODE_ENV"] !== "development") return;
-
-      const logsDir = "logs";
-
-      try {
-        fs.accessSync(process.cwd(), fs.constants.W_OK);
-      } catch (error) {
-        this.logger.error("Failed to write logs:", error);
-        return;
-      }
-
-      if (!fs.existsSync(logsDir)) {
-        fs.mkdirSync(logsDir);
-      }
-
-      fs.writeFileSync(`${logsDir}/${name}`, JSON.stringify(value, null, 2));
-    } catch (error) {
-      this.logger.error("Failed to write logs:", error);
-    }
-  }
-}

package/src/index.ts

@@ -1,36 +0,0 @@
-import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
-import { FigmaMcpServer } from "./server";
-import { getServerConfig } from "./config";
-import { ConsoleLogger } from "./logger";
-
-/**
- * Determines if the server should run in stdio mode
- */
-function isRunningInStdioMode(): boolean {
-  return process.env["NODE_ENV"] === "cli" || process.argv.includes("--stdio");
-}
-
-/**
- * Starts the Figma MCP server
- */
-export async function startServer(): Promise<void> {
-  // Determine server mode (stdio or HTTP)
-  const stdioMode = isRunningInStdioMode();
-
-  // Get configuration
-  const config = getServerConfig(stdioMode);
-
-  // Create server instance
-  const server = new FigmaMcpServer(config.figmaApiKey);
-
-  // Start in appropriate mode
-  if (stdioMode) {
-    // Connect to stdio transport for CLI mode
-    const transport = new StdioServerTransport();
-    await server.connect(transport);
-  } else {
-    // Start HTTP server for web mode
-    ConsoleLogger.log(`Initializing Figma MCP Server in HTTP mode on port ${config.port}...`);
-    await server.startHttpServer(config.port);
-  }
-}

package/src/save-image.ts

@@ -1,16 +0,0 @@
-import fs from "node:fs";
-import * as path from "node:path";
-import * as os from "node:os";
-
-const defaultDownloadsPath = path.join(os.homedir(), "Downloads");
-
-export function saveImage(image: Buffer, name: string, type: "png" | "svg") {
-  if (!fs.existsSync(defaultDownloadsPath)) {
-    fs.mkdirSync(defaultDownloadsPath, { recursive: true });
-  }
-
-  const filePath = path.join(defaultDownloadsPath, `${name}.${type}`);
-  fs.writeFileSync(filePath, image);
-
-  return filePath;
-}