AppContext MCP

resmi

AppContext memberikan agen pengkodean AI Anda wawasan visual instan tentang apa yang sedang Anda kembangkan, sehingga dapat memperbaiki masalah, menyempurnakan UI, dan mempercepat alur kerja pengembangan Anda secara real-time.

Lihat di appcontext.dev

Apa yang bisa Anda lakukan dengan App Context MCP?

  • Ambil tangkapan layar simulator iOS — Minta AI Anda untuk melihat layar aplikasi saat ini menggunakan capture_simulator_screenshot untuk umpan balik visual secara real-time.
  • Streaming log bundler Metro — Biarkan AI Anda membaca output build React Native secara langsung melalui get_metro_logs untuk mendiagnosis kesalahan bundling tanpa perlu menyalin-tempel secara manual.
  • Ambil tangkapan layar browser web — Biarkan AI Anda memeriksa UI yang dirender dari aplikasi web Anda dengan capture_web_screenshot untuk mengidentifikasi masalah tata letak atau gaya.
  • Ambil log konsol browser — Arahkan AI Anda untuk mengambil error dan peringatan runtime menggunakan get_console_logs untuk debugging yang lebih cepat.

Dokumentasi

AppContext - Berikan mata pada AI Anda.

AppContext memberikan wawasan visual instan kepada agen pengkodean AI Anda ke dalam aplikasi iOS dan aplikasi web Anda, sehingga dapat memperbaiki masalah, menyempurnakan UI, dan mempercepat alur kerja pengembangan Anda secara real time. Kurangi token yang terbuang dengan lebih sedikit prompt bolak-balik.

Dukungan Platform

Dukungan penuh untuk simulator iOS dan peramban web saat ini. Android dan banyak lagi segera hadir.

Tersedia Sekarang

  • Simulator iOS (Umpan balik visual real-time)

  • React Native / Expo (Streaming log Metro bundler)

  • Aplikasi Web (Tangkapan layar & log konsol melalui Chrome DevTools)

Segera Hadir

  • Emulator Android (Konteks visual dan log untuk Android)

  • Aplikasi Desktop (Pemantauan aplikasi Electron)

  • Perangkat Fisik (Uji pada perangkat keras nyata)

Bekerja mulus dengan alat favorit Anda

AppContext terintegrasi secara otomatis dengan editor kode AI dan kerangka kerja pengembangan melalui Model Context Protocol (MCP)

  • Cursor
  • Claude Code
  • Windsurf
  • Expo

Cara kerjanya

Berjalan di bilah menu Anda. Menangkap visual dan log. Menyajikannya ke AI Anda.

Tangkap

Mengalirkan tampilan langsung dari simulator iOS dan peramban web, ditambah log runtime dari Metro dan konsol peramban.

Sajikan

Menerbitkan konteks secara lokal melalui MCP. Bekerja dengan Cursor, Claude Code, dan Windsurf. Berjalan 100% offline di mesin Anda.

Perbaiki

AI Anda melihat keadaan aktual aplikasi Anda. Memperbaiki kesalahan dan menyempurnakan UI secara real time. Tanpa penjelasan, tanpa tebak-tebakan.

Berjalan dengan tenang di bilah menu Anda. Pembaruan otomatis. Selalu siap. Unduh sekali, masuk sekali, selesai.

Harga sederhana

Pilih paket yang cocok untuk Anda.

Bulanan

Bayar bulanan, batalkan kapan saja

$9,99/bulan

  • Aliran Konteks Berkelanjutan (real-time)
  • Log Metro Bundler langsung
  • Token lisensi offline (30 hari)
  • Batalkan kapan saja

Tahunan

Penagihan tahunan, hemat 17%

$99/tahun

  • Aliran Konteks Berkelanjutan (real-time)
  • Log Metro Bundler langsung
  • Token lisensi offline (30 hari)
  • Hemat 17% vs bulanan

Instalasi AppContext

Ikuti langkah-langkah ini untuk menjalankan AppContext dengan lingkungan pengembangan Anda

  1. Unduh & instal (macOS 13+)

    Proses instalasi sederhana:
    Unduh untuk Mac
    1. Klik "Unduh untuk Mac" → Buka file .dmg
    2. Seret AppContext ke folder Aplikasi Anda
    3. Luncurkan AppContext - muncul sebagai ikon di bilah menu Anda

  2. Berlangganan AppContext Pro

    AppContext memerlukan langganan Pro untuk menangkap tampilan langsung dan log.
    • Situs web ini: Gulir ke harga di bawah sehingga Anda sudah terautentikasi saat masuk ke aplikasi desktop
    • Aplikasi desktop: Klik ikon bilah menu → "Berlangganan Pro" → Pilih paket Anda
      Aktivasi instan—tidak perlu kunci lisensi. Bekerja offline setelah diaktifkan untuk integrasi LLM lokal tanpa paparan kode.

  3. Masuk dengan email Anda

    Klik ikon bilah menu dan masuk:
    1. Pilih "Masuk" → Masukkan email Anda
    2. Periksa email Anda dan klik tautan ajaib untuk mengautentikasi
      Jika Anda berlangganan melalui situs web terlebih dahulu, Anda sudah terautentikasi dan siap digunakan!

  4. Hubungkan ke editor AI Anda

    Setelah terhubung, AI Anda akan melihat tampilan langsung dari simulator iOS dan peramban web Anda, membaca log Metro bundler dan konsol, dan berhenti meminta Anda untuk menempelkan tangkapan layar atau pesan kesalahan.

Untuk pengguna Claude Code:

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

Jalankan perintah ini di terminal Anda, lalu mulai ulang Claude Code untuk mengaktifkan.

Untuk pengguna Cursor: Instal satu klik

Tambahkan ke Cursor

Untuk platform lain (Windsurf, Continue, dll.)

  1. Buka pengaturan MCP editor AI Anda
  2. Tambahkan server MCP baru
  3. Gunakan konfigurasi ini:
{
  "appcontext": {
    "url": "http://localhost:7777/sse",
    "type": "sse"
  }
}