AppContext MCP

oficial

AppContext le brinda a tu agente de codificación de IA una visión visual instantánea de lo que estás desarrollando, para que pueda solucionar problemas, refinar la interfaz de usuario y acelerar tu flujo de trabajo de desarrollo en tiempo real.

Ver en appcontext.dev

¿Qué puedes hacer con AppContext MCP?

  • Capturar capturas de pantalla del simulador de iOS — Pídele a tu IA que vea la pantalla actual de tu aplicación usando capture_simulator_screenshot para obtener retroalimentación visual en tiempo real.
  • Transmitir registros del empaquetador Metro — Haz que tu IA lea la salida de compilación en vivo de React Native a través de get_metro_logs para diagnosticar errores de empaquetado sin copiar y pegar manualmente.
  • Capturar capturas de pantalla del navegador web — Permite que tu IA inspeccione la interfaz de usuario renderizada de tu aplicación web con capture_web_screenshot para identificar problemas de diseño o estilo.
  • Recuperar registros de la consola del navegador — Dirige a tu IA para que obtenga errores y advertencias en tiempo de ejecución usando get_console_logs para una depuración más rápida.

Documentación

AppContext - Dale ojos a tu IA.

AppContext le brinda a tu agente de codificación con IA una visión instantánea de tus aplicaciones iOS y aplicaciones web, para que pueda solucionar problemas, refinar la interfaz de usuario y acelerar tu flujo de trabajo de desarrollo en tiempo real. Reduce los tokens desperdiciados con menos interacciones de ida y vuelta.

Soporte de plataformas

Soporte completo para simuladores de iOS y navegadores web hoy. Android y mucho más próximamente.

Disponible ahora

  • Simuladores de iOS (Retroalimentación visual en tiempo real)

  • React Native / Expo (Transmisión de registros del empaquetador Metro)

  • Aplicaciones web (Capturas de pantalla y registros de consola a través de Chrome DevTools)

Próximamente

  • Emuladores de Android (Contexto visual y de registros para Android)

  • Aplicaciones de escritorio (Monitoreo de aplicaciones Electron)

  • Dispositivos físicos (Pruebas en hardware real)

Funciona a la perfección con tus herramientas favoritas

AppContext se integra automáticamente con editores de código con IA y marcos de desarrollo a través del Protocolo de Contexto de Modelo (MCP)

  • Cursor
  • Claude Code
  • Windsurf
  • Expo

Cómo funciona

Se ejecuta en tu barra de menú. Captura visuales y registros. Los sirve a tu IA.

Capturar

Transmite vistas en vivo desde simuladores de iOS y navegadores web, además de registros de tiempo de ejecución de Metro y consolas de navegador.

Servir

Publica el contexto localmente a través de MCP. Funciona con Cursor, Claude Code y Windsurf. Se ejecuta 100% sin conexión en tu máquina.

Corregir

Tu IA ve el estado real de tu aplicación. Corrige errores y refina la interfaz de usuario en tiempo real. Sin explicaciones, sin conjeturas.

Se ejecuta silenciosamente en tu barra de menú. Se actualiza automáticamente. Siempre listo. Descarga una vez, inicia sesión una vez, listo.

Precios simples

Elige el plan que funcione para ti.

Mensual

Paga mensualmente, cancela en cualquier momento

$9.99/mes

  • Flujo de contexto continuo (tiempo real)
  • Registros en vivo del empaquetador Metro
  • Token de licencia sin conexión (30 días)
  • Cancela en cualquier momento

Anual

Facturación anual, ahorra un 17%

$99/año

  • Flujo de contexto continuo (tiempo real)
  • Registros en vivo del empaquetador Metro
  • Token de licencia sin conexión (30 días)
  • 17% de ahorro vs mensual

Instalación de AppContext

Sigue estos pasos para poner AppContext en funcionamiento con tu entorno de desarrollo

  1. Descargar e instalar (macOS 13+)

    Proceso de instalación simple:
    Descargar para Mac
    1. Haz clic en "Descargar para Mac" → Abre el archivo .dmg
    2. Arrastra AppContext a tu carpeta de Aplicaciones
    3. Inicia AppContext - aparece como un icono en tu barra de menú

  2. Suscríbete a AppContext Pro

    AppContext requiere una suscripción Pro para capturar vistas en vivo y registros.
    • Este sitio web: Desplázate a precios abajo para que ya estés autenticado cuando inicies sesión en la aplicación de escritorio
    • Aplicación de escritorio: Haz clic en el icono de la barra de menú → "Suscribirse a Pro" → Elige tu plan
      Activación instantánea—no se necesitan claves de licencia. Funciona sin conexión una vez activado para integración local de LLM con cero exposición de código.

  3. Inicia sesión con tu correo electrónico

    Haz clic en el icono de la barra de menú e inicia sesión:
    1. Selecciona "Iniciar sesión" → Ingresa tu correo electrónico
    2. Revisa tu correo y haz clic en el enlace mágico para autenticarte
      Si te suscribiste a través del sitio web primero, ¡ya estás autenticado y listo para empezar!

  4. Conéctate a tu editor de IA

    Una vez conectado, tu IA verá vistas en vivo de tus simuladores de iOS y navegadores web, leerá los registros del empaquetador Metro y de la consola, y dejará de pedirte que pegues capturas de pantalla o mensajes de error.

Para usuarios de Claude Code:

claude mcp add --transport sse appcontext http://localhost:7777/sse

Ejecuta este comando en tu terminal, luego reinicia Claude Code para activarlo.

Para usuarios de Cursor: Instalación con un clic

Añadir a Cursor

Para otras plataformas (Windsurf, Continue, etc.)

  1. Abre la configuración de MCP de tu editor de IA
  2. Añade un nuevo servidor MCP
  3. Usa esta configuración:
{
  "appcontext": {
    "url": "http://localhost:7777/sse",
    "type": "sse"
  }
}