# 📦 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:
```
+ mcp-figma-comment-summary@1.0.0
```

### 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! 🚀