@fridaplatform-stk/figma2frida-mcp 1.0.0

package/LICENSE

@@ -0,0 +1,25 @@
+The MIT License (MIT)
+=====================
+
+Copyright © 2024 Frank Fiegel (frank@glama.ai)
+
+Permission is hereby granted, free of charge, to any person
+obtaining a copy of this software and associated documentation
+files (the “Software”), to deal in the Software without
+restriction, including without limitation the rights to use,
+copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the
+Software is furnished to do so, subject to the following
+conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
+OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,216 @@
+# Figma2Frida MCP Server
+
+Figma to Frida MCP Server - Bridge between Figma Desktop MCP and design system components with Pinecone search.
+
+## Overview
+
+This MCP server connects Figma Desktop MCP to your design system components stored in Pinecone, enabling intelligent component suggestions based on Figma designs.
+
+## Features
+
+- 🔗 **Figma Integration**: Connects to Figma Desktop MCP
+- 🔍 **Pinecone Search**: Semantic search for design system components
+- 🤖 **Frida AI**: Intelligent component recommendations
+- 🎨 **Component Suggestions**: Suggests matching components based on Figma designs
+- 📸 **Screenshot Support**: Get visual screenshots from Figma
+- 🚀 **Fast Code Generation**: Optimized for rapid code generation
+
+## Prerequisites
+
+- Node.js 18+ 
+- Figma Desktop with MCP enabled (running at `http://127.0.0.1:3845/sse`)
+- Pinecone account with API key
+- Frida AI account with bearer token
+
+## Installation
+
+```bash
+# Clone the repository
+git clone <your-repo-url>
+cd figma2frida_mcp
+
+# Install dependencies
+npm install
+
+# Build the project
+npm run build
+```
+
+## Configuration
+
+### Environment Variables
+
+Create a `.env` file in the project root with the following variables:
+
+```bash
+# Pinecone Configuration
+PINECONE_API_KEY=your_pinecone_api_key_here
+PINECONE_INDEX_NAME=your_index_name
+# PINECONE_NAMESPACE is passed as argument (not in .env)
+
+# Frida AI Configuration
+FRIDA_BEARER_TOKEN=your_frida_bearer_token_here
+FRIDA_BASE_URL=https://api.frida.ai
+
+# Server Configuration (optional)
+HTTP_STREAM=true  # Set to true for HTTP mode, false for stdio
+PORT=8080         # Port for HTTP stream mode
+```
+
+**Important**: `PINECONE_NAMESPACE` should NOT be in `.env` - it's passed as a command-line argument.
+
+## Local Development
+
+### Running Locally
+
+Use the `run-local.sh` script for local testing:
+
+```bash
+# Make sure the script is executable
+chmod +x run-local.sh
+
+# With default namespace (org01_proj01)
+./run-local.sh
+
+# With custom namespace
+./run-local.sh org02_proj02
+```
+
+The script will:
+- Start the server in HTTP Stream mode
+- Use the namespace from the command-line argument
+- Load all other settings from `.env` file
+- Make the server available at `http://localhost:8080/mcp`
+
+### Testing the Server
+
+Once running, test with curl:
+
+```bash
+curl -X POST http://localhost:8080/mcp \
+  -H "Content-Type: application/json" \
+  -d '{"jsonrpc":"2.0","id":1,"method":"tools/list","params":{}}'
+```
+
+## Visual Studio / GitHub Copilot Setup
+
+### Configuration
+
+Add this to your MCP configuration file (location depends on your IDE):
+
+```json
+{
+  "mcpServers": {
+    "figma2frida": {
+      "command": "node",
+      "args": [
+        "/absolute/path/to/figma2frida_mcp/dist/figma2frida.js",
+        "--pinecone-namespace",
+        "org01_proj01"
+      ]
+    }
+  }
+}
+```
+
+**Important**:
+- Use the **absolute path** to `dist/figma2frida.js`
+- Replace `org01_proj01` with your namespace
+- Make sure you've run `npm run build` first
+- The `.env` file should be in the project root
+
+### Restart Your IDE
+
+After adding the configuration, restart Visual Studio / GitHub Copilot to load the MCP server.
+
+## Available Tools
+
+- `figma_get_screenshot` - Get visual screenshot from Figma (fast)
+- `figma_get_design_context` - Get design data and generated code (with caching & streaming)
+- `figma_suggest_components` - Suggest design system components based on Figma design (with Pinecone & Frida AI)
+- `figma_improve_layout` - Trigger layout improvement to match Figma frame reference
+
+## Project Structure
+
+```
+figma2frida_mcp/
+├── src/
+│   └── figma2frida/
+│       ├── figma2frida.ts          # Main MCP server
+│       ├── clients/
+│       │   └── figma-client.ts     # Figma Desktop MCP client
+│       ├── handlers/
+│       │   └── component-suggestion-handler.ts
+│       ├── services/
+│       │   ├── component-lookup.ts
+│       │   ├── frida/
+│       │   │   └── frida-client.ts
+│       │   └── pinecone/
+│       │       └── pinecone-service.ts
+│       └── utils/
+│           ├── component-extractor.ts
+│           ├── design-query-extractor.ts
+│           └── formatters.ts
+├── dist/
+│   ├── figma2frida.js              # Built server (for production)
+│   └── figma2frida.d.ts
+├── run-local.sh                     # Local development script
+├── .env                             # Environment variables (create this)
+└── package.json
+```
+
+## Development
+
+### Build
+
+```bash
+npm run build
+```
+
+### Development Mode
+
+```bash
+npm run dev
+```
+
+## Publishing to npm
+
+```bash
+# Build first
+npm run build
+
+# Publish
+npm publish
+```
+
+After publishing, users can install globally:
+
+```bash
+npm install -g @fridaplatform-stk/figma2frida-mcp
+figma2frida-mcp --pinecone-namespace org01_proj01
+```
+
+## Troubleshooting
+
+### "Cannot find module 'fastmcp'"
+Run `npm install` to install dependencies.
+
+### "Figma MCP connection failed"
+Make sure Figma Desktop is running with MCP enabled at `http://127.0.0.1:3845/sse`.
+
+### "Pinecone namespace not found"
+Make sure you're passing `--pinecone-namespace` as an argument (not in `.env`).
+
+### Visual Studio can't find the MCP server
+- Check the absolute path is correct
+- Make sure `dist/figma2frida.js` exists (run `npm run build`)
+- Check Visual Studio's MCP logs for errors
+
+## License
+
+MIT
+
+## Author
+
+Frida Platform STK
+

package/dist/figma2frida.d.ts

@@ -0,0 +1 @@
+#!/usr/bin/env node