AppContext MCP

공식

AppContext는 AI 코딩 에이전트에게 개발 중인 내용에 대한 즉각적인 시각적 통찰력을 제공하여, 실시간으로 문제를 수정하고 UI를 개선하며 개발 워크플로우를 가속화할 수 있게 해줍니다.

appcontext.dev에서 보기

App Context MCP(으)로 무엇을 할 수 있나요?

  • iOS 시뮬레이터 스크린샷 캡처 — AI가 capture_simulator_screenshot을 사용하여 앱의 현재 화면을 확인하고 실시간 시각적 피드백을 받을 수 있습니다.
  • Metro 번들러 로그 스트리밍 — AI가 get_metro_logs를 통해 실시간 React Native 빌드 출력을 읽어 수동 복사-붙여넣기 없이 번들링 오류를 진단할 수 있습니다.
  • 웹 브라우저 스크린샷 캡처 — AI가 capture_web_screenshot을 사용하여 웹 앱의 렌더링된 UI를 검사하고 레이아웃 또는 스타일 문제를 식별할 수 있습니다.
  • 브라우저 콘솔 로그 검색 — AI가 get_console_logs를 사용하여 런타임 오류 및 경고를 가져와 더 빠른 디버깅을 수행하도록 지시할 수 있습니다.

문서

AppContext - AI에 눈을 달아주세요.

AppContext는 AI 코딩 에이전트가 iOS 앱과 웹 애플리케이션을 즉각적으로 시각적으로 파악할 수 있게 해주므로, 실시간으로 문제를 해결하고 UI를 개선하며 개발 워크플로를 가속화할 수 있습니다. 불필요한 프롬프트 왕복을 줄여 토큰 낭비를 줄이세요.

플랫폼 지원

현재 iOS 시뮬레이터와 웹 브라우저를 완벽하게 지원합니다. Android 등 더 많은 플랫폼이 곧 추가됩니다.

지금 사용 가능

  • iOS 시뮬레이터 (실시간 시각 피드백)

  • React Native / Expo (Metro 번들러 로그 스트리밍)

  • 웹 애플리케이션 (Chrome DevTools를 통한 스크린샷 및 콘솔 로그)

곧 출시 예정

  • Android 에뮬레이터 (Android용 시각 및 로그 컨텍스트)

  • 데스크톱 앱 (Electron 애플리케이션 모니터링)

  • 실제 기기 (실제 하드웨어에서 테스트)

선호하는 도구와 완벽하게 연동

AppContext는 모델 컨텍스트 프로토콜(MCP)을 통해 AI 코딩 편집기 및 개발 프레임워크와 자동으로 통합됩니다.

  • Cursor
  • Claude Code
  • Windsurf
  • Expo

작동 방식

메뉴 막대에서 실행됩니다. 시각 정보와 로그를 캡처하여 AI에 제공합니다.

캡처

iOS 시뮬레이터와 웹 브라우저의 실시간 화면과 Metro 및 브라우저 콘솔의 런타임 로그를 스트리밍합니다.

제공

MCP를 통해 로컬에서 컨텍스트를 게시합니다. Cursor, Claude Code, Windsurf와 함께 작동합니다. 사용자의 컴퓨터에서 100% 오프라인으로 실행됩니다.

수정

AI가 앱의 실제 상태를 확인합니다. 실시간으로 오류를 수정하고 UI를 개선합니다. 설명도, 추측도 필요 없습니다.

메뉴 막대에서 조용히 실행됩니다. 자동 업데이트. 항상 준비 완료. 한 번 다운로드하고 한 번 로그인하면 끝입니다.

간단한 가격 정책

자신에게 맞는 플랜을 선택하세요.

월간

월 결제, 언제든지 취소 가능

$9.99/월

  • 지속적 컨텍스트 스트림 (실시간)
  • 실시간 Metro 번들러 로그
  • 오프라인 라이선스 토큰 (30일)
  • 언제든지 취소 가능

연간

연간 청구, 17% 절약

$99/년

  • 지속적 컨텍스트 스트림 (실시간)
  • 실시간 Metro 번들러 로그
  • 오프라인 라이선스 토큰 (30일)
  • 월간 대비 17% 절약

AppContext 설치

다음 단계에 따라 개발 환경에서 AppContext를 실행하세요.

  1. 다운로드 및 설치 (macOS 13 이상)

    간단한 설치 과정:
    Mac용 다운로드
    1. "Mac용 다운로드" 클릭 → .dmg 파일 열기
    2. AppContext를 응용 프로그램 폴더로 드래그
    3. AppContext 실행 - 메뉴 막대에 아이콘으로 표시됩니다.

  2. AppContext Pro 구독

    AppContext에서 실시간 화면과 로그를 캡처하려면 Pro 구독이 필요합니다.
    • 이 웹사이트: 아래 가격 정보로 스크롤하여 데스크톱 앱 로그인 시 이미 인증된 상태가 되도록 합니다.
    • 데스크톱 앱: 메뉴 막대 아이콘 클릭 → "Pro 구독" → 플랜 선택
      즉시 활성화—라이선스 키가 필요 없습니다. 활성화되면 코드 노출 없이 로컬 LLM 통합을 위해 오프라인으로 작동합니다.

  3. 이메일로 로그인

    메뉴 막대 아이콘을 클릭하고 로그인하세요:
    1. "로그인" 선택 → 이메일 입력
    2. 이메일을 확인하고 매직 링크를 클릭하여 인증
      웹사이트에서 먼저 구독한 경우 이미 인증되어 바로 사용할 수 있습니다!

  4. AI 편집기에 연결

    연결되면 AI가 iOS 시뮬레이터와 웹 브라우저의 실시간 화면을 보고, Metro 번들러 및 콘솔 로그를 읽을 수 있으며, 더 이상 스크린샷이나 오류 메시지를 붙여넣으라고 요청하지 않습니다.

Claude Code 사용자의 경우:

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

터미널에서 이 명령을 실행한 다음 Claude Code를 다시 시작하여 활성화하세요.

Cursor 사용자의 경우: 원클릭 설치

Cursor에 추가

기타 플랫폼 (Windsurf, Continue 등)의 경우

  1. AI 편집기의 MCP 설정 열기
  2. 새 MCP 서버 추가
  3. 다음 설정 사용:
{
  "appcontext": {
    "url": "http://localhost:7777/sse",
    "type": "sse"
  }
}