Vue d'ensemble MCP

Le server MCP (Model Context Protocol) de Faces permet aux assistants IA comme Claude de construire des présentations interactives et explorables diapositive par diapositive. Votre assistant écrit lui-même le code de chaque diapositive, sans utiliser de crédits.

​

Qu’est-ce que MCP ?

MCP est un protocole ouvert qui permet aux assistants IA de se connecter à des outils externes. Lorsque vous connectez Claude au server MCP de Faces, Claude peut :

• Créer un projet vide pour démarrer une nouvelle présentation (dans votre équipe personnelle ou n’importe quelle équipe à laquelle vous appartenez)
• Lister les équipes auxquelles vous appartenez pour que l’assistant puisse choisir la bonne
• Lister et parcourir vos projets existants (y compris les projets partagés en équipe)
• Lire et modifier des diapositives individuelles : inspecter les fichiers source des diapositives et en écrire de nouveaux. Fonctionne pour tout projet dont vous êtes le propriétaire, un membre de l’équipe (pour les projets partagés en équipe) ou un éditeur invité
• Définir le design system du projet : la palette et les polices partagées par toutes les diapositives
• Attacher des plugins à une diapositive, comme un formulaire de contact ou un présentateur vidéo IA en direct
• Capturer une diapositive pour vérifier visuellement la mise en page, l’espacement et la typographie après l’édition
• Publier ou dépublier un projet et lire son URL en direct

Il n’y a pas d’outil côté server du type « générer une présentation complète » exposé via MCP. L’assistant lui-même crée chaque diapositive. Pour construire une nouvelle présentation, il crée un projet vide puis remplit les diapositives une par une.

​

Outils disponibles

​

Session et mode agent

Outil	Description
get_user_state	Lit votre état d’éditeur en direct à travers les onglets de navigateur ouverts : le projet que vous consultez, la diapositive sélectionnée et si le mode agent est activé. L’assistant appelle ceci en premier pour savoir sur quel projet vous travaillez.
start_agent_mode	Active le « mode agent » pour un projet dans votre navigateur : masque la barre latérale droite et affiche une barre flottante indiquant qu’un agent pilote la session. Passez enabled: false pour le désactiver. Vous pouvez toujours le désactiver manuellement.

​

Équipes

Outil	Description
list_teams	Liste les équipes auxquelles vous appartenez. Renvoie id, slug, name, role et isPersonal. Utilisez l’id de l’équipe lors de l’appel à create_project.

​

Projets

Outil	Description
create_project	Crée un nouveau projet vide. Renvoie le projectSlug et l’editorUrl. Accepte un teamId optionnel. Omettez-le pour utiliser votre équipe personnelle, ou passez un id renvoyé par list_teams pour créer le projet sous une équipe spécifique.
list_projects	Liste les projets auxquels vous avez accès (possédés, partagés en équipe, ou partagés avec vous) avec pagination (cursor, limit, published).
get_project	Récupère les détails d’un projet et ses URLs pour un slug donné.
rename_project	Renomme un projet. Le slug et les URLs restent inchangés.
duplicate_project	Crée une copie complète d’un projet, y compris toutes les diapositives. Renvoie un nouveau projectSlug et un nouvel editorUrl.

​

Design system

Outil	Description
get_project_config	Lit le fichier project.config.json, y compris les paramètres de mise en page et les design tokens partagés (couleurs de la palette et polices) utilisés par toutes les diapositives.
update_project_config	Met à jour project.config.json, par exemple pour définir la palette et les polices du projet avant de styliser les diapositives. Seules les clés que vous passez sont modifiées.

​

Publication

Outil	Description
publish_project	Publie la dernière version d’un projet et le rend publiquement accessible. Renvoie l’publishedUrl.
unpublish_project	Met un projet publié hors ligne. Le projet et ses diapositives sont conservés.
get_project_url	Récupère l’URL en direct actuelle d’un projet (sous-domaine ou domaine personnalisé plus chemin) ainsi que les sous-domaines et domaines disponibles vers lesquels basculer.

​

Diapositives

Outil	Description
list_slides	Liste toutes les diapositives d’un projet. Renvoie les IDs et les noms des diapositives.
get_slide	Lit les fichiers source d’une diapositive (face.tsx, face.content.json, face.controls.json).
create_slides	Crée une ou plusieurs diapositives vides dans l’ordre en un seul appel atomique. Renvoie les nouveaux slideIds dans le même ordre. Passez editing: true pour afficher immédiatement le dégradé de chargement sur chaque nouvelle diapositive.
reorder_slides	Réorganise toutes les diapositives d’un projet en un seul appel atomique. Passez la liste complète des slideIds existants dans l’ordre final souhaité. Utilisez ceci pour restructurer un deck existant ; ne supprimez et ne recréez jamais des diapositives juste pour les réorganiser.
update_slide	Met à jour les fichiers source d’une diapositive. Valide et compile avant l’enregistrement, renvoie des erreurs si le code ne compile pas.
start_slide_editing	Affiche le dégradé de chargement dans l’éditeur avant de faire des modifications.
finish_slide_editing	Efface le dégradé de chargement après l’édition (appelez toujours cette commande, même en cas d’échec).
view_slide	Prend une capture d’écran d’une diapositive et la renvoie sous forme d’image pour que l’assistant puisse vérifier visuellement la mise en page, l’espacement et la typographie. Passez isMobile: true pour la mise en page mobile.
get_slide_guide	Récupère la référence complète de création de diapositive (formats de fichiers, types de blocs, contrôles, typographie, exemples). À appeler avant d’écrire du code de diapositive pour la première fois.

​

Plugins

Outil	Description
list_plugins	Liste les plugins disponibles à attacher à une diapositive : des comportements d’exécution que le code d’une diapositive ne peut pas exprimer seul, comme collecter des soumissions de formulaire ou intégrer un présentateur vidéo IA en direct.
get_plugin_docs	Récupère le schéma de config d’un plugin, les fonctions qu’il expose et des exemples de code montrant comment une diapositive l’appelle. À lire avant setup_plugin.
setup_plugin	Configure une instance de plugin sur une diapositive. La config est validée par rapport au schéma du plugin et écrite dans le fichier face.plugins.json de la diapositive ; les autres instances sont préservées.

​

Construire une nouvelle présentation

1. get_slide_guide : lire la référence de création (seulement la première fois)
2. (Optionnel) list_teams : si l’utilisateur peut souhaiter le projet dans une équipe spécifique, listez-les et demandez. Sinon, ignorez et l’équipe personnelle sera utilisée.
3. create_project({ name, teamId? }) : renvoie le projectSlug et l’editorUrl
4. (Recommandé) update_project_config({ projectSlug, config }) : définissez le design system partagé (palette et polices) avant de styliser les diapositives, pour que chaque diapositive reste cohérente.
5. create_slides({ projectSlug, slides: [{ name }, ...], editing: true }) : UN seul appel avec toutes les diapositives que vous prévoyez d’ajouter, dans l’ordre. Renvoie les nouveaux slideIds. N’appelez jamais cet outil en boucle ou en parallèle pour le même projet.
6. Pour chaque slideId renvoyé (en parallèle ou séquentiellement) :
   1. update_slide({ projectSlug, slideId, files }) : écrit face.tsx, face.content.json, face.controls.json
   2. view_slide({ projectSlug, slideId }) : capture la diapositive pour vérifier qu’elle s’affiche comme prévu
   3. finish_slide_editing({ projectSlug, slideId }) : efface le dégradé de chargement
7. Partagez l’editorUrl avec l’utilisateur.

​

Modifier une diapositive existante

1. (Optionnel) get_user_state : découvrez quel projet et quelle diapositive l’utilisateur a actuellement ouverts
2. get_slide_guide : si vous ne l’avez pas encore lu
3. start_slide_editing(slideId)
4. get_slide(slideId) : lire les fichiers actuels
5. update_slide(slideId, files)
6. view_slide(slideId) : vérifiez le résultat visuellement
7. finish_slide_editing(slideId)

​

Authentification

Le server MCP utilise OAuth pour l’authentification. Lors de votre première connexion, vous serez invité à vous connecter à votre compte Faces via votre navigateur. Aucune gestion de clé API nécessaire, le flow OAuth gère tout automatiquement. Comme MCP est authentifié par compte (et non par équipe), les nouveaux projets sont par défaut créés dans votre équipe personnelle, à moins que l’assistant ne passe un teamId explicite issu de list_teams. Cela diffère de l’API REST et du CLI, qui s’authentifient avec des clés API associées à une équipe et créent toujours les projets sous l’équipe de la clé. (Pour le CLI, l’équipe est choisie via faces login --team <slug-or-id> ; pour les clés API REST, dans Settings > Developers sur le tableau de bord.)

​

Contrôle d’accès

Les outils MCP respectent le même modèle de permissions que le reste de Faces :

• Propriétaire du projet : accès complet en lecture/écriture.
• Projets partagés en équipe : tout membre de l’équipe propriétaire peut lire et modifier.
• Collaborateurs invités : peuvent lire ; seuls les collaborateurs avec la permission d’édition peuvent mettre à jour les diapositives.

Si l’utilisateur connecté n’a pas accès à un projet, les outils MCP renvoient « Project not found or you don’t have access ».