# 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.