app.py

#!/usr/bin/env python3
"""
🎨 Figma MCP Server - Hébergé sur Hugging Face Spaces
Serveur MCP pour contrôler Figma via Claude/Cursor avec la vraie API REST
"""
import gradio as gr
import asyncio
import json
import logging
from PIL import Image
import base64
import io

# Configuration du logging
logging.basicConfig(level=logging.INFO)
logger = logging.getLogger(__name__)

# Import de tous les outils MCP depuis le dossier tools
# Gradio détectera automatiquement toutes les fonctions avec docstrings/type hints
try:
    from tools import *
    logger.info("✅ Tous les outils MCP importés avec succès")
except Exception as e:
    logger.error(f"❌ Erreur d'import des outils MCP: {e}")
    raise

# === CONFIGURATION DE L'APPLICATION GRADIO ===

def setup_demo():
    """Configure l'interface Gradio pour le serveur MCP"""
    
    with gr.Blocks(
        title="🎨 Figma MCP Server",
        theme=gr.themes.Soft(),
    ) as demo:
        
        gr.Markdown("""
        # 🎨 Figma MCP Server
        **Serveur MCP pour contrôler Figma via Claude/Cursor avec l'API REST**
        
        ## 📋 **Instructions de configuration :**
        
        ### 1. **Obtenir un token Figma :**
        - Aller sur [Figma Settings > Personal Access Tokens](https://www.figma.com/settings)
        - Créer un nouveau token
        - Copier le token (commence par `figd_` ou `figc_`)
        
        ### 2. **Obtenir l'ID d'un fichier :**
        - Ouvrir votre fichier Figma
        - Copier l'ID depuis l'URL : `https://www.figma.com/file/FILE_ID/nom-du-fichier`
        
        ### 3. **Configurer Claude/Cursor :**
        ```json
        {
          "mcpServers": {
            "figma": {
              "command": "sse",
              "args": ["https://aktraiser-sigma.hf.space/gradio_api/mcp/sse"]
            }
          }
        }
        ```
        """)
        
        # Interface de test (optionnelle)
        with gr.Tab("🧪 Test"):
            with gr.Row():
                token_input = gr.Textbox(
                    placeholder="figd_...",
                    label="Token Figma",
                    type="password"
                )
                token_btn = gr.Button("Configurer Token")
            
            with gr.Row():
                file_input = gr.Textbox(
                    placeholder="ID du fichier",
                    label="ID du fichier Figma"
                )
                file_btn = gr.Button("Configurer Fichier")
            
            status_output = gr.Textbox(label="Status", lines=3)
            
            # Actions de test
            with gr.Row():
                test_info_btn = gr.Button("📄 Info Fichier")
                test_comments_btn = gr.Button("📝 Commentaires")
                test_user_btn = gr.Button("👤 Info Utilisateur")
            
            # Nouveaux boutons pour les infos utilisateur détaillées
            with gr.Row():
                test_user_detailed_btn = gr.Button("👤 Profil Détaillé")
                test_teams_btn = gr.Button("🏢 Mes Équipes")
                test_permissions_btn = gr.Button("🔐 Permissions")
            
            with gr.Row():
                test_stats_btn = gr.Button("📊 Stats Workspace")
            
            with gr.Row():
                test_limitations_btn = gr.Button("📚 Limitations API")
            
            # Connexions des événements
            token_btn.click(
                configure_figma_token,
                inputs=[token_input],
                outputs=[status_output]
            )
            
            file_btn.click(
                configure_figma_file_id,
                inputs=[file_input],
                outputs=[status_output]
            )
            
            test_info_btn.click(
                get_figma_file_info,
                outputs=[status_output]
            )
            
            test_comments_btn.click(
                get_figma_comments,
                outputs=[status_output]
            )
            
            test_user_btn.click(
                get_figma_user_info,
                outputs=[status_output]
            )
            
            test_user_detailed_btn.click(
                get_figma_user_detailed_info,
                outputs=[status_output]
            )
            
            test_teams_btn.click(
                list_figma_user_teams,
                outputs=[status_output]
            )
            
            test_permissions_btn.click(
                get_figma_current_user_permissions,
                outputs=[status_output]
            )
            
            test_stats_btn.click(
                get_figma_workspace_usage_stats,
                outputs=[status_output]
            )
            
            test_limitations_btn.click(
                get_figma_api_limitations_info,
                outputs=[status_output]
            )
        
        gr.Markdown("""
        ---
        ### 🛠️ **Outils MCP disponibles (détection automatique) :**
        
        **📋 Configuration :**
        - `configure_figma_token(token)` - Configure le token d'accès
        - `configure_figma_file_id(file_id)` - Configure l'ID du fichier
        
        **📁 Navigation :**
        - `get_figma_file_info()` - Récupère les infos du fichier
        - `get_figma_comments()` - Récupère les commentaires
        - `get_figma_user_info()` - Info utilisateur connecté
        
        **👤 Compte utilisateur et équipe :**
        - `get_figma_user_detailed_info()` - Informations détaillées de l'utilisateur (profil complet)
        - `list_figma_user_teams()` - Liste toutes les équipes de l'utilisateur avec rôles et plans
        - `get_figma_team_info(team_id)` - Infos détaillées d'une équipe (plan, limites, stockage)
        - `get_figma_current_user_permissions()` - Permissions dans le fichier actuel (via Plugin API)
        - `get_figma_workspace_usage_stats()` - Statistiques d'utilisation de l'espace de travail
        - `list_figma_team_projects(team_id)` - Projets d'une équipe
        - `get_figma_api_limitations_info()` - Explique les limitations API Plugin vs REST
        
        **🎨 Création d'éléments de base (Figma Design) :**
        - `create_figma_rectangle(x, y, width, height, name, color)` - Crée un rectangle
        - `create_figma_frame(x, y, width, height, name)` - Crée un frame
        - `create_figma_text(x, y, text, name, font_size)` - Crée un texte
        
        **🟡 FigJam - Éléments de base :**
        - `create_figjam_sticky_note(x, y, text, width, height)` - Post-it (défaut: 240×240px)
        - `create_figjam_connector_between_elements(element1_name, element2_name, style)` - Connecteur entre éléments
        - `create_figjam_shape_with_text(x, y, shape_type, text, width, height)` - Forme avec texte (défaut: 208×208px)
        - `create_figjam_table(rows, columns, x, y)` - Tableau interactif
        - `create_figjam_code_block(x, y, code, language)` - Bloc de code avec coloration syntaxique
        
        **📐 FigJam - Zones et organisation :**
        - `create_figjam_background_shape(x, y, width, height, color, title, corner_radius)` - Zone de fond rectangulaire
        - `create_figjam_organized_zone(title, x, y, width, height, max_stickies)` - Zone avec grille de post-its
        - `create_figjam_workshop_template(template_type, x, y)` - Templates d'atelier complets
        
        **🎭 FigJam - Stickers et réactions :**
        - `create_figjam_sticker(x, y, sticker_type, size)` - Stickers/emoji pour réactions
        
        **🎯 Types disponibles :**
        - **Formes:** rectangle, circle, triangle, diamond, star, hexagon
        - **Stickers:** thumbs_up, thumbs_down, heart, star, fire, rocket, bulb, warning, check, cross, question, idea, clock, money, target, celebrate, thinking, confused
        - **Templates:** retrospective, brainstorm, user_journey
        
        **💡 Workflow recommandé :**
        1. Créer une zone de fond avec `create_figjam_background_shape()`
        2. Ajouter des post-its avec `create_figjam_sticky_note()`
        3. Connecter les éléments avec `create_figjam_connector_between_elements()`
        4. Ajouter des stickers pour les réactions avec `create_figjam_sticker()`
        
        **✨ Toutes les fonctions génèrent du code JavaScript prêt à utiliser dans un plugin Figma !**
        
        ---
        
        ## 📚 **Documentation Gradio MCP**
        Selon la [documentation officielle](https://www.gradio.app/guides/building-mcp-server-with-gradio) :
        - Gradio détecte **automatiquement** toutes les fonctions avec docstrings et type hints
        - Il suffit de `mcp_server=True` dans `.launch()`
        - Pas besoin d'exposition manuelle des outils
        """)
    
    return demo

# === LANCEMENT DE L'APPLICATION ===

if __name__ == "__main__":
    try:
        demo = setup_demo()
        
        logger.info("🚀 Démarrage du serveur MCP Figma...")
        
        # Configuration pour Hugging Face Spaces avec MCP
        # Gradio détectera automatiquement toutes les fonctions importées
        demo.launch(
            mcp_server=True,  # 🔑 Active le serveur MCP avec détection automatique !
            server_name="0.0.0.0",
            server_port=7860,
            share=False,
            show_error=True
        )
        
    except Exception as e:
        logger.error(f"❌ Erreur lors du lancement: {e}")
        raise