@sanjeshh/framelink 1.0.0

package/README.md

@@ -0,0 +1,149 @@
+# FrameLink
+
+FrameLink is a local MCP server that exposes Figma design data to Claude Code. It reads the currently selected node from Figma Desktop and makes it available as structured JSON through the Model Context Protocol, enabling accurate code generation without manual description or screenshots.
+
+All data remains local. No external network requests are made.
+
+---
+
+## Architecture
+
+```
+Figma Desktop (plugin)
+    │  WebSocket  ws://localhost:3333
+Local Bridge (Express + ws)
+    │  HTTP
+MCP Server (stdio)
+    │  MCP protocol
+Claude Code
+```
+
+The Figma plugin runs in two contexts: a main thread with access to the Figma API, and a UI thread capable of network I/O. The UI thread maintains a persistent WebSocket connection to the bridge. The bridge translates HTTP requests from the MCP server into WebSocket messages and returns the plugin's response.
+
+---
+
+## Requirements
+
+- Node.js 18+
+- Figma Desktop
+
+---
+
+## Installation
+
+```sh
+npm install -g framelink
+```
+
+---
+
+## Configuration
+
+Register the MCP server with Claude Code. This writes to `~/.claude.json` and persists across sessions.
+
+```sh
+claude mcp add framelink --transport stdio -- framelink
+```
+
+Restart VSCode after running this command.
+
+---
+
+## Setup
+
+**Bridge**
+
+Start the local bridge server. Keep this process running while using FrameLink.
+
+```sh
+framelink-bridge
+```
+
+By default the bridge listens on port `3333`. To use a different port:
+
+```sh
+PORT=4000 framelink-bridge
+```
+
+**Figma plugin**
+
+1. Open Figma Desktop
+2. Navigate to **Plugins → Development → Import plugin from manifest**
+3. Select `plugin/manifest.json` from this repository
+4. Run the plugin via **Plugins → Development → FrameLink**
+
+Keep the plugin window open. The plugin may be minimized. When the WebSocket connection is established, the status indicator turns green.
+
+---
+
+## Usage
+
+Select a frame or component in Figma. Claude will call the appropriate tool automatically when asked about the design.
+
+```
+Write a React component for my current Figma selection.
+```
+
+```
+What are the text styles used in this frame?
+```
+
+```
+Generate CSS variables from the styles in this file.
+```
+
+---
+
+## Tools
+
+| Tool | Description |
+|------|-------------|
+| `get_selection` | Returns the currently selected node and its full subtree |
+| `read_my_design` | Returns full node details optimized for code generation |
+| `get_document_info` | Returns document name, page list, and active page |
+| `get_node_info` | Returns a single node by ID |
+| `get_nodes_info` | Returns multiple nodes by ID |
+| `get_local_components` | Returns all components defined on the current page |
+| `get_styles` | Returns all paint, text, effect, and grid styles |
+| `get_annotations` | Returns annotations attached to a node |
+| `get_instance_overrides` | Returns overrides on a component instance |
+| `get_reactions` | Returns prototype interactions defined on a node |
+| `scan_nodes_by_types` | Returns all nodes matching the specified types |
+| `scan_text_nodes` | Returns all text nodes within a given scope |
+| `connection_diagnostics` | Reports bridge and plugin connection status |
+| `get_active_channels` | Lists active WebSocket channels |
+| `join_channel` | Returns instructions for connecting the plugin |
+
+---
+
+## Environment Variables
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `PORT` | `3333` | Bridge server port |
+| `LOG_LEVEL` | `info` | Log verbosity: `debug`, `info`, `warn`, `error` |
+| `FIGMA_BRIDGE_URL` | `http://localhost:3333` | Bridge URL used by the MCP server |
+
+---
+
+## Troubleshooting
+
+**Plugin not connecting**  
+Verify the plugin window is open and `framelink-bridge` is running. The bridge must be started before or after the plugin — it will reconnect automatically.
+
+**Port conflict**  
+```sh
+kill -9 $(lsof -ti :3333)
+```
+
+**Tools not visible in Claude**  
+Re-run `claude mcp add` and restart VSCode.
+
+**Request timeout on large documents**  
+Scan operations run against the current page only. Switch to a page with fewer nodes.
+
+---
+
+## License
+
+MIT

package/dist/bridge.js

@@ -0,0 +1,276 @@
+#!/usr/bin/env node
+
+// src/bridge/index.ts
+import express from "express";
+import { createServer } from "http";
+import { WebSocketServer } from "ws";
+
+// src/bridge/routes/figma.ts
+import { Router } from "express";
+
+// src/bridge/ws/manager.ts
+import { WebSocket } from "ws";
+import { v4 as uuidv4 } from "uuid";
+
+// src/bridge/logger.ts
+var R = "\x1B[0m";
+var DIM = "\x1B[2m";
+var BOLD = "\x1B[1m";
+var GREEN = "\x1B[32m";
+var YELLOW = "\x1B[33m";
+var RED = "\x1B[31m";
+var CYAN = "\x1B[36m";
+var MAGENTA = "\x1B[35m";
+var ts = () => (/* @__PURE__ */ new Date()).toLocaleTimeString("en-US", { hour12: false });
+var line = (s) => process.stdout.write(s + "\n");
+function printBanner(port) {
+  line("");
+  line(`  ${BOLD}${MAGENTA}FrameLink${R} ${DIM}Bridge${R}`);
+  line("");
+  line(`  ${DIM}http${R}  ${DIM}\u2192${R}  ${CYAN}http://localhost:${port}${R}`);
+  line(`  ${DIM}ws  ${R}  ${DIM}\u2192${R}  ${CYAN}ws://localhost:${port}${R}`);
+  line("");
+  line(`  ${DIM}Waiting for Figma plugin...${R}`);
+  line("");
+}
+var logger = {
+  info: (msg) => line(`  ${DIM}${ts()}${R}  ${DIM}${msg}${R}`),
+  success: (msg) => line(`  ${GREEN}\u2713${R}  ${msg}`),
+  warn: (msg) => line(`  ${YELLOW}\u26A0${R}  ${DIM}${msg}${R}`),
+  error: (msg) => line(`  ${RED}\u2717${R}  ${msg}`),
+  request: (type, ms) => line(`  ${DIM}\u2192${R}  ${type.padEnd(26)}  ${DIM}${ms}ms${R}`),
+  debug: (msg) => {
+    if (process.env.LOG_LEVEL === "debug")
+      line(`  ${DIM}\xB7 ${msg}${R}`);
+  }
+};
+
+// src/bridge/ws/manager.ts
+var WebSocketManager = class {
+  constructor() {
+    this.ws = null;
+    this.pendingRequests = /* @__PURE__ */ new Map();
+  }
+  setConnection(ws) {
+    this.ws = ws;
+    logger.success("Plugin connected");
+    ws.on("message", (data) => {
+      try {
+        const msg = JSON.parse(data.toString());
+        const requestId = msg.requestId;
+        if (!requestId)
+          return;
+        const pending = this.pendingRequests.get(requestId);
+        if (!pending)
+          return;
+        this.pendingRequests.delete(requestId);
+        clearTimeout(pending.timeout);
+        const ms = Date.now() - pending.startedAt;
+        logger.request(pending.type, ms);
+        if (msg.type === "ERROR") {
+          pending.reject(new Error(msg.message));
+        } else {
+          pending.resolve(msg.data);
+        }
+      } catch (error) {
+        logger.error(`Failed to parse message: ${error}`);
+      }
+    });
+    ws.on("close", () => {
+      logger.warn("Plugin disconnected");
+      this.ws = null;
+      this.rejectAll("WebSocket disconnected");
+    });
+    ws.on("error", (error) => {
+      logger.error(`Plugin error: ${error}`);
+      this.ws = null;
+      this.rejectAll("WebSocket error");
+    });
+  }
+  rejectAll(reason) {
+    for (const pending of this.pendingRequests.values()) {
+      clearTimeout(pending.timeout);
+      pending.reject(new Error(reason));
+    }
+    this.pendingRequests.clear();
+  }
+  isConnected() {
+    return this.ws !== null && this.ws.readyState === WebSocket.OPEN;
+  }
+  async request(type, params, timeout = 5e3) {
+    if (!this.isConnected())
+      throw new Error("PLUGIN_UNAVAILABLE");
+    const requestId = uuidv4();
+    const startedAt = Date.now();
+    this.ws.send(JSON.stringify({ type, requestId, ...params }));
+    return new Promise((resolve, reject) => {
+      const timeoutHandle = setTimeout(() => {
+        this.pendingRequests.delete(requestId);
+        logger.warn(`Timeout: ${type}`);
+        reject(new Error("TIMEOUT"));
+      }, timeout);
+      this.pendingRequests.set(requestId, { resolve, reject, timeout: timeoutHandle, type, startedAt });
+    });
+  }
+};
+var wsManager = new WebSocketManager();
+
+// src/bridge/routes/figma.ts
+var router = Router();
+function pluginUnavailable(res) {
+  return res.status(503).json({
+    error: { code: "PLUGIN_UNAVAILABLE", message: "Figma plugin is not connected." }
+  });
+}
+async function pluginRequest(res, type, params, timeout) {
+  if (!wsManager.isConnected()) {
+    pluginUnavailable(res);
+    return null;
+  }
+  try {
+    return await wsManager.request(type, params, timeout);
+  } catch (error) {
+    const message = String(error);
+    if (message.includes("NO_SELECTION")) {
+      res.status(404).json({ error: { code: "NO_SELECTION", message: "No node selected in Figma." } });
+    } else if (message.includes("TIMEOUT")) {
+      res.status(504).json({ error: { code: "TIMEOUT", message: "Plugin did not respond in time." } });
+    } else if (message.includes("PLUGIN_UNAVAILABLE")) {
+      pluginUnavailable(res);
+    } else {
+      logger.error(`Plugin request error: ${error}`);
+      res.status(500).json({ error: { code: "ERROR", message } });
+    }
+    return null;
+  }
+}
+router.get("/selection", async (req, res) => {
+  const data = await pluginRequest(res, "GET_SELECTION");
+  if (data !== null)
+    res.json({ selectedNode: data });
+});
+router.get("/read-my-design", async (req, res) => {
+  const data = await pluginRequest(res, "READ_MY_DESIGN");
+  if (data !== null)
+    res.json({ node: data });
+});
+router.get("/document-info", async (req, res) => {
+  const data = await pluginRequest(res, "GET_DOCUMENT_INFO");
+  if (data !== null)
+    res.json(data);
+});
+router.get("/node-info/:nodeId", async (req, res) => {
+  const data = await pluginRequest(res, "GET_NODE_INFO", { nodeId: req.params.nodeId });
+  if (data !== null)
+    res.json({ node: data });
+});
+router.post("/nodes-info", async (req, res) => {
+  const { nodeIds } = req.body;
+  if (!Array.isArray(nodeIds)) {
+    return res.status(400).json({ error: { code: "BAD_REQUEST", message: "nodeIds must be an array" } });
+  }
+  const data = await pluginRequest(res, "GET_NODES_INFO", { nodeIds });
+  if (data !== null)
+    res.json({ nodes: data });
+});
+router.get("/local-components", async (req, res) => {
+  const data = await pluginRequest(res, "GET_LOCAL_COMPONENTS", void 0, 2e4);
+  if (data !== null)
+    res.json({ components: data });
+});
+router.get("/styles", async (req, res) => {
+  const data = await pluginRequest(res, "GET_STYLES", void 0, 2e4);
+  if (data !== null)
+    res.json(data);
+});
+router.get("/annotations", async (req, res) => {
+  const nodeId = req.query.nodeId;
+  const data = await pluginRequest(res, "GET_ANNOTATIONS", nodeId ? { nodeId } : void 0);
+  if (data !== null)
+    res.json({ annotations: data });
+});
+router.get("/instance-overrides/:nodeId", async (req, res) => {
+  const data = await pluginRequest(res, "GET_INSTANCE_OVERRIDES", { nodeId: req.params.nodeId });
+  if (data !== null)
+    res.json(data);
+});
+router.get("/reactions", async (req, res) => {
+  const nodeId = req.query.nodeId;
+  const data = await pluginRequest(res, "GET_REACTIONS", nodeId ? { nodeId } : void 0);
+  if (data !== null)
+    res.json(data);
+});
+router.post("/scan-nodes-by-types", async (req, res) => {
+  const { nodeId, types } = req.body;
+  if (!Array.isArray(types)) {
+    return res.status(400).json({ error: { code: "BAD_REQUEST", message: "types must be an array" } });
+  }
+  const data = await pluginRequest(res, "SCAN_NODES_BY_TYPES", { nodeId, types }, 2e4);
+  if (data !== null)
+    res.json({ nodes: data });
+});
+router.get("/scan-text-nodes", async (req, res) => {
+  const nodeId = req.query.nodeId;
+  const data = await pluginRequest(res, "SCAN_TEXT_NODES", nodeId ? { nodeId } : void 0, 2e4);
+  if (data !== null)
+    res.json({ textNodes: data });
+});
+var figma_default = router;
+
+// src/bridge/routes/connection.ts
+import { Router as Router2 } from "express";
+var router2 = Router2();
+router2.get("/connection/diagnostics", (req, res) => {
+  const connected = wsManager.isConnected();
+  res.json({
+    status: connected ? "connected" : "disconnected",
+    pluginConnected: connected,
+    bridgePort: process.env.PORT || 3333,
+    wsEndpoint: `ws://localhost:${process.env.PORT || 3333}`,
+    httpEndpoint: `http://localhost:${process.env.PORT || 3333}`
+  });
+});
+router2.get("/connection/channels", (req, res) => {
+  res.json({
+    channels: wsManager.isConnected() ? ["figma-plugin"] : [],
+    count: wsManager.isConnected() ? 1 : 0
+  });
+});
+router2.post("/connection/join", (req, res) => {
+  res.json({
+    message: "Local bridge uses a direct WebSocket connection. Open the Figma plugin to connect.",
+    connected: wsManager.isConnected()
+  });
+});
+var connection_default = router2;
+
+// src/bridge/index.ts
+var PORT = process.env.PORT || 3333;
+var app = express();
+var server = createServer(app);
+var wss = new WebSocketServer({ server, path: "/" });
+app.use(express.json());
+app.get("/health", (req, res) => {
+  res.json({ status: "ok", pluginConnected: wsManager.isConnected() });
+});
+app.use(figma_default);
+app.use(connection_default);
+app.use((req, res) => {
+  res.status(404).json({ error: "Not found" });
+});
+wss.on("connection", (ws) => {
+  wsManager.setConnection(ws);
+});
+wss.on("error", (error) => {
+  logger.error(`WebSocket server error: ${error}`);
+});
+server.listen(PORT, () => {
+  printBanner(PORT);
+});
+var shutdown = () => {
+  process.stdout.write("\n");
+  logger.info("Shutting down...");
+  server.close(() => process.exit(0));
+};
+process.on("SIGINT", shutdown);
+process.on("SIGTERM", shutdown);

package/dist/mcp.js

@@ -0,0 +1,291 @@
+#!/usr/bin/env node
+
+// src/mcp/server.ts
+import { Server } from "@modelcontextprotocol/sdk/server/index.js";
+import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
+import { ListToolsRequestSchema, CallToolRequestSchema } from "@modelcontextprotocol/sdk/types.js";
+
+// src/mcp/bridge-client.ts
+var BRIDGE_URL = process.env.FIGMA_BRIDGE_URL || "http://localhost:3333";
+var PluginUnavailableError = class extends Error {
+  constructor() {
+    super(...arguments);
+    this.name = "PluginUnavailableError";
+  }
+};
+var NoSelectionError = class extends Error {
+  constructor() {
+    super(...arguments);
+    this.name = "NoSelectionError";
+  }
+};
+var TimeoutError = class extends Error {
+  constructor() {
+    super(...arguments);
+    this.name = "TimeoutError";
+  }
+};
+var BridgeOfflineError = class extends Error {
+  constructor() {
+    super(...arguments);
+    this.name = "BridgeOfflineError";
+  }
+};
+async function get(path) {
+  let response;
+  try {
+    response = await fetch(`${BRIDGE_URL}${path}`);
+  } catch {
+    throw new BridgeOfflineError(`Bridge not running at ${BRIDGE_URL}`);
+  }
+  if (!response.ok) {
+    const body = await response.json().catch(() => ({}));
+    const code = body.error?.code;
+    const message = body.error?.message || response.statusText;
+    if (code === "PLUGIN_UNAVAILABLE")
+      throw new PluginUnavailableError(message);
+    if (code === "NO_SELECTION")
+      throw new NoSelectionError(message);
+    if (code === "TIMEOUT")
+      throw new TimeoutError(message);
+    throw new Error(`Bridge error: ${message}`);
+  }
+  return response.json();
+}
+async function post(path, body) {
+  let response;
+  try {
+    response = await fetch(`${BRIDGE_URL}${path}`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(body)
+    });
+  } catch {
+    throw new BridgeOfflineError(`Bridge not running at ${BRIDGE_URL}`);
+  }
+  if (!response.ok) {
+    const body2 = await response.json().catch(() => ({}));
+    const code = body2.error?.code;
+    const message = body2.error?.message || response.statusText;
+    if (code === "PLUGIN_UNAVAILABLE")
+      throw new PluginUnavailableError(message);
+    if (code === "TIMEOUT")
+      throw new TimeoutError(message);
+    throw new Error(`Bridge error: ${message}`);
+  }
+  return response.json();
+}
+var pluck = (key) => (d) => d[key];
+var fetchSelection = () => get("/selection");
+var fetchReadMyDesign = () => get("/read-my-design").then(pluck("node"));
+var fetchDocumentInfo = () => get("/document-info");
+var fetchNodeInfo = (nodeId) => get(`/node-info/${encodeURIComponent(nodeId)}`).then(pluck("node"));
+var fetchNodesInfo = (nodeIds) => post("/nodes-info", { nodeIds }).then(pluck("nodes"));
+var fetchLocalComponents = () => get("/local-components").then(pluck("components"));
+var fetchStyles = () => get("/styles");
+var fetchAnnotations = (nodeId) => get(`/annotations${nodeId ? `?nodeId=${encodeURIComponent(nodeId)}` : ""}`).then(pluck("annotations"));
+var fetchInstanceOverrides = (nodeId) => get(`/instance-overrides/${encodeURIComponent(nodeId)}`);
+var fetchReactions = (nodeId) => get(`/reactions${nodeId ? `?nodeId=${encodeURIComponent(nodeId)}` : ""}`);
+var scanNodesByTypes = (types, nodeId) => post("/scan-nodes-by-types", { types, nodeId }).then(pluck("nodes"));
+var scanTextNodes = (nodeId) => get(`/scan-text-nodes${nodeId ? `?nodeId=${encodeURIComponent(nodeId)}` : ""}`).then(pluck("textNodes"));
+var fetchConnectionDiagnostics = () => get("/connection/diagnostics");
+var fetchActiveChannels = () => get("/connection/channels");
+
+// src/mcp/server.ts
+var server = new Server(
+  { name: "framelink", version: "2.0.0" },
+  { capabilities: { tools: {} } }
+);
+var TOOLS = [
+  // Connection tools
+  {
+    name: "connection_diagnostics",
+    description: "Runs diagnostics on the WebSocket connection and reports status of bridge and plugin.",
+    inputSchema: { type: "object", properties: {} }
+  },
+  {
+    name: "get_active_channels",
+    description: "Lists all active WebSocket channels connected to the bridge.",
+    inputSchema: { type: "object", properties: {} }
+  },
+  {
+    name: "join_channel",
+    description: "Returns connection instructions for joining the Figma plugin channel.",
+    inputSchema: { type: "object", properties: {} }
+  },
+  // Read-only tools
+  {
+    name: "get_document_info",
+    description: "Reads details about the current Figma document including name, ID, pages, and current page.",
+    inputSchema: { type: "object", properties: {} }
+  },
+  {
+    name: "get_selection",
+    description: "Reads what is currently selected in Figma. Returns the selected node subtree with layout, styles, and children.",
+    inputSchema: { type: "object", properties: {} }
+  },
+  {
+    name: "read_my_design",
+    description: "Reads full node details of the current selection in Figma. Use this to get the complete design tree for code generation.",
+    inputSchema: { type: "object", properties: {} }
+  },
+  {
+    name: "get_node_info",
+    description: "Reads info about a single node by its Figma node ID.",
+    inputSchema: {
+      type: "object",
+      properties: {
+        nodeId: { type: "string", description: 'The Figma node ID (e.g. "454:23657")' }
+      },
+      required: ["nodeId"]
+    }
+  },
+  {
+    name: "get_nodes_info",
+    description: "Reads info about multiple nodes by their Figma node IDs.",
+    inputSchema: {
+      type: "object",
+      properties: {
+        nodeIds: { type: "array", items: { type: "string" }, description: "Array of Figma node IDs" }
+      },
+      required: ["nodeIds"]
+    }
+  },
+  {
+    name: "get_local_components",
+    description: "Reads all local components defined in the Figma document.",
+    inputSchema: { type: "object", properties: {} }
+  },
+  {
+    name: "get_styles",
+    description: "Reads all styles (paint/color, text, effect, grid) defined in the Figma document.",
+    inputSchema: { type: "object", properties: {} }
+  },
+  {
+    name: "get_annotations",
+    description: "Reads annotations on a document or specific node.",
+    inputSchema: {
+      type: "object",
+      properties: {
+        nodeId: { type: "string", description: "Optional node ID. Defaults to current selection." }
+      }
+    }
+  },
+  {
+    name: "get_instance_overrides",
+    description: "Reads override properties from a component instance node.",
+    inputSchema: {
+      type: "object",
+      properties: {
+        nodeId: { type: "string", description: "The node ID of a component instance" }
+      },
+      required: ["nodeId"]
+    }
+  },
+  {
+    name: "get_reactions",
+    description: "Reads prototype interactions and reactions from a node.",
+    inputSchema: {
+      type: "object",
+      properties: {
+        nodeId: { type: "string", description: "Optional node ID. Defaults to current selection." }
+      }
+    }
+  },
+  {
+    name: "scan_nodes_by_types",
+    description: "Scans and returns child nodes matching specified Figma node types (e.g. FRAME, TEXT, RECTANGLE).",
+    inputSchema: {
+      type: "object",
+      properties: {
+        types: { type: "array", items: { type: "string" }, description: 'Node types to scan for, e.g. ["TEXT", "FRAME"]' },
+        nodeId: { type: "string", description: "Optional root node ID. Defaults to current page." }
+      },
+      required: ["types"]
+    }
+  },
+  {
+    name: "scan_text_nodes",
+    description: "Scans and returns all text nodes within a node or the current page.",
+    inputSchema: {
+      type: "object",
+      properties: {
+        nodeId: { type: "string", description: "Optional root node ID. Defaults to current page." }
+      }
+    }
+  }
+];
+server.setRequestHandler(ListToolsRequestSchema, async () => ({ tools: TOOLS }));
+server.setRequestHandler(CallToolRequestSchema, async (request) => {
+  const { name, arguments: args } = request.params;
+  const params = args ?? {};
+  const ok = (data) => ({
+    content: [{ type: "text", text: JSON.stringify(data, null, 2) }]
+  });
+  const err = (message) => ({
+    content: [{ type: "text", text: `Error: ${message}` }],
+    isError: true
+  });
+  const mapError = (error) => {
+    if (error instanceof NoSelectionError)
+      return "No node selected in Figma. Please select a frame or component.";
+    if (error instanceof PluginUnavailableError)
+      return "Figma plugin is not connected. Ensure it's running and the window is open.";
+    if (error instanceof TimeoutError)
+      return "Plugin timeout. Try selecting again or restarting the plugin.";
+    if (error instanceof BridgeOfflineError)
+      return "Bridge is not running. Start it with: npm run bridge:dev";
+    if (error instanceof Error)
+      return error.message;
+    return "Unknown error";
+  };
+  try {
+    switch (name) {
+      case "connection_diagnostics":
+        return ok(await fetchConnectionDiagnostics());
+      case "get_active_channels":
+        return ok(await fetchActiveChannels());
+      case "join_channel":
+        return ok({ message: "Open the Figma plugin (Plugins \u2192 Development \u2192 Figma \u2192 Claude Code) to connect. Keep the plugin window open." });
+      case "get_document_info":
+        return ok(await fetchDocumentInfo());
+      case "get_selection":
+        return ok((await fetchSelection()).selectedNode);
+      case "read_my_design":
+        return ok(await fetchReadMyDesign());
+      case "get_node_info":
+        return ok(await fetchNodeInfo(params.nodeId));
+      case "get_nodes_info":
+        return ok(await fetchNodesInfo(params.nodeIds));
+      case "get_local_components":
+        return ok(await fetchLocalComponents());
+      case "get_styles":
+        return ok(await fetchStyles());
+      case "get_annotations":
+        return ok(await fetchAnnotations(params.nodeId));
+      case "get_instance_overrides":
+        return ok(await fetchInstanceOverrides(params.nodeId));
+      case "get_reactions":
+        return ok(await fetchReactions(params.nodeId));
+      case "scan_nodes_by_types":
+        return ok(await scanNodesByTypes(params.types, params.nodeId));
+      case "scan_text_nodes":
+        return ok(await scanTextNodes(params.nodeId));
+      default:
+        return err(`Unknown tool: ${name}`);
+    }
+  } catch (error) {
+    return err(mapError(error));
+  }
+});
+async function main() {
+  console.error("[MCP] Starting server...");
+  const transport = new StdioServerTransport();
+  await server.connect(transport);
+  console.error("[MCP] Server connected");
+}
+console.error("[MCP] Main script loaded");
+main().catch((error) => {
+  console.error("[MCP] Fatal error:", error);
+  process.exit(1);
+});

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@sanjeshh/framelink",
+  "version": "1.0.0",
+  "description": "Local Figma MCP server and bridge for Claude Code — read Figma selections directly in your AI workflow",
+  "type": "module",
+  "bin": {
+    "framelink": "./dist/mcp.js",
+    "framelink-bridge": "./dist/bridge.js"
+  },
+  "files": [
+    "dist/"
+  ],
+  "scripts": {
+    "build": "node build.mjs",
+    "link": "npm run build && npm link",
+    "dev:bridge": "tsx src/bridge/index.ts",
+    "dev:mcp": "tsx src/mcp/server.ts",
+    "prepublishOnly": "npm run build"
+  },
+  "dependencies": {
+    "@modelcontextprotocol/sdk": "^1.0.0",
+    "express": "^4.18.2",
+    "uuid": "^9.0.1",
+    "ws": "^8.15.0"
+  },
+  "devDependencies": {
+    "@types/express": "^4.17.21",
+    "@types/node": "^20.0.0",
+    "@types/uuid": "^10.0.0",
+    "@types/ws": "^8.5.10",
+    "esbuild": "^0.20.0",
+    "tsx": "^4.7.0",
+    "typescript": "^5.3.0"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "keywords": [
+    "figma",
+    "mcp",
+    "claude",
+    "model-context-protocol",
+    "figma-plugin",
+    "ai",
+    "code-generation"
+  ],
+  "license": "MIT"
+}