|
|
|
|
|
""" |
|
|
🎨 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 |
|
|
|
|
|
|
|
|
logging.basicConfig(level=logging.INFO) |
|
|
logger = logging.getLogger(__name__) |
|
|
|
|
|
|
|
|
|
|
|
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 |
|
|
|
|
|
|
|
|
|
|
|
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"] |
|
|
} |
|
|
} |
|
|
} |
|
|
``` |
|
|
""") |
|
|
|
|
|
|
|
|
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) |
|
|
|
|
|
|
|
|
with gr.Row(): |
|
|
test_info_btn = gr.Button("📄 Info Fichier") |
|
|
test_comments_btn = gr.Button("📝 Commentaires") |
|
|
test_user_btn = gr.Button("👤 Info Utilisateur") |
|
|
|
|
|
|
|
|
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") |
|
|
|
|
|
|
|
|
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 |
|
|
|
|
|
|
|
|
|
|
|
if __name__ == "__main__": |
|
|
try: |
|
|
demo = setup_demo() |
|
|
|
|
|
logger.info("🚀 Démarrage du serveur MCP Figma...") |
|
|
|
|
|
|
|
|
|
|
|
demo.launch( |
|
|
mcp_server=True, |
|
|
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 |
