> ## Documentation Index
> Fetch the complete documentation index at: https://faces.app/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Resumen de MCP

> Usa Faces con Claude y otros asistentes de IA compatibles con MCP para construir presentaciones diapositiva por diapositiva.

El server MCP (Model Context Protocol) de Faces permite que asistentes de IA como Claude construyan presentaciones interactivas y explorables diapositiva por diapositiva. Tu asistente escribe el código de cada diapositiva directamente, sin usar créditos.

## ¿Qué es MCP?

MCP es un protocolo abierto que permite a los asistentes de IA conectarse a herramientas externas. Cuando conectas Claude al server MCP de Faces, Claude puede:

* **Crear un proyecto en blanco** para iniciar una nueva presentación (en tu equipo personal o en cualquier equipo al que pertenezcas)
* **Listar los equipos** a los que perteneces para que el asistente elija el correcto
* **Listar y explorar** tus proyectos existentes (incluyendo proyectos compartidos en equipo)
* **Leer y editar diapositivas individuales**: inspecciona los archivos fuente de una diapositiva y escribe otros nuevos. Funciona para cualquier proyecto del que seas propietario, miembro de equipo (en proyectos compartidos del equipo) o editor invitado
* **Definir el sistema de diseño del proyecto**: la paleta y las fuentes compartidas en todas las diapositivas
* **Adjuntar plugins** a una diapositiva, como un formulario de contacto o un presentador de video con IA en vivo
* **Capturar una diapositiva** para verificar visualmente el diseño, el espaciado y la tipografía después de editar
* **Publicar o despublicar** un proyecto y leer su URL en vivo

No hay una herramienta del lado del server para "generar una presentación completa" expuesta a través de MCP. El asistente mismo es el autor de cada diapositiva. Para construir una nueva presentación, crea un proyecto en blanco y luego llena las diapositivas una por una.

## Herramientas disponibles

### Sesión y modo agente

<table>
  <colgroup>
    <col style={{ width: "300px" }} />

    <col />
  </colgroup>

  <thead>
    <tr><th>Herramienta</th><th>Descripción</th></tr>
  </thead>

  <tbody>
    <tr><td style={{ whiteSpace: "nowrap" }}><code>get\_user\_state</code></td><td>Lee tu estado en vivo del editor en las pestañas abiertas del navegador: el proyecto que estás viendo, la diapositiva seleccionada y si el modo agente está activado. El asistente lo llama primero para saber en qué proyecto estás trabajando.</td></tr>
    <tr><td style={{ whiteSpace: "nowrap" }}><code>start\_agent\_mode</code></td><td>Activa el "modo agente" para un proyecto en tu navegador: oculta la barra lateral derecha y muestra una barra flotante que indica que un agente está dirigiendo la sesión. Pasa <code>enabled: false</code> para desactivarlo. Siempre puedes desactivarlo manualmente.</td></tr>
  </tbody>
</table>

### Equipos

<table>
  <colgroup>
    <col style={{ width: "300px" }} />

    <col />
  </colgroup>

  <thead>
    <tr><th>Herramienta</th><th>Descripción</th></tr>
  </thead>

  <tbody>
    <tr><td style={{ whiteSpace: "nowrap" }}><code>list\_teams</code></td><td>Lista los equipos a los que perteneces. Devuelve <code>id</code>, <code>slug</code>, <code>name</code>, <code>role</code> e <code>isPersonal</code>. Usa el <code>id</code> del equipo al llamar a <code>create\_project</code>.</td></tr>
  </tbody>
</table>

### Proyectos

<table>
  <colgroup>
    <col style={{ width: "300px" }} />

    <col />
  </colgroup>

  <thead>
    <tr><th>Herramienta</th><th>Descripción</th></tr>
  </thead>

  <tbody>
    <tr><td style={{ whiteSpace: "nowrap" }}><code>create\_project</code></td><td>Crea un nuevo proyecto en blanco. Devuelve el <code>projectSlug</code> y la <code>editorUrl</code>. Acepta un <code>teamId</code> opcional, omítelo para usar tu equipo personal, o pasa un <code>id</code> de <code>list\_teams</code> para crear el proyecto bajo un equipo específico.</td></tr>
    <tr><td style={{ whiteSpace: "nowrap" }}><code>list\_projects</code></td><td>Lista los proyectos a los que tienes acceso (propios, compartidos en equipo o compartidos contigo) con paginación (<code>cursor</code>, <code>limit</code>, <code>published</code>).</td></tr>
    <tr><td style={{ whiteSpace: "nowrap" }}><code>get\_project</code></td><td>Obtiene los detalles y las URLs de un proyecto a partir de un slug.</td></tr>
    <tr><td style={{ whiteSpace: "nowrap" }}><code>rename\_project</code></td><td>Renombra un proyecto. El slug y las URLs se mantienen iguales.</td></tr>
    <tr><td style={{ whiteSpace: "nowrap" }}><code>duplicate\_project</code></td><td>Crea una copia completa de un proyecto, incluyendo todas las diapositivas. Devuelve un nuevo <code>projectSlug</code> y una nueva <code>editorUrl</code>.</td></tr>
  </tbody>
</table>

### Sistema de diseño

<table>
  <colgroup>
    <col style={{ width: "300px" }} />

    <col />
  </colgroup>

  <thead>
    <tr><th>Herramienta</th><th>Descripción</th></tr>
  </thead>

  <tbody>
    <tr><td style={{ whiteSpace: "nowrap" }}><code>get\_project\_config</code></td><td>Lee <code>project.config.json</code>, incluidas las opciones de diseño y los tokens del sistema de diseño compartidos (colores de la paleta y fuentes) usados en todas las diapositivas.</td></tr>
    <tr><td style={{ whiteSpace: "nowrap" }}><code>update\_project\_config</code></td><td>Actualiza <code>project.config.json</code>, por ejemplo para definir la paleta y las fuentes del proyecto antes de estilizar las diapositivas. Solo se modifican las claves que pasas.</td></tr>
  </tbody>
</table>

### Publicación

<table>
  <colgroup>
    <col style={{ width: "300px" }} />

    <col />
  </colgroup>

  <thead>
    <tr><th>Herramienta</th><th>Descripción</th></tr>
  </thead>

  <tbody>
    <tr><td style={{ whiteSpace: "nowrap" }}><code>publish\_project</code></td><td>Publica la última versión de un proyecto, haciéndolo accesible públicamente. Devuelve la <code>publishedUrl</code>.</td></tr>
    <tr><td style={{ whiteSpace: "nowrap" }}><code>unpublish\_project</code></td><td>Saca de línea un proyecto publicado. El proyecto y sus diapositivas se conservan.</td></tr>
    <tr><td style={{ whiteSpace: "nowrap" }}><code>get\_project\_url</code></td><td>Obtiene la URL en vivo actual de un proyecto (subdominio o dominio personalizado más ruta) y los subdominios y dominios disponibles para cambiar.</td></tr>
  </tbody>
</table>

<Note>
  Cambiar la URL en vivo, agregar subdominios o conectar dominios personalizados se hace desde el panel, la [CLI](/es/cli/commands) o la [REST API](/es/api-reference/publishing/update-url); estas acciones no están expuestas como herramientas MCP.
</Note>

### Diapositivas

<table>
  <colgroup>
    <col style={{ width: "300px" }} />

    <col />
  </colgroup>

  <thead>
    <tr><th>Herramienta</th><th>Descripción</th></tr>
  </thead>

  <tbody>
    <tr><td style={{ whiteSpace: "nowrap" }}><code>list\_slides</code></td><td>Lista todas las diapositivas de un proyecto. Devuelve los IDs y nombres de las diapositivas.</td></tr>
    <tr><td style={{ whiteSpace: "nowrap" }}><code>get\_slide</code></td><td>Lee los archivos fuente de una diapositiva (<code>face.tsx</code>, <code>face.content.json</code>, <code>face.controls.json</code>).</td></tr>
    <tr><td style={{ whiteSpace: "nowrap" }}><code>create\_slides</code></td><td>Crea una o más diapositivas vacías en orden en una sola llamada atómica. Devuelve los nuevos <code>slideId</code>s en el mismo orden. Pasa <code>editing: true</code> para mostrar el gradiente de carga en cada nueva diapositiva inmediatamente.</td></tr>
    <tr><td style={{ whiteSpace: "nowrap" }}><code>reorder\_slides</code></td><td>Reordena todas las diapositivas de un proyecto en una sola llamada atómica. Pasa la lista completa de <code>slideId</code>s existentes en el orden final deseado. Úsalo para reestructurar un deck existente; nunca elimines y recrees diapositivas solo para reordenarlas.</td></tr>
    <tr><td style={{ whiteSpace: "nowrap" }}><code>update\_slide</code></td><td>Actualiza los archivos fuente de una diapositiva. Valida y compila antes de guardar; devuelve errores si el código no compila.</td></tr>
    <tr><td style={{ whiteSpace: "nowrap" }}><code>start\_slide\_editing</code></td><td>Muestra el gradiente de carga en el editor antes de hacer ediciones.</td></tr>
    <tr><td style={{ whiteSpace: "nowrap" }}><code>finish\_slide\_editing</code></td><td>Limpia el gradiente de carga después de editar (llámalo siempre, incluso si falla).</td></tr>
    <tr><td style={{ whiteSpace: "nowrap" }}><code>view\_slide</code></td><td>Toma una captura de pantalla de una diapositiva y la devuelve como imagen para que el asistente pueda verificar visualmente el diseño, el espaciado y la tipografía. Pasa <code>isMobile: true</code> para el diseño móvil.</td></tr>
    <tr><td style={{ whiteSpace: "nowrap" }}><code>get\_slide\_guide</code></td><td>Obtiene la referencia completa de autoría de diapositivas (formatos de archivo, tipos de bloque, controles, tipografía, ejemplos). Llámalo antes de escribir código de diapositivas por primera vez.</td></tr>
  </tbody>
</table>

### Plugins

<table>
  <colgroup>
    <col style={{ width: "300px" }} />

    <col />
  </colgroup>

  <thead>
    <tr><th>Herramienta</th><th>Descripción</th></tr>
  </thead>

  <tbody>
    <tr><td style={{ whiteSpace: "nowrap" }}><code>list\_plugins</code></td><td>Lista los plugins disponibles para adjuntar a una diapositiva: comportamientos en tiempo de ejecución que el código de una diapositiva no puede expresar por sí solo, como recopilar envíos de formularios o incrustar un presentador de video con IA en vivo.</td></tr>
    <tr><td style={{ whiteSpace: "nowrap" }}><code>get\_plugin\_docs</code></td><td>Obtiene el esquema de configuración de un plugin, las funciones que expone y ejemplos de código que muestran cómo una diapositiva lo llama. Léelo antes de <code>setup\_plugin</code>.</td></tr>
    <tr><td style={{ whiteSpace: "nowrap" }}><code>setup\_plugin</code></td><td>Configura una instancia de plugin en una diapositiva. La configuración se valida contra el esquema del plugin y se escribe en el <code>face.plugins.json</code> de la diapositiva; las demás instancias se conservan.</td></tr>
  </tbody>
</table>

## Construir una nueva presentación

1. `get_slide_guide`: lee la referencia de autoría (solo la primera vez)
2. *(Opcional)* `list_teams`: si el usuario podría querer el proyecto en un equipo específico, lístalos y pregunta. Si no, omite este paso y se usará el equipo personal.
3. `create_project({ name, teamId? })`: devuelve `projectSlug` y `editorUrl`
4. *(Recomendado)* `update_project_config({ projectSlug, config })`: define el sistema de diseño compartido (paleta y fuentes) antes de estilizar las diapositivas, para que todas se mantengan consistentes.
5. `create_slides({ projectSlug, slides: [{ name }, ...], editing: true })`: UNA sola llamada con todas las diapositivas que planeas añadir, en orden. Devuelve los nuevos `slideId`s. Nunca llames a esta herramienta en bucle o en paralelo para el mismo proyecto.
6. Por cada `slideId` devuelto (en paralelo o secuencialmente):
   1. `update_slide({ projectSlug, slideId, files })`: escribe `face.tsx`, `face.content.json`, `face.controls.json`
   2. `view_slide({ projectSlug, slideId })`: captura la diapositiva para verificar que se renderiza como se pretende
   3. `finish_slide_editing({ projectSlug, slideId })`: limpia el gradiente de carga
7. Comparte la `editorUrl` con el usuario.

## Editar una diapositiva existente

1. *(Opcional)* `get_user_state`: descubre qué proyecto y diapositiva tiene abiertos actualmente el usuario
2. `get_slide_guide`: si aún no la has leído
3. `start_slide_editing(slideId)`
4. `get_slide(slideId)`: lee los archivos actuales
5. `update_slide(slideId, files)`
6. `view_slide(slideId)`: verifica el resultado visualmente
7. `finish_slide_editing(slideId)`

## Autenticación

El server MCP usa **OAuth** para la autenticación. Cuando te conectes por primera vez, se te pedirá iniciar sesión en tu cuenta de Faces a través del navegador. No necesitas gestionar API keys, el flujo OAuth se encarga de todo automáticamente.

Como MCP se autentica por cuenta (no por equipo), los nuevos proyectos se crean por defecto en tu **equipo personal** a menos que el asistente pase un `teamId` explícito desde `list_teams`. Esto es diferente a la REST API y al CLI, que se autentican con API keys asociadas a un equipo y siempre crean proyectos bajo el equipo de la key. (Para el CLI, el equipo se elige con `faces login --team <slug-or-id>`; para las API keys REST, en **Settings > Developers** del panel.)

## Control de acceso

Las herramientas MCP respetan el mismo modelo de permisos que el resto de Faces:

* **Propietario del proyecto**: acceso completo de lectura/escritura.
* **Proyectos compartidos en equipo**: cualquier miembro del equipo propietario puede leer y editar.
* **Colaboradores invitados**: pueden leer; solo los colaboradores con permiso de edición pueden actualizar diapositivas.

Si el usuario autenticado no tiene acceso a un proyecto, las herramientas MCP devuelven "Project not found or you don't have access".