Add feature for write coments

.env.example

@@ -1,3 +1,10 @@
 # Figma Personal Access Token
 # Get yours at: https://www.figma.com/developers/api#access-tokens
+#
+# This token enables:
+# - Reading comments from Figma files
+# - Creating new comments
+# - Replying to existing comments
+#
+# Personal access tokens have read and write permissions by default
 FIGMA_ACCESS_TOKEN=your_figma_token_here

.npmignore

@@ -0,0 +1,33 @@
+# Development files
+.env
+.env.local
+.env.*.local
+node_modules/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+*.code-workspace
+.claude/
+
+# Git
+.git/
+.gitignore
+
+# Tests
+test/
+tests/
+*.test.js
+*.spec.js
+
+# Documentation
+QUICKSTART.md
+docs/
+
+# Config files
+claude_desktop_config.json

CHANGELOG.md

@@ -0,0 +1,43 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [1.1.0] - 2025-10-26
+
+### Added
+- ✨ **Write capabilities**: Create new comments in Figma files
+- ✨ **Reply to comments**: Respond to existing comments maintaining conversation threads
+- 📝 New tool: `post_figma_comment` - Create comments with optional location (node_id, coordinates)
+- 📝 New tool: `reply_to_figma_comment` - Reply to existing comments by ID
+- 📚 FEATURES.md - Complete documentation of read and write capabilities
+- 🔒 Permission documentation in README and QUICKSTART
+- 📊 Visual table showing all 4 available tools (2 read, 2 write)
+
+### Changed
+- 📖 Updated README with comprehensive examples for write operations
+- 📖 Enhanced QUICKSTART with examples of creating and replying to comments
+- 📖 Improved troubleshooting section with write permission requirements
+- 🏷️ Updated package description to reflect read/write capabilities
+
+### Documentation
+- Added clear distinction between read and write operations
+- Added permission requirements for each operation type
+- Added AI-powered workflow examples
+- Added combined read/write use cases
+
+## [1.0.0] - 2025-10-25
+
+### Added
+- 🎉 Initial release
+- 📖 Read comments from Figma files
+- 📊 Generate comment summaries and statistics
+- 🔧 Two tools: `get_figma_comments` and `summarize_figma_comments`
+- 📚 Complete documentation (README, QUICKSTART)
+- 🔐 Environment-based authentication
+- 🏗️ MCP SDK integration
+
+[1.1.0]: https://github.com/cloudframework-io/mcp-figma-comment-summary/compare/v1.0.0...v1.1.0
+[1.0.0]: https://github.com/cloudframework-io/mcp-figma-comment-summary/releases/tag/v1.0.0

FEATURES.md

@@ -0,0 +1,182 @@
+# Funcionalidades Completas
+
+Este servidor MCP proporciona **lectura y escritura completa** de comentarios en Figma.
+
+## Operaciones de Lectura
+
+### 1. Obtener Comentarios (`get_figma_comments`)
+
+Lee todos los comentarios de un archivo de Figma con información completa:
+
+- ✅ Texto del comentario
+- ✅ Información del autor (nombre, avatar)
+- ✅ Fecha y hora de creación
+- ✅ Ubicación en el diseño (coordenadas y nodo)
+- ✅ Estado de resolución
+- ✅ Hilos completos de respuestas
+
+**Ejemplo de uso:**
+```
+"Muéstrame todos los comentarios del archivo ABC123"
+"¿Cuántos comentarios sin resolver hay en el archivo XYZ?"
+```
+
+### 2. Resumir Comentarios (`summarize_figma_comments`)
+
+Genera estadísticas y análisis automático:
+
+- ✅ Total de comentarios y respuestas
+- ✅ Comentarios resueltos vs sin resolver
+- ✅ Agrupación por autor
+- ✅ Agrupación por ubicación (elementos del diseño)
+- ✅ Vista previa de cada comentario
+
+**Ejemplo de uso:**
+```
+"Dame un resumen de la actividad de comentarios en ABC123"
+"¿Quién ha comentado más en este archivo?"
+```
+
+## Operaciones de Escritura
+
+### 3. Crear Comentarios (`post_figma_comment`)
+
+Crea nuevos comentarios en archivos de Figma con opciones avanzadas:
+
+- ✅ Comentarios generales en el archivo
+- ✅ Comentarios en elementos específicos (usando node_id)
+- ✅ Comentarios en coordenadas exactas (x, y)
+- ✅ Comentarios con ubicación combinada (nodo + coordenadas)
+
+**Ejemplos de uso:**
+
+**Comentario general:**
+```
+"Añade un comentario en ABC123 diciendo 'Diseño aprobado para producción'"
+```
+
+**Comentario en un elemento específico:**
+```
+"Comenta en el nodo 123:456 del archivo ABC: 'Este botón necesita más contraste'"
+```
+
+**Comentario en coordenadas:**
+```
+"Añade un comentario en la posición x:100, y:200 del archivo ABC: 'Revisar espaciado aquí'"
+```
+
+### 4. Responder a Comentarios (`reply_to_figma_comment`)
+
+Responde a comentarios existentes manteniendo los hilos organizados:
+
+- ✅ Responder a cualquier comentario por su ID
+- ✅ Mantener conversaciones en hilos
+- ✅ Respuestas múltiples coordinadas por IA
+
+**Ejemplos de uso:**
+
+**Respuesta simple:**
+```
+"Responde al comentario 789 en ABC123: 'Buen punto, lo cambiaré'"
+```
+
+**Respuestas en lote:**
+```
+"Responde a todos los comentarios sin resolver en ABC123 diciendo que estás trabajando en ello"
+```
+
+**Respuestas inteligentes:**
+```
+"Revisa los comentarios de 'usuario123' y responde apropiadamente a cada uno"
+```
+
+## Casos de Uso Combinados
+
+### Análisis y Respuesta Automática
+
+```
+"Obtén todos los comentarios de ABC123, identifica los que requieren acción inmediata, y responde confirmando que los revisarás"
+```
+
+### Revisión Asistida por IA
+
+```
+"Analiza el diseño y los comentarios existentes en ABC123, luego añade comentarios constructivos adicionales"
+```
+
+### Gestión de Comentarios
+
+```
+"Encuentra todos los comentarios de hace más de una semana en ABC123 y añade un comentario general resumiendo el progreso"
+```
+
+### Coordinación de Equipo
+
+```
+"Responde a los comentarios de 'juan' en ABC123 confirmando los cambios, y añade un comentario general notificando que está listo para review"
+```
+
+## Permisos Requeridos
+
+### Para Lectura
+- Acceso de **lectura** al archivo de Figma
+- Token con permisos básicos
+
+### Para Escritura
+- Acceso de **edición** al archivo de Figma
+- Token con permisos de escritura (incluido por defecto en tokens personales)
+- Ser miembro del equipo o tener acceso explícito al archivo
+
+## Limitaciones
+
+- No se pueden eliminar comentarios (limitación de la API de Figma)
+- No se pueden marcar comentarios como resueltos directamente (limitación de la API)
+- Los comentarios deben tener al menos 1 carácter
+- Los node_id deben existir en el archivo
+
+## Seguridad
+
+- Cada usuario usa su propio token de Figma
+- Los comentarios se crean con tu identidad de usuario
+- Todos los comentarios quedan registrados en el historial de Figma
+- No se comparten tokens entre usuarios
+
+## Ejemplos Avanzados
+
+### Workflow de Revisión Completa
+
+1. **Análisis inicial:**
+   ```
+   "Dame un resumen completo de los comentarios en ABC123"
+   ```
+
+2. **Identificar problemas:**
+   ```
+   "¿Qué comentarios mencionan problemas de accesibilidad?"
+   ```
+
+3. **Responder coordinadamente:**
+   ```
+   "Responde a esos comentarios diciendo que se implementarán en el siguiente sprint"
+   ```
+
+4. **Documentar decisiones:**
+   ```
+   "Añade un comentario general resumiendo las decisiones tomadas hoy"
+   ```
+
+### Colaboración con IA
+
+```
+"Revisa los comentarios en ABC123, extrae action items, créame un resumen, y añade un comentario en Figma con ese resumen"
+```
+
+### Automatización de Feedback
+
+```
+"Cada vez que encuentres comentarios sobre accesibilidad en ABC123, responde con las guías de WCAG relevantes"
+```
+
+---
+
+**Nota:** Este MCP es especialmente potente cuando se combina con las capacidades de análisis de Claude, permitiendo workflows de diseño más eficientes y colaborativos.

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 CloudFramework
+
+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.

PUBLISHING_GUIDE.md

@@ -0,0 +1,293 @@
+# 📦 Guía de Publicación - mcp-figma-comment-summary
+
+Esta guía te llevará paso a paso por el proceso de publicar tu MCP en npm y documentarlo en Hugging Face.
+
+## ✅ Pre-requisitos
+
+Antes de publicar, asegúrate de tener:
+
+- [ ] Cuenta en [npmjs.com](https://www.npmjs.com/)
+- [ ] Cuenta en [huggingface.co](https://huggingface.co/) (opcional)
+- [ ] Git configurado con tu repositorio (opcional pero recomendado)
+- [ ] Node.js 18+ instalado
+
+## 📋 Checklist de Archivos
+
+Verifica que tienes estos archivos:
+
+- [ ] `package.json.new` - Nueva versión del package.json
+- [ ] `README.npm.md` - README optimizado para npm
+- [ ] `README.huggingface.md` - README para Hugging Face
+- [ ] `.npmignore` - Archivos a excluir de npm
+- [ ] `index.js` - Tu código principal
+- [ ] `.env.example` - Ejemplo de variables de entorno
+- [ ] `LICENSE` - Licencia MIT
+
+## 🚀 Paso 1: Preparar el Repositorio Git (Opcional)
+
+### 1.1 Crear repositorio en GitHub
+
+Si aún no tienes un repositorio:
+
+1. Ve a https://github.com/new
+2. Nombre: `mcp-figma-comment-summary`
+3. Descripción: "MCP server to retrieve and summarize Figma file comments"
+4. Público
+5. **No** inicialices con README (ya lo tienes)
+
+### 1.2 Conectar tu proyecto local
+
+```bash
+cd /Users/fran/Documents/IN/Labs/mcp-figma-comment-summary
+
+# Si no tienes git inicializado
+git init
+
+# Añade el remote (reemplaza con tu usuario/organización)
+git remote add origin https://github.com/cloudframework-io/mcp-figma-comment-summary.git
+
+# O si usas otro usuario:
+# git remote add origin https://github.com/TU-USUARIO/mcp-figma-comment-summary.git
+```
+
+### 1.3 Commit y push
+
+```bash
+# Añade todos los archivos
+git add .
+
+# Commit
+git commit -m "Initial release v1.0.0"
+
+# Push
+git branch -M main
+git push -u origin main
+```
+
+## 📦 Paso 2: Publicar en npm
+
+### 2.1 Actualizar package.json
+
+```bash
+cd /Users/fran/Documents/IN/Labs/mcp-figma-comment-summary
+
+# Backup del original
+cp package.json package.json.backup
+
+# Usar el nuevo
+cp package.json.new package.json
+
+# O si prefieres renombrar:
+# mv package.json package.json.backup
+# mv package.json.new package.json
+```
+
+**IMPORTANTE**: Si usas un repositorio diferente a `cloudframework-io`, edita `package.json` y actualiza la URL del repositorio antes de publicar.
+
+### 2.2 Preparar README para npm
+
+```bash
+# Copia el README optimizado para npm
+cp README.npm.md README.md
+```
+
+### 2.3 Login en npm
+
+```bash
+npm login
+```
+
+Te pedirá:
+- Username
+- Password
+- Email
+- OTP (si tienes 2FA activado)
+
+### 2.4 Verificar antes de publicar
+
+```bash
+# Dry run para ver qué se publicará
+npm publish --dry-run
+```
+
+Revisa la salida para asegurarte de que:
+- Solo se incluyen los archivos necesarios
+- No se incluyen archivos sensibles (.env)
+- El tamaño del paquete es razonable
+
+### 2.5 Publicar
+
+```bash
+# Publica en npm
+npm publish --access public
+```
+
+Si todo va bien, verás un mensaje como:
+```
++ [email protected]
+```
+
+### 2.6 Verificar publicación
+
+1. Ve a https://www.npmjs.com/package/mcp-figma-comment-summary
+2. Verifica que aparece tu paquete
+3. Revisa que el README se ve correctamente
+4. Comprueba que la versión es la correcta
+
+## 🤗 Paso 3: Documentar en Hugging Face (Opcional)
+
+### 3.1 Crear un nuevo Model
+
+1. Ve a https://huggingface.co/new
+2. Selecciona "Model" (no Space ni Dataset)
+3. Owner: Tu usuario o organización
+4. Model name: `mcp-figma-comment-summary`
+5. License: MIT
+6. Haz clic en "Create model"
+
+### 3.2 Subir el README
+
+**Opción A: Desde la web**
+1. En tu nuevo modelo, haz clic en "Files and versions"
+2. Haz clic en "Add file" → "Create a new file"
+3. Nombre: `README.md`
+4. Copia el contenido de `README.huggingface.md`
+5. Pega el contenido
+6. Haz clic en "Commit new file"
+
+**Opción B: Desde Git**
+```bash
+# En tu proyecto
+cd /Users/fran/Documents/IN/Labs/mcp-figma-comment-summary
+
+# Clone el repo de HF
+git clone https://huggingface.co/TU-USUARIO/mcp-figma-comment-summary hf-model
+
+cd hf-model
+
+# Copia el README
+cp ../README.huggingface.md README.md
+
+# Commit y push
+git add README.md
+git commit -m "Add model card"
+git push
+```
+
+### 3.3 Verificar Model Card
+
+Ve a tu modelo en Hugging Face y verifica que:
+- El README se muestra correctamente
+- Los tags aparecen (mcp, model-context-protocol, figma, etc.)
+- El emoji y colores se ven bien
+
+## 🎉 Paso 4: Verificar que Todo Funciona
+
+### 4.1 Probar instalación con npx
+
+```bash
+# En un directorio temporal
+cd /tmp
+npx -y mcp-figma-comment-summary
+```
+
+Deberías ver un mensaje indicando que el servidor MCP está corriendo.
+
+### 4.2 Probar en Claude Desktop
+
+1. Actualiza tu `claude_desktop_config.json`:
+```json
+{
+  "mcpServers": {
+    "figma-comments": {
+      "command": "npx",
+      "args": ["-y", "mcp-figma-comment-summary"],
+      "env": {
+        "FIGMA_ACCESS_TOKEN": "tu_token_aqui"
+      }
+    }
+  }
+}
+```
+
+2. Reinicia Claude Desktop completamente
+3. Verifica que aparece el servidor
+4. Prueba las herramientas con un file ID real
+
+## 📢 Paso 5: Promoción (Opcional)
+
+### 5.1 Añadir a colecciones de MCP
+
+Considera enviar un PR a estas listas:
+- [Awesome MCP Servers](https://github.com/punkpeye/awesome-mcp-servers)
+- [MCP Directory](https://github.com/modelcontextprotocol/servers)
+
+### 5.2 Compartir en redes
+
+Ejemplo de post:
+
+```
+🎉 Just published mcp-figma-comment-summary!
+
+A Model Context Protocol server that lets Claude Desktop analyze Figma comments:
+- Retrieve all comments from any Figma file
+- Generate smart summaries by author & location
+- Track resolution status
+
+Install with: npx -y mcp-figma-comment-summary
+
+📦 npm: https://www.npmjs.com/package/mcp-figma-comment-summary
+🤗 HF: https://huggingface.co/TU-USUARIO/mcp-figma-comment-summary
+
+#MCP #Claude #Figma #AI
+```
+
+## 🔄 Actualizaciones Futuras
+
+Cuando hagas cambios:
+
+```bash
+# 1. Actualiza la versión en package.json
+npm version patch  # para bug fixes (1.0.0 → 1.0.1)
+npm version minor  # para nuevas features (1.0.0 → 1.1.0)
+npm version major  # para breaking changes (1.0.0 → 2.0.0)
+
+# 2. Commit y push (si usas git)
+git push && git push --tags
+
+# 3. Publica en npm
+npm publish
+
+# 4. Actualiza el README en HF si es necesario
+```
+
+## ❓ Solución de Problemas
+
+### Error: "You need to authorize this machine"
+```bash
+npm login
+```
+
+### Error: "Package name already exists"
+El nombre está tomado. Elige otro en package.json.
+
+### Error: "Failed to publish"
+- Verifica que no estés publicando archivos sensibles (.env)
+- Revisa tu .npmignore
+- Asegúrate de estar logueado: `npm whoami`
+
+### El README no se ve bien en npm
+- Asegúrate de que README.md existe antes de publicar
+- npm solo lee README.md, no README.npm.md
+
+### "FIGMA_ACCESS_TOKEN environment variable is required"
+Este error es normal si ejecutas el servidor sin el token. Los usuarios necesitarán configurar su propio token.
+
+## 📝 Notas Finales
+
+- **Versión inicial**: 1.0.0
+- **Próximas versiones**: Usa `npm version` para actualizar
+- **License**: MIT (ya configurada)
+- **Repositorio**: Actualiza la URL en package.json si usas uno diferente
+
+¡Éxito con tu publicación! 🚀

QUICKSTART.md

@@ -6,6 +6,8 @@
 2. Haz clic en "Get personal access token"
 3. Copia el token generado
 
+**Nota:** Los tokens personales de Figma tienen permisos de lectura y escritura por defecto, lo que te permite tanto leer como crear comentarios.
+
 ## Paso 2: Crear archivo .env
 
 ```bash
@@ -66,10 +68,16 @@ En Claude Desktop, escribe:
 ¿Qué herramientas tienes disponibles?
 ```
 
-Deberías ver `get_figma_comments` y `summarize_figma_comments` en la lista.
+Deberías ver estas herramientas en la lista:
+- `get_figma_comments`
+- `summarize_figma_comments`
+- `post_figma_comment`
+- `reply_to_figma_comment`
 
 ## Uso básico
 
+### Leer comentarios
+
 Para obtener comentarios de un archivo de Figma:
 
 ```
@@ -78,6 +86,22 @@ Obtén los comentarios del archivo de Figma: ABC123XYZ
 
 Donde `ABC123XYZ` es el ID del archivo (sacado de la URL de Figma).
 
+### Crear comentarios
+
+Para crear un nuevo comentario:
+
+```
+Crea un comentario en el archivo ABC123XYZ diciendo "Esto se ve genial!"
+```
+
+### Responder a comentarios
+
+Para responder a un comentario existente:
+
+```
+Responde al comentario 789 en el archivo ABC123XYZ: "Estoy de acuerdo"
+```
+
 ## ¿Problemas?
 
 Revisa el archivo `README.md` para solución de problemas detallada.

README.backup.md

@@ -0,0 +1,229 @@
+# Figma Comment Summary MCP Server
+
+Un servidor MCP (Model Context Protocol) que permite a Claude Desktop recuperar y analizar comentarios de archivos de Figma.
+
+## Características
+
+- Recupera todos los comentarios de un archivo de Figma específico
+- Extrae información completa: texto, autor, timestamp, ubicación y hilos de respuestas
+- Genera resúmenes automáticos con estadísticas por autor, ubicación y estado de resolución
+- Compatible con Claude Desktop y cualquier cliente MCP
+
+## Herramientas Disponibles
+
+### 1. `get_figma_comments`
+Recupera todos los comentarios de un archivo de Figma con información detallada.
+
+**Parámetros:**
+- `file_id` (string, requerido): El ID del archivo de Figma
+
+**Retorna:**
+```json
+[
+  {
+    "id": "comment_id",
+    "message": "Texto del comentario",
+    "author": {
+      "id": "user_id",
+      "handle": "username",
+      "img_url": "avatar_url"
+    },
+    "timestamp": "2024-01-01T00:00:00Z",
+    "resolvedAt": null,
+    "location": {
+      "node_id": "node_id",
+      "node_offset": {"x": 0, "y": 0},
+      "x": 100,
+      "y": 200
+    },
+    "replies": [
+      {
+        "id": "reply_id",
+        "message": "Respuesta al comentario",
+        "author": {...},
+        "timestamp": "2024-01-01T01:00:00Z"
+      }
+    ]
+  }
+]
+```
+
+### 2. `summarize_figma_comments`
+Genera un resumen y análisis de todos los comentarios del archivo.
+
+**Parámetros:**
+- `file_id` (string, requerido): El ID del archivo de Figma
+
+**Retorna:**
+```json
+{
+  "summary": {
+    "total_comments": 10,
+    "total_replies": 5,
+    "resolved": 3,
+    "unresolved": 7
+  },
+  "by_author": {
+    "username1": {"comments": 5, "replies": 2},
+    "username2": {"comments": 5, "replies": 3}
+  },
+  "by_location": {
+    "node_id_1": 3,
+    "node_id_2": 7
+  },
+  "comments": [...]
+}
+```
+
+## Instalación
+
+### 1. Clonar o copiar este proyecto
+
+```bash
+cd /Users/fran/Documents/IN/Labs/mcp-figma-comment-summary
+```
+
+### 2. Instalar dependencias
+
+```bash
+npm install
+```
+
+### 3. Configurar el token de Figma
+
+1. Obtén tu Personal Access Token de Figma:
+   - Ve a https://www.figma.com/developers/api#access-tokens
+   - Haz clic en "Get personal access token"
+   - Copia el token generado
+
+2. Crea un archivo `.env` en la raíz del proyecto:
+
+```bash
+cp .env.example .env
+```
+
+3. Edita `.env` y añade tu token:
+
+```
+FIGMA_ACCESS_TOKEN=tu_token_aqui
+```
+
+### 4. Configurar Claude Desktop
+
+Edita el archivo de configuración de Claude Desktop:
+
+**En macOS:** `~/Library/Application Support/Claude/claude_desktop_config.json`
+
+**En Windows:** `%APPDATA%/Claude/claude_desktop_config.json`
+
+Añade la siguiente configuración:
+
+```json
+{
+  "mcpServers": {
+    "figma-comments": {
+      "command": "node",
+      "args": ["/Users/fran/Documents/IN/Labs/mcp-figma-comment-summary/index.js"],
+      "env": {
+        "FIGMA_ACCESS_TOKEN": "tu_token_de_figma_aqui"
+      }
+    }
+  }
+}
+```
+
+**Importante:** Reemplaza `/Users/fran/Documents/IN/Labs/mcp-figma-comment-summary` con la ruta absoluta a este proyecto en tu sistema.
+
+### 5. Reiniciar Claude Desktop
+
+Cierra completamente Claude Desktop y vuelve a abrirlo para que cargue el nuevo servidor MCP.
+
+## Uso
+
+Una vez configurado, puedes usar las herramientas en Claude Desktop:
+
+### Ejemplo 1: Obtener todos los comentarios
+
+```
+Por favor, obtén todos los comentarios del archivo de Figma con ID: ABC123XYZ
+```
+
+Claude usará automáticamente la herramienta `get_figma_comments` y te mostrará todos los comentarios.
+
+### Ejemplo 2: Obtener resumen
+
+```
+Dame un resumen de los comentarios del archivo ABC123XYZ
+```
+
+Claude usará `summarize_figma_comments` y te mostrará estadísticas y un análisis.
+
+### Ejemplo 3: Análisis con IA
+
+```
+Analiza los comentarios del archivo ABC123XYZ y dime cuáles son los problemas más comunes mencionados
+```
+
+Claude obtendrá los comentarios y realizará un análisis inteligente del contenido.
+
+## Cómo obtener el File ID de Figma
+
+El File ID se encuentra en la URL del archivo de Figma:
+
+```
+https://www.figma.com/file/ABC123XYZ/nombre-del-archivo
+                          ↑
+                    Este es el File ID
+```
+
+## Verificar instalación
+
+Para verificar que el servidor está correctamente instalado:
+
+1. Abre Claude Desktop
+2. Busca el ícono de herramientas (🔧) en la interfaz
+3. Deberías ver "figma-comments" listado como servidor disponible
+4. Las herramientas `get_figma_comments` y `summarize_figma_comments` deberían aparecer
+
+## Desarrollo
+
+### Ejecutar en modo desarrollo
+
+```bash
+npm run dev
+```
+
+Esto ejecutará el servidor con auto-reload cuando hagas cambios.
+
+### Ejecutar directamente
+
+```bash
+npm start
+```
+
+## Solución de problemas
+
+### Error: "FIGMA_ACCESS_TOKEN environment variable is required"
+
+- Asegúrate de haber configurado el token en el archivo `.env` o en la configuración de Claude Desktop
+- Verifica que el token sea válido en https://www.figma.com/developers/api
+
+### El servidor no aparece en Claude Desktop
+
+- Verifica que la ruta en `claude_desktop_config.json` sea correcta y absoluta
+- Asegúrate de haber reiniciado Claude Desktop completamente
+- Revisa los logs de Claude Desktop para errores
+
+### Error al obtener comentarios
+
+- Verifica que el File ID sea correcto
+- Asegúrate de tener permisos de acceso al archivo de Figma
+- El token debe tener permisos de lectura en el archivo
+
+## Licencia
+
+MIT
+
+## Contribuciones
+
+Las contribuciones son bienvenidas. Por favor, abre un issue o pull request.

README.huggingface.md

@@ -0,0 +1,171 @@
+---
+title: Figma Comment Summary MCP
+emoji: 💬
+colorFrom: purple
+colorTo: blue
+sdk: static
+pinned: false
+tags:
+  - mcp
+  - model-context-protocol
+  - figma
+  - comments
+  - design
+  - collaboration
+  - claude
+license: mit
+---
+
+# 💬 Figma Comment Summary MCP Server
+
+A [Model Context Protocol](https://modelcontextprotocol.io/) server that enables LLMs like Claude to **read, write, and analyze** comments in Figma files. Perfect for design review workflows, team collaboration analysis, and automated comment management.
+
+## 🎯 Capabilities
+
+**📖 Read Operations:**
+- Retrieve all comments with full details (text, author, timestamp, location)
+- Generate automatic summaries and statistics
+
+**✍️ Write Operations:**
+- Create new comments anywhere in Figma files
+- Post comments on specific design elements
+- Reply to existing comment threads
+
+**🤖 AI-Powered Workflows:**
+- Auto-respond to design feedback
+- Analyze and summarize design discussions
+- Coordinate team reviews efficiently
+
+## 🚀 Quick Start
+
+This MCP server is published on npm and can be used directly with Claude Desktop or any MCP-compatible client using `npx`.
+
+### Installation
+
+Add this configuration to your Claude Desktop config file:
+
+**macOS:** `~/Library/Application Support/Claude/claude_desktop_config.json`  
+**Windows:** `%APPDATA%/Claude/claude_desktop_config.json`
+
+```json
+{
+  "mcpServers": {
+    "figma-comments": {
+      "command": "npx",
+      "args": ["-y", "mcp-figma-comment-summary"],
+      "env": {
+        "FIGMA_ACCESS_TOKEN": "your_figma_token_here"
+      }
+    }
+  }
+}
+```
+
+**Important:** 
+- Replace `your_figma_token_here` with your [Figma Personal Access Token](https://developers.figma.com/docs/rest-api/authentication/#access-tokens)
+- Each user needs their own token (secure and private)
+- Restart Claude Desktop after updating the configuration
+
+## ✨ Features
+
+- 📝 **Retrieve Comments**: Get all comments from any Figma file with full details
+- 👥 **Author Information**: Extract author data, timestamps, and reply threads
+- 📊 **Smart Summaries**: Generate statistics by author, location, and resolution status
+- 🔧 **Easy Integration**: Works with Claude Desktop and any MCP client
+- 🔒 **Secure**: Each user uses their own Figma token
+
+## 🛠️ Available Tools
+
+### `get_figma_comments`
+
+Retrieve all comments from a Figma file with complete information including text, authors, timestamps, locations, and reply threads.
+
+**Parameters:**
+- `file_id` (string): The Figma file ID from the URL
+
+**Example:**
+```
+Get all comments from Figma file ABC123XYZ
+```
+
+### `summarize_figma_comments`
+
+Generate a comprehensive summary and analysis of all comments in a Figma file.
+
+**Parameters:**
+- `file_id` (string): The Figma file ID from the URL
+
+**Example:**
+```
+Summarize the comments from Figma file ABC123XYZ
+```
+
+## 📖 Use Cases
+
+- **Design Reviews**: Quickly gather all feedback from stakeholders
+- **Team Collaboration**: Analyze comment patterns and identify bottlenecks
+- **Comment Management**: Track unresolved comments and resolution status
+- **Reporting**: Generate summaries for design sprint retrospectives
+- **AI Analysis**: Let Claude analyze sentiment and extract action items
+
+## 💡 Example Conversations
+
+Once installed, you can ask Claude:
+
+```
+"Get all comments from Figma file ABC123 and tell me which ones are unresolved"
+
+"Summarize the feedback on file XYZ123 and identify common themes"
+
+"Show me all comments by username 'john' in file ABC123"
+
+"Which design elements in file XYZ have the most comments?"
+```
+
+## 🔍 Finding Your Figma File ID
+
+The File ID is in your Figma file URL:
+
+```
+https://www.figma.com/file/ABC123XYZ/file-name
+                          ↑
+                    This is the File ID
+```
+
+## 📦 Installation from npm
+
+```bash
+npm install -g mcp-figma-comment-summary
+```
+
+Or use directly with `npx` (recommended):
+
+```bash
+npx -y mcp-figma-comment-summary
+```
+
+## 🔗 Links
+
+- **npm Package**: [mcp-figma-comment-summary](https://www.npmjs.com/package/mcp-figma-comment-summary)
+- **GitHub Repository**: [IgnorantesNaturales/mcp-figma-comment-summary](https://github.com/IgnorantesNaturales/mcp-figma-comment-summary)
+- **Model Context Protocol**: [modelcontextprotocol.io](https://modelcontextprotocol.io/)
+- **Figma API**: [Figma Developers](https://www.figma.com/developers/api)
+
+## 🤝 Contributing
+
+Contributions are welcome! Please visit the [GitHub repository](https://github.com/IgnorantesNaturales/mcp-figma-comment-summary) to contribute.
+
+## 📄 License
+
+MIT License - see the [LICENSE](https://github.com/IgnorantesNaturales/mcp-figma-comment-summary/blob/main/LICENSE) file for details.
+
+## 🙋 Support
+
+If you encounter issues:
+- Check the [Troubleshooting Guide](https://github.com/IgnorantesNaturales/mcp-figma-comment-summary#troubleshooting)
+- Open an issue on [GitHub](https://github.com/IgnorantesNaturales/mcp-figma-comment-summary/issues)
+- Review the [Figma API documentation](https://www.figma.com/developers/api)
+
+---
+
+Made with ❤️ for the MCP community

README.md

@@ -1,28 +1,117 @@
-# Figma Comment Summary MCP Server
+# mcp-figma-comment-summary
 
-Un servidor MCP (Model Context Protocol) que permite a Claude Desktop recuperar y analizar comentarios de archivos de Figma.
+> MCP server to retrieve, analyze, and create Figma file comments with Claude Desktop
 
-## Características
+[![npm version](https://img.shields.io/npm/v/mcp-figma-comment-summary.svg)](https://www.npmjs.com/package/mcp-figma-comment-summary)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 
-- Recupera todos los comentarios de un archivo de Figma específico
-- Extrae información completa: texto, autor, timestamp, ubicación y hilos de respuestas
-- Genera resúmenes automáticos con estadísticas por autor, ubicación y estado de resolución
-- Compatible con Claude Desktop y cualquier cliente MCP
+A [Model Context Protocol](https://modelcontextprotocol.io/) server that enables Claude Desktop to retrieve, analyze, and create comments in Figma files. Perfect for design review workflows, team collaboration analysis, and comment management.
 
-## Herramientas Disponibles
+## 🎯 What Can This Do?
+
+This MCP gives Claude **full read and write access** to Figma comments:
+
+**📖 Reading:**
+- Get all comments from any Figma file
+- View authors, timestamps, locations, and reply threads
+- Generate automatic summaries and statistics
+
+**✍️ Writing:**
+- Create new comments anywhere in a Figma file
+- Post comments on specific design elements (nodes)
+- Reply to existing comments to maintain conversations
+- Let Claude intelligently respond to feedback
+
+**🤖 AI-Powered Workflows:**
+- Analyze designs and post constructive feedback
+- Automatically respond to comment threads
+- Summarize feedback for team meetings
+- Coordinate reviews across multiple stakeholders
+
+## Features
+
+- 📝 Retrieve all comments from any Figma file with full details
+- ✍️ Create new comments and reply to existing ones
+- 👥 Extract author information, timestamps, and reply threads
+- 📊 Generate automatic summaries with statistics by author, location, and resolution status
+- 📍 Post comments to specific locations (nodes or coordinates)
+- 🔧 Easy integration with Claude Desktop and any MCP client
+- 🔒 Each user uses their own Figma token (secure and private)
+
+## Quick Start
+
+### Prerequisites
+
+- Node.js 18 or higher
+- A [Figma Personal Access Token](https://www.figma.com/developers/api#access-tokens)
+- Claude Desktop or any MCP-compatible client
+
+### Installation
+
+Add this to your Claude Desktop configuration file:
+
+**macOS:** `~/Library/Application Support/Claude/claude_desktop_config.json`  
+**Windows:** `%APPDATA%/Claude/claude_desktop_config.json`
+
+```json
+{
+  "mcpServers": {
+    "figma-comments": {
+      "command": "npx",
+      "args": ["-y", "mcp-figma-comment-summary"],
+      "env": {
+        "FIGMA_ACCESS_TOKEN": "your_figma_token_here"
+      }
+    }
+  }
+}
+```
+
+**Important:** Replace `your_figma_token_here` with your actual Figma Personal Access Token.
+
+### Getting Your Figma Token
+
+1. Go to [Figma Settings → Account](https://www.figma.com/settings)
+2. Scroll to "Personal access tokens"
+3. Click "Generate new token"
+4. Give it a name and copy the token
+5. Paste it in the configuration above
+
+### Restart Claude Desktop
+
+After updating the configuration, completely quit and restart Claude Desktop to load the MCP server.
+
+## Available Tools
+
+This MCP provides **4 tools** split into **read** and **write** operations:
+
+| Tool | Type | Description |
+|------|------|-------------|
+| `get_figma_comments` | 📖 Read | Retrieve all comments with full details |
+| `summarize_figma_comments` | 📖 Read | Generate statistics and analysis |
+| `post_figma_comment` | ✍️ Write | Create new comments (general or on specific elements) |
+| `reply_to_figma_comment` | ✍️ Write | Reply to existing comments |
+
+---
 
 ### 1. `get_figma_comments`
-Recupera todos los comentarios de un archivo de Figma con información detallada.
 
-**Parámetros:**
-- `file_id` (string, requerido): El ID del archivo de Figma
+Retrieve all comments from a Figma file with complete information.
+
+**Parameters:**
+- `file_id` (string, required): The Figma file ID from the URL
+
+**Example usage in Claude:**
+```
+Get all comments from Figma file ABC123XYZ
+```
 
-**Retorna:**
+**Returns:**
 ```json
 [
   {
     "id": "comment_id",
-    "message": "Texto del comentario",
+    "message": "Comment text",
     "author": {
       "id": "user_id",
       "handle": "username",
@@ -32,29 +121,27 @@ Recupera todos los comentarios de un archivo de Figma con información detallada
     "resolvedAt": null,
     "location": {
       "node_id": "node_id",
-      "node_offset": {"x": 0, "y": 0},
       "x": 100,
       "y": 200
     },
-    "replies": [
-      {
-        "id": "reply_id",
-        "message": "Respuesta al comentario",
-        "author": {...},
-        "timestamp": "2024-01-01T01:00:00Z"
-      }
-    ]
+    "replies": [...]
   }
 ]
 ```
 
 ### 2. `summarize_figma_comments`
-Genera un resumen y análisis de todos los comentarios del archivo.
 
-**Parámetros:**
-- `file_id` (string, requerido): El ID del archivo de Figma
+Generate a summary and analysis of all comments in a Figma file.
 
-**Retorna:**
+**Parameters:**
+- `file_id` (string, required): The Figma file ID from the URL
+
+**Example usage in Claude:**
+```
+Summarize the comments from Figma file ABC123XYZ
+```
+
+**Returns:**
 ```json
 {
   "summary": {
@@ -64,166 +151,210 @@ Genera un resumen y análisis de todos los comentarios del archivo.
     "unresolved": 7
   },
   "by_author": {
-    "username1": {"comments": 5, "replies": 2},
-    "username2": {"comments": 5, "replies": 3}
+    "username1": {"comments": 5, "replies": 2}
   },
   "by_location": {
-    "node_id_1": 3,
-    "node_id_2": 7
+    "node_id_1": 3
   },
   "comments": [...]
 }
 ```
 
-## Instalación
+### 3. `post_figma_comment`
 
-### 1. Clonar o copiar este proyecto
+Create a new comment on a Figma file. Optionally specify a location where the comment should be placed.
 
-```bash
-cd /Users/fran/Documents/IN/Labs/mcp-figma-comment-summary
-```
+**Parameters:**
+- `file_id` (string, required): The Figma file ID from the URL
+- `message` (string, required): The text content of the comment
+- `node_id` (string, optional): The ID of the node/element to attach the comment to
+- `x` (number, optional): X coordinate for the comment position
+- `y` (number, optional): Y coordinate for the comment position
 
-### 2. Instalar dependencias
-
-```bash
-npm install
+**Example usage in Claude:**
 ```
+Post a comment on Figma file ABC123XYZ saying "This looks great!"
 
-### 3. Configurar el token de Figma
-
-1. Obtén tu Personal Access Token de Figma:
-   - Ve a https://www.figma.com/developers/api#access-tokens
-   - Haz clic en "Get personal access token"
-   - Copia el token generado
-
-2. Crea un archivo `.env` en la raíz del proyecto:
-
-```bash
-cp .env.example .env
+Add a comment to node 123:456 in file ABC123XYZ: "Please review this button"
 ```
 
-3. Edita `.env` y añade tu token:
-
-```
-FIGMA_ACCESS_TOKEN=tu_token_aqui
+**Returns:**
+```json
+{
+  "comment": {
+    "id": "new_comment_id",
+    "message": "This looks great!",
+    "created_at": "2024-01-01T00:00:00Z"
+  }
+}
 ```
 
-### 4. Configurar Claude Desktop
+### 4. `reply_to_figma_comment`
 
-Edita el archivo de configuración de Claude Desktop:
+Reply to an existing comment in a Figma file.
 
-**En macOS:** `~/Library/Application Support/Claude/claude_desktop_config.json`
+**Parameters:**
+- `file_id` (string, required): The Figma file ID from the URL
+- `comment_id` (string, required): The ID of the comment to reply to
+- `message` (string, required): The text content of the reply
 
-**En Windows:** `%APPDATA%/Claude/claude_desktop_config.json`
-
-Añade la siguiente configuración:
+**Example usage in Claude:**
+```
+Reply to comment 789 in file ABC123XYZ: "I agree with this feedback"
+```
 
+**Returns:**
 ```json
 {
-  "mcpServers": {
-    "figma-comments": {
-      "command": "node",
-      "args": ["/Users/fran/Documents/IN/Labs/mcp-figma-comment-summary/index.js"],
-      "env": {
-        "FIGMA_ACCESS_TOKEN": "tu_token_de_figma_aqui"
-      }
-    }
+  "comment": {
+    "id": "new_reply_id",
+    "message": "I agree with this feedback",
+    "parent_id": "789",
+    "created_at": "2024-01-01T00:00:00Z"
   }
 }
 ```
 
-**Importante:** Reemplaza `/Users/fran/Documents/IN/Labs/mcp-figma-comment-summary` con la ruta absoluta a este proyecto en tu sistema.
+## Finding the Figma File ID
+
+The File ID is in your Figma file URL:
 
-### 5. Reiniciar Claude Desktop
+```
+https://www.figma.com/file/ABC123XYZ/file-name
+                          ↑
+                    This is the File ID
+```
 
-Cierra completamente Claude Desktop y vuelve a abrirlo para que cargue el nuevo servidor MCP.
+## Use Cases
 
-## Uso
+- **Design Reviews:** Quickly gather all feedback and comments from stakeholders
+- **Automated Feedback:** Let Claude post comments based on design analysis
+- **Team Collaboration:** Analyze comment patterns and identify bottlenecks
+- **Comment Management:** Find unresolved comments and track resolution status
+- **Batch Responses:** Reply to multiple comments efficiently with AI assistance
+- **Reporting:** Generate summaries for design sprint retrospectives
+- **AI Analysis:** Let Claude analyze comment sentiment and extract action items
+- **Proactive Commenting:** Claude can suggest and post improvement suggestions
 
-Una vez configurado, puedes usar las herramientas en Claude Desktop:
+## Example Conversations with Claude
 
-### Ejemplo 1: Obtener todos los comentarios
+Once installed, you can ask Claude:
 
+**Reading comments:**
 ```
-Por favor, obtén todos los comentarios del archivo de Figma con ID: ABC123XYZ
-```
+"Get all comments from Figma file ABC123 and tell me which ones are unresolved"
 
-Claude usará automáticamente la herramienta `get_figma_comments` y te mostrará todos los comentarios.
+"Summarize the feedback on file XYZ123 and identify common themes"
 
-### Ejemplo 2: Obtener resumen
+"Show me all comments by username 'john' in file ABC123"
 
+"Which design elements in file XYZ have the most comments?"
 ```
-Dame un resumen de los comentarios del archivo ABC123XYZ
+
+**Writing comments:**
 ```
+"Post a comment on Figma file ABC123 saying 'Approved for development'"
 
-Claude usará `summarize_figma_comments` y te mostrará estadísticas y un análisis.
+"Reply to all unresolved comments in file XYZ123 asking for clarification"
 
-### Ejemplo 3: Análisis con IA
+"Add a comment to node 123:456 in file ABC: 'This button needs better contrast'"
 
+"Review all comments in file ABC123 and respond to the ones that need attention"
 ```
-Analiza los comentarios del archivo ABC123XYZ y dime cuáles son los problemas más comunes mencionados
+
+**Combined workflows:**
 ```
+"Get all unresolved comments from file ABC123, analyze them, and post a summary comment"
 
-Claude obtendrá los comentarios y realizará un análisis inteligente del contenido.
+"Find comments mentioning 'urgent' and reply with 'Working on this today'"
+```
 
-## Cómo obtener el File ID de Figma
+## Verification
 
-El File ID se encuentra en la URL del archivo de Figma:
+To verify the installation:
 
-```
-https://www.figma.com/file/ABC123XYZ/nombre-del-archivo
-                          ↑
-                    Este es el File ID
-```
+1. Open Claude Desktop
+2. Look for the tools icon (🔧) in the interface
+3. You should see "figma-comments" listed as an available server
+4. The following tools should appear:
+   - `get_figma_comments`
+   - `summarize_figma_comments`
+   - `post_figma_comment`
+   - `reply_to_figma_comment`
 
-## Verificar instalación
+## Troubleshooting
 
-Para verificar que el servidor está correctamente instalado:
+### "FIGMA_ACCESS_TOKEN environment variable is required"
 
-1. Abre Claude Desktop
-2. Busca el ícono de herramientas (🔧) en la interfaz
-3. Deberías ver "figma-comments" listado como servidor disponible
-4. Las herramientas `get_figma_comments` y `summarize_figma_comments` deberían aparecer
+- Ensure your token is correctly set in `claude_desktop_config.json`
+- Verify the token is valid at [Figma Settings](https://www.figma.com/settings)
 
-## Desarrollo
+### Server doesn't appear in Claude Desktop
 
-### Ejecutar en modo desarrollo
+- Check that the configuration file path is correct
+- Ensure you completely quit and restarted Claude Desktop (not just closed the window)
+- Check Claude Desktop logs for errors
 
-```bash
-npm run dev
-```
+### Error fetching comments
 
-Esto ejecutará el servidor con auto-reload cuando hagas cambios.
+- Verify the File ID is correct
+- Ensure you have access permissions to the Figma file
+- Your token must have read permissions for the file
 
-### Ejecutar directamente
+### Error posting or replying to comments
+
+- Ensure your token has **write permissions** (personal access tokens usually have both read and write by default)
+- Verify you have edit access to the Figma file
+- Check that the `node_id` exists if you're posting to a specific node
+- When replying, verify the `comment_id` is correct and exists
+
+### Permission requirements
+
+**Read operations** (`get_figma_comments`, `summarize_figma_comments`):
+- Requires read access to the Figma file
+- Token needs basic read permissions
+
+**Write operations** (`post_figma_comment`, `reply_to_figma_comment`):
+- Requires edit access to the Figma file
+- Token needs write permissions (usually enabled by default on personal access tokens)
+- You must be a member of the team or have been granted edit access to the file
+
+## Development
+
+To run the server locally for development:
 
 ```bash
-npm start
+git clone https://github.com/cloudframework-io/mcp-figma-comment-summary.git
+cd mcp-figma-comment-summary
+npm install
+npm run dev
 ```
 
-## Solución de problemas
+## Documentation
 
-### Error: "FIGMA_ACCESS_TOKEN environment variable is required"
+- [FEATURES.md](FEATURES.md) - Complete guide to all read and write capabilities
+- [QUICKSTART.md](QUICKSTART.md) - Quick installation guide in Spanish
 
-- Asegúrate de haber configurado el token en el archivo `.env` o en la configuración de Claude Desktop
-- Verifica que el token sea válido en https://www.figma.com/developers/api
+## Related Resources
 
-### El servidor no aparece en Claude Desktop
+- [Model Context Protocol Documentation](https://modelcontextprotocol.io/)
+- [Figma API Documentation](https://www.figma.com/developers/api)
+- [Claude Desktop](https://claude.ai/download)
 
-- Verifica que la ruta en `claude_desktop_config.json` sea correcta y absoluta
-- Asegúrate de haber reiniciado Claude Desktop completamente
-- Revisa los logs de Claude Desktop para errores
+## License
 
-### Error al obtener comentarios
+MIT
 
-- Verifica que el File ID sea correcto
-- Asegúrate de tener permisos de acceso al archivo de Figma
-- El token debe tener permisos de lectura en el archivo
+## Contributing
 
-## Licencia
+Contributions are welcome! Please feel free to submit a Pull Request.
 
-MIT
+## Support
+
+If you encounter any issues or have questions:
+- Open an issue on [GitHub](https://github.com/cloudframework-io/mcp-figma-comment-summary/issues)
+- Check the [Figma API documentation](https://www.figma.com/developers/api)
 
-## Contribuciones
+---
 
-Las contribuciones son bienvenidas. Por favor, abre un issue o pull request.
+Made with ❤️ for the MCP community

README.npm.md

@@ -0,0 +1,232 @@
+# mcp-figma-comment-summary
+
+> MCP server to retrieve, analyze, and create Figma file comments with Claude Desktop
+
+[![npm version](https://img.shields.io/npm/v/mcp-figma-comment-summary.svg)](https://www.npmjs.com/package/mcp-figma-comment-summary)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
+A [Model Context Protocol](https://modelcontextprotocol.io/) server that enables Claude Desktop to retrieve, analyze, and create comments in Figma files. Perfect for design review workflows, team collaboration analysis, and comment management.
+
+## 🎯 What Can This Do?
+
+This MCP gives Claude **full read and write access** to Figma comments:
+
+**📖 Reading:** Get comments, view authors/timestamps/locations, generate summaries
+**✍️ Writing:** Create new comments, reply to threads, post on specific elements
+**🤖 AI Workflows:** Auto-respond to feedback, analyze designs, coordinate reviews
+
+## Features
+
+- 📝 Retrieve all comments from any Figma file with full details
+- ✍️ Create new comments and reply to existing ones
+- 👥 Extract author information, timestamps, and reply threads
+- 📊 Generate automatic summaries with statistics by author, location, and resolution status
+- 📍 Post comments to specific locations (nodes or coordinates)
+- 🔧 Easy integration with Claude Desktop and any MCP client
+- 🔒 Each user uses their own Figma token (secure and private)
+
+## Quick Start
+
+### Prerequisites
+
+- Node.js 18 or higher
+- A [Figma Personal Access Token](https://www.figma.com/developers/api#access-tokens)
+- Claude Desktop or any MCP-compatible client
+
+### Installation
+
+Add this to your Claude Desktop configuration file:
+
+**macOS:** `~/Library/Application Support/Claude/claude_desktop_config.json`  
+**Windows:** `%APPDATA%/Claude/claude_desktop_config.json`
+
+```json
+{
+  "mcpServers": {
+    "figma-comments": {
+      "command": "npx",
+      "args": ["-y", "mcp-figma-comment-summary"],
+      "env": {
+        "FIGMA_ACCESS_TOKEN": "your_figma_token_here"
+      }
+    }
+  }
+}
+```
+
+**Important:** Replace `your_figma_token_here` with your actual Figma Personal Access Token.
+
+### Getting Your Figma Token
+
+1. Go to [Figma Settings → Account](https://www.figma.com/settings)
+2. Scroll to "Personal access tokens"
+3. Click "Generate new token"
+4. Give it a name and copy the token
+5. Paste it in the configuration above
+
+### Restart Claude Desktop
+
+After updating the configuration, completely quit and restart Claude Desktop to load the MCP server.
+
+## Available Tools
+
+### 1. `get_figma_comments`
+
+Retrieve all comments from a Figma file with complete information.
+
+**Parameters:**
+- `file_id` (string, required): The Figma file ID from the URL
+
+**Example usage in Claude:**
+```
+Get all comments from Figma file ABC123XYZ
+```
+
+**Returns:**
+```json
+[
+  {
+    "id": "comment_id",
+    "message": "Comment text",
+    "author": {
+      "id": "user_id",
+      "handle": "username",
+      "img_url": "avatar_url"
+    },
+    "timestamp": "2024-01-01T00:00:00Z",
+    "resolvedAt": null,
+    "location": {
+      "node_id": "node_id",
+      "x": 100,
+      "y": 200
+    },
+    "replies": [...]
+  }
+]
+```
+
+### 2. `summarize_figma_comments`
+
+Generate a summary and analysis of all comments in a Figma file.
+
+**Parameters:**
+- `file_id` (string, required): The Figma file ID from the URL
+
+**Example usage in Claude:**
+```
+Summarize the comments from Figma file ABC123XYZ
+```
+
+**Returns:**
+```json
+{
+  "summary": {
+    "total_comments": 10,
+    "total_replies": 5,
+    "resolved": 3,
+    "unresolved": 7
+  },
+  "by_author": {
+    "username1": {"comments": 5, "replies": 2}
+  },
+  "by_location": {
+    "node_id_1": 3
+  },
+  "comments": [...]
+}
+```
+
+## Finding the Figma File ID
+
+The File ID is in your Figma file URL:
+
+```
+https://www.figma.com/file/ABC123XYZ/file-name
+                          ↑
+                    This is the File ID
+```
+
+## Use Cases
+
+- **Design Reviews:** Quickly gather all feedback and comments from stakeholders
+- **Team Collaboration:** Analyze comment patterns and identify bottlenecks
+- **Comment Management:** Find unresolved comments and track resolution status
+- **Reporting:** Generate summaries for design sprint retrospectives
+- **AI Analysis:** Let Claude analyze comment sentiment and extract action items
+
+## Example Conversations with Claude
+
+Once installed, you can ask Claude:
+
+```
+"Get all comments from Figma file ABC123 and tell me which ones are unresolved"
+
+"Summarize the feedback on file XYZ123 and identify common themes"
+
+"Show me all comments by username 'john' in file ABC123"
+
+"Which design elements in file XYZ have the most comments?"
+```
+
+## Verification
+
+To verify the installation:
+
+1. Open Claude Desktop
+2. Look for the tools icon (🔧) in the interface
+3. You should see "figma-comments" listed as an available server
+4. The tools `get_figma_comments` and `summarize_figma_comments` should appear
+
+## Troubleshooting
+
+### "FIGMA_ACCESS_TOKEN environment variable is required"
+
+- Ensure your token is correctly set in `claude_desktop_config.json`
+- Verify the token is valid at [Figma Settings](https://www.figma.com/settings)
+
+### Server doesn't appear in Claude Desktop
+
+- Check that the configuration file path is correct
+- Ensure you completely quit and restarted Claude Desktop (not just closed the window)
+- Check Claude Desktop logs for errors
+
+### Error fetching comments
+
+- Verify the File ID is correct
+- Ensure you have access permissions to the Figma file
+- Your token must have read permissions for the file
+
+## Development
+
+To run the server locally for development:
+
+```bash
+git clone https://github.com/cloudframework-io/mcp-figma-comment-summary.git
+cd mcp-figma-comment-summary
+npm install
+npm run dev
+```
+
+## Related Resources
+
+- [Model Context Protocol Documentation](https://modelcontextprotocol.io/)
+- [Figma API Documentation](https://www.figma.com/developers/api)
+- [Claude Desktop](https://claude.ai/download)
+
+## License
+
+MIT
+
+## Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+## Support
+
+If you encounter any issues or have questions:
+- Open an issue on [GitHub](https://github.com/cloudframework-io/mcp-figma-comment-summary/issues)
+- Check the [Figma API documentation](https://www.figma.com/developers/api)
+
+---
+
+Made with ❤️ for the MCP community

START_HERE.md

@@ -0,0 +1,97 @@
+# 🎉 ¡Todo Listo para Publicar!
+
+He creado todos los archivos necesarios para publicar tu MCP en npm siguiendo la **Opción 3** (Stdio MCP vía npm).
+
+## ✅ Archivos Creados
+
+En tu proyecto `/Users/fran/Documents/IN/Labs/mcp-figma-comment-summary/` ahora tienes:
+
+### Configuración
+- ✅ **package.json.new** - package.json actualizado con toda la metadata
+- ✅ **.npmignore** - Excluye archivos innecesarios
+- ✅ **LICENSE** - Licencia MIT
+
+### Documentación
+- ✅ **README.npm.md** - README optimizado para npm
+- ✅ **README.huggingface.md** - Model Card para Hugging Face
+- ✅ **PUBLISHING_GUIDE.md** - Guía completa paso a paso
+
+## 🚀 Pasos para Publicar
+
+### 1. Actualizar package.json
+
+```bash
+cd /Users/fran/Documents/IN/Labs/mcp-figma-comment-summary
+
+# Backup
+cp package.json package.json.backup
+
+# Usar el nuevo
+cp package.json.new package.json
+```
+
+### 2. Preparar README
+
+```bash
+# Copiar el README para npm
+cp README.npm.md README.md
+```
+
+### 3. Login en npm
+
+```bash
+npm login
+```
+
+### 4. Verificar
+
+```bash
+# Ver qué se publicará
+npm publish --dry-run
+```
+
+### 5. Publicar
+
+```bash
+# Publicar en npm
+npm publish --access public
+```
+
+## 🎯 Después de Publicar
+
+Los usuarios podrán instalarlo así:
+
+```json
+{
+  "mcpServers": {
+    "figma-comments": {
+      "command": "npx",
+      "args": ["-y", "mcp-figma-comment-summary"],
+      "env": {
+        "FIGMA_ACCESS_TOKEN": "su_token_aqui"
+      }
+    }
+  }
+}
+```
+
+## 📖 Más Información
+
+Lee **PUBLISHING_GUIDE.md** para detalles completos sobre:
+- Cómo crear repositorio en GitHub
+- Cómo publicar en Hugging Face
+- Solución de problemas
+- Actualizaciones futuras
+
+## 🔑 Ventajas
+
+✅ **Sin servidor** - No necesitas hosting  
+✅ **Seguro** - Cada usuario usa su token  
+✅ **Fácil** - Solo npx para instalar  
+✅ **Zero costo** - Gratis para siempre  
+
+## 📝 Importante
+
+Si usas un repositorio diferente a `cloudframework-io`, actualiza la URL en `package.json` antes de publicar.
+
+¡Éxito! 🚀

index.js

@@ -79,6 +79,93 @@ async function getFigmaComments(fileId) {
   }
 }
 
+/**
+ * Post a new comment to a Figma file
+ * @param {string} fileId - The Figma file ID
+ * @param {string} message - The comment message text
+ * @param {Object} location - Optional location object with node_id or coordinates
+ * @returns {Promise<Object>} The created comment
+ */
+async function postFigmaComment(fileId, message, location = null) {
+  try {
+    const body = { message };
+
+    // Add location if provided
+    if (location) {
+      body.client_meta = {};
+
+      if (location.node_id) {
+        body.client_meta.node_id = location.node_id;
+
+        // Add node offset if provided
+        if (location.node_offset) {
+          body.client_meta.node_offset = location.node_offset;
+        }
+      }
+
+      // Add coordinates if provided
+      if (location.x !== undefined && location.y !== undefined) {
+        body.client_meta.x = location.x;
+        body.client_meta.y = location.y;
+      }
+    }
+
+    const response = await fetch(`${FIGMA_API_BASE}/files/${fileId}/comments`, {
+      method: 'POST',
+      headers: {
+        'X-Figma-Token': FIGMA_TOKEN,
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(body),
+    });
+
+    if (!response.ok) {
+      const errorData = await response.json().catch(() => ({}));
+      throw new Error(`Figma API error: ${response.status} ${response.statusText} - ${errorData.message || ''}`);
+    }
+
+    const data = await response.json();
+    return data;
+  } catch (error) {
+    throw new Error(`Failed to post Figma comment: ${error.message}`);
+  }
+}
+
+/**
+ * Reply to an existing Figma comment
+ * @param {string} fileId - The Figma file ID
+ * @param {string} commentId - The ID of the comment to reply to
+ * @param {string} message - The reply message text
+ * @returns {Promise<Object>} The created reply
+ */
+async function replyToFigmaComment(fileId, commentId, message) {
+  try {
+    const body = {
+      message,
+      comment_id: commentId,
+    };
+
+    const response = await fetch(`${FIGMA_API_BASE}/files/${fileId}/comments`, {
+      method: 'POST',
+      headers: {
+        'X-Figma-Token': FIGMA_TOKEN,
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(body),
+    });
+
+    if (!response.ok) {
+      const errorData = await response.json().catch(() => ({}));
+      throw new Error(`Figma API error: ${response.status} ${response.statusText} - ${errorData.message || ''}`);
+    }
+
+    const data = await response.json();
+    return data;
+  } catch (error) {
+    throw new Error(`Failed to reply to Figma comment: ${error.message}`);
+  }
+}
+
 /**
  * Generate a summary of comments
  * @param {Array} comments - Array of comment objects
@@ -142,7 +229,7 @@ function summarizeComments(comments) {
 const server = new Server(
   {
     name: 'mcp-figma-comment-summary',
-    version: '1.0.0',
+    version: '1.1.0',
   },
   {
     capabilities: {
@@ -183,6 +270,58 @@ server.setRequestHandler(ListToolsRequestSchema, async () => {
           required: ['file_id'],
         },
       },
+      {
+        name: 'post_figma_comment',
+        description: 'Create a new comment on a Figma file. Optionally specify a location (node_id and/or coordinates) where the comment should be placed',
+        inputSchema: {
+          type: 'object',
+          properties: {
+            file_id: {
+              type: 'string',
+              description: 'The Figma file ID (from the URL: figma.com/file/FILE_ID/...)',
+            },
+            message: {
+              type: 'string',
+              description: 'The text content of the comment',
+            },
+            node_id: {
+              type: 'string',
+              description: 'Optional: The ID of the node/element to attach the comment to',
+            },
+            x: {
+              type: 'number',
+              description: 'Optional: X coordinate for the comment position',
+            },
+            y: {
+              type: 'number',
+              description: 'Optional: Y coordinate for the comment position',
+            },
+          },
+          required: ['file_id', 'message'],
+        },
+      },
+      {
+        name: 'reply_to_figma_comment',
+        description: 'Reply to an existing comment in a Figma file',
+        inputSchema: {
+          type: 'object',
+          properties: {
+            file_id: {
+              type: 'string',
+              description: 'The Figma file ID (from the URL: figma.com/file/FILE_ID/...)',
+            },
+            comment_id: {
+              type: 'string',
+              description: 'The ID of the comment to reply to',
+            },
+            message: {
+              type: 'string',
+              description: 'The text content of the reply',
+            },
+          },
+          required: ['file_id', 'comment_id', 'message'],
+        },
+      },
     ],
   };
 });
@@ -231,6 +370,66 @@ server.setRequestHandler(CallToolRequestSchema, async (request) => {
       };
     }
 
+    if (name === 'post_figma_comment') {
+      const { file_id, message, node_id, x, y } = args;
+
+      if (!file_id) {
+        throw new Error('file_id is required');
+      }
+
+      if (!message) {
+        throw new Error('message is required');
+      }
+
+      // Build location object if any location parameters provided
+      const location = {};
+      if (node_id) location.node_id = node_id;
+      if (x !== undefined) location.x = x;
+      if (y !== undefined) location.y = y;
+
+      const result = await postFigmaComment(
+        file_id,
+        message,
+        Object.keys(location).length > 0 ? location : null
+      );
+
+      return {
+        content: [
+          {
+            type: 'text',
+            text: `Comment posted successfully!\n\n${JSON.stringify(result, null, 2)}`,
+          },
+        ],
+      };
+    }
+
+    if (name === 'reply_to_figma_comment') {
+      const { file_id, comment_id, message } = args;
+
+      if (!file_id) {
+        throw new Error('file_id is required');
+      }
+
+      if (!comment_id) {
+        throw new Error('comment_id is required');
+      }
+
+      if (!message) {
+        throw new Error('message is required');
+      }
+
+      const result = await replyToFigmaComment(file_id, comment_id, message);
+
+      return {
+        content: [
+          {
+            type: 'text',
+            text: `Reply posted successfully!\n\n${JSON.stringify(result, null, 2)}`,
+          },
+        ],
+      };
+    }
+
     throw new Error(`Unknown tool: ${name}`);
   } catch (error) {
     return {

package.json

@@ -1,24 +1,45 @@
 {
   "name": "mcp-figma-comment-summary",
-  "version": "1.0.0",
-  "description": "MCP server to retrieve and summarize Figma file comments",
+  "version": "1.1.0",
+  "description": "MCP server to retrieve, create, and analyze Figma file comments - enables Claude Desktop to read and write design feedback",
   "type": "module",
   "main": "index.js",
   "bin": {
     "mcp-figma-comment-summary": "./index.js"
   },
+  "files": [
+    "index.js",
+    "README.md",
+    "FEATURES.md",
+    "CHANGELOG.md",
+    ".env.example"
+  ],
   "scripts": {
     "start": "node index.js",
     "dev": "node --watch index.js"
   },
   "keywords": [
     "mcp",
+    "model-context-protocol",
     "figma",
     "comments",
-    "model-context-protocol"
+    "design",
+    "collaboration",
+    "claude",
+    "claude-desktop",
+    "ai",
+    "llm"
   ],
-  "author": "",
+  "author": "Fran Herrera and Sergio Martinez",
   "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/cloudframework-io/mcp-figma-comment-summary.git"
+  },
+  "bugs": {
+    "url": "https://github.com/cloudframework-io/mcp-figma-comment-summary/issues"
+  },
+  "homepage": "https://github.com/cloudframework-io/mcp-figma-comment-summary#readme",
   "dependencies": {
     "@modelcontextprotocol/sdk": "^1.0.4",
     "dotenv": "^16.4.5",

package.json.backup

@@ -0,0 +1,30 @@
+{
+  "name": "mcp-figma-comment-summary",
+  "version": "1.0.0",
+  "description": "MCP server to retrieve and summarize Figma file comments",
+  "type": "module",
+  "main": "index.js",
+  "bin": {
+    "mcp-figma-comment-summary": "./index.js"
+  },
+  "scripts": {
+    "start": "node index.js",
+    "dev": "node --watch index.js"
+  },
+  "keywords": [
+    "mcp",
+    "figma",
+    "comments",
+    "model-context-protocol"
+  ],
+  "author": "Fran Herrera and Sergio Martinez",
+  "license": "MIT",
+  "dependencies": {
+    "@modelcontextprotocol/sdk": "^1.0.4",
+    "dotenv": "^16.4.5",
+    "node-fetch": "^3.3.2"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  }
+}