Skills

Inicio rápido de habilidades

Instale @showly/mcp-server, autorice desde su terminal y vea rápidamente una URL de vista previa real.

La promesa principal de Showly es "implementar un sitio de su agente". Esta página es la receta de principio a fin. La instalación y la primera vista previa tardan aproximadamente 90 segundos en un computadora portátil nueva; la ruta de publicación de producción agrega un paso de aprobación manual en el navegador (tratado en la sección 5).

1. Instale en su agente

La ruta de instalación canónica es el paquete @showly/mcp-server (bin showly-mcp). Para Claude Code:

npx @showly/mcp-server install --to claude-code

Para Codex:

npx @showly/mcp-server install --to codex

Estos escriben una única entrada del servidor MCP (transporte + URL) en ~/.claude.json o ~/.codex/config.toml. No se escribe ninguna ficha: el el agente descubre el servidor de autorización OAuth de Showly desde el propio punto final y ejecuta un inicio de sesión en el navegador la primera vez que lo usa. El paquete también envía un documento mecanografiado. manifest.json enumerar cada Showly herramienta, sus alcances requeridos y si Se permiten llamadas de MCP-origen.

Consulte Instalación de Skill para saber cómo funcionan el inicio de sesión en el navegador y el inicio de sesión sin interfaz.

Si su agente no es compatible con el instalador, ejecute npx @showly/mcp-server install --to stdout y pegue el fragmento manualmente.

2. Autorizar desde una conversación real

Abra Claude Code (o su equivalente Codex) y pregunte cualquier cosa que toque un Showly herramienta. Por ejemplo:

"Listar mis Showly sitios".

El agente llamará a list_sites. Como todavía no hay ningún token de Showly en esta máquina, su host abre un inicio de sesión en el navegador y la persona hace clic en Allow.

Si la máquina no tiene navegador (un servidor, un contenedor, CI, una sesión remota) o usted no está ante ella, use el inicio de sesión sin interfaz:

npx @showly/mcp-server login --to claude-code

Imprime exactamente esto y se queda esperando:

Showly needs one approval from you. If you do not have a Showly
account yet, you will be asked to create one first.

  1. Open this page:   https://showly.ai/oauth/device
  2. Enter this code:  K7QM-3XPD

Same machine as your browser? Use the direct link instead:
  https://showly.ai/oauth/device?user_code=K7QM-3XPD

The page will show the code K7QM-3XPD before you approve.
Approve ONLY if it matches the code above. If it shows a
different code, someone else is trying to get in - refuse it.

Waiting for approval until 14:58 local. Once you approve, this
command picks it up on its own - no need to come back and tell it.

Abra la página en cualquier dispositivo —el móvil sirve— e inicie sesión con el correo con el que se registró. La pantalla de consentimiento muestra el código, los alcances solicitados y los botones Permitir / Denegar.

Compare el código de la página con el de su terminal, marque la casilla que dice que coinciden y haga clic en Permitir. Esa comprobación es lo importante: el nombre que muestra un cliente en esa pantalla lo eligió él mismo, así que el código es lo único que usted puede verificar. De vuelta en su terminal, el comando termina en unos segundos y las herramientas de lectura funcionan de inmediato.

3. Realice un cambio de una línea y obtenga una vista previa

Pregúntale al agente:

"En el sitio northstar, cambia el H1 a 'Hola desde W7' y dame una vista previa".

El agente encadena cuatro llamadas a herramientas:

  1. create_change_plan: convierte tu oración en un plan estructurado.
  2. apply_site_patch: organiza la edición como un _conjunto de cambios_ (alcance site:write).
  3. create_preview: compila el conjunto de cambios y devuelve una URL de Vista previa protegida (alcance preview:create).
  4. run_checks: lee el estado de lint/typecheck/build en esa implementación

(alcance checks:run).

Las ediciones pequeñas tardan unos 5 segundos y una aplicación Next.js real, unos 30 segundos. El agente muestra una URL de Vista previa protegida para revisar el cambio sin afectar al sitio En vivo actual.

4. Ir a producción

Showly no permite que los agentes publiquen directamente en producción. el agente llama request_publish (alcance publish:request), que crea una aprobación pendiente y devuelve un enlace profundo webApprovalUrl en lugar de enviar algo:

{
  "ok": true,
  "data": {
    "approvalId": "appr_xxx",
    "deploymentId": "dep_xxx",
    "state": "pending",
    "expiresAt": "2026-05-31T10:00:00.000Z",
    "reused": false,
    "webApprovalUrl": "https://showly.ai/app/deployments/dep_xxx/publish"
  }
}

El agente te entrega el webApprovalUrl. Ábrelo, revisa la vista previa exacta y completar cualquier aprobación de compañero de equipo requerida por el plan. La inscripción OTP/MFA no es requerido. Una vez que comienza la publicación, el agente llama a get_preview_status con waitForChange: true y realiza encuestas largas (por defecto, 30 segundos, hasta 60 segundos). techo). Cuando la implementación de producción cambia a ready, la respuesta incluye productionUrl, que el agente devuelve como la URL activa final.

Qué sale de tu equipo

  • Tu agente se ejecuta localmente (Claude Code, Codex, ...).
  • La lectura del contexto solo devuelve datos permitidos por los ámbitos del token MCP.
  • Los archivos modificados se envían a Showly al llamar a apply_site_patch u otra herramienta de carga.
  • Showly crea una Vista previa privada con esos archivos y registra las acciones aplicables en el historial de auditoría.

Consulta Arquitectura para ver el flujo de entrega completo.

Errores comunes

  • missing_bearer_token — el agente no envió

Authorization: Bearer mcp_…. Vuelva a ejecutar npx @showly/mcp-server install y reinicie el agente.

  • invalid_token: su token ha caducado, ha sido revocado o no es un token MCP.

Invoque una herramienta Showly nuevamente para activar un nuevo inicio de sesión en el navegador; el agente obtiene un nuevo token automáticamente. (Para forzarlo, revoque la fila anterior debajo Administrador → Agente primero).

  • insufficient_scope: la herramienta solicitada necesita un alcance que usted no otorgó

durante el flujo de consentimiento. Revocar + volver a autorizar, esta vez aprobando el alcance.

  • Publicación de producción: publish_site utiliza dos pasos de corta duración

confirmación después de que el usuario dice que sí. Si el espacio de trabajo tiene un política de aprobación del segundo revisor habilitada, use request_publish y su webApprovalUrl en su lugar. Ninguno de los flujos requiere inscripción OTP/MFA.

Próximos pasos