create_component_instance

Instructions

Implementation Reference

• src/talk_to_figma_mcp/server.ts:1204-1240 (handler)

  The complete MCP tool definition including registration, input schema, and handler function for 'create_component_instance'. The handler proxies the request to the Figma plugin via sendCommandToFigma, handling the tool execution logic and error responses.

  server.tool(
    "create_component_instance",
    "Create an instance of a component in Figma",
    {
      componentKey: z.string().describe("Key of the component to instantiate"),
      x: z.number().describe("X position"),
      y: z.number().describe("Y position"),
    },
    async ({ componentKey, x, y }) => {
      try {
        const result = await sendCommandToFigma("create_component_instance", {
          componentKey,
          x,
          y,
        });
        const typedResult = result as any;
        return {
          content: [
            {
              type: "text",
              text: JSON.stringify(typedResult),
            }
          ]
        }
      } catch (error) {
        return {
          content: [
            {
              type: "text",
              text: `Error creating component instance: ${error instanceof Error ? error.message : String(error)
                }`,
            },
          ],
        };
      }
    }
  );

• src/talk_to_figma_mcp/server.ts:1207-1211 (schema)

  Zod input schema validation for the 'create_component_instance' tool parameters.

  {
    componentKey: z.string().describe("Key of the component to instantiate"),
    x: z.number().describe("X position"),
    y: z.number().describe("Y position"),
  },

• src/talk_to_figma_mcp/server.ts:1204-1205 (registration)

  Registration of the 'create_component_instance' tool in the MCP server.

  server.tool(
    "create_component_instance",

• src/talk_to_figma_mcp/server.ts:2899-2958 (helper)

  Helper function used by the handler to send the 'create_component_instance' command to the Figma WebSocket server.

  function sendCommandToFigma(
    command: FigmaCommand,
    params: unknown = {},
    timeoutMs: number = 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));
    });
  }