코딩 에이전트가 테스트와 여러 단계의 웹 작업을 위한 Playwright 자동화 스크립트를 작성하고 실행하게 해주는 Agent Skill입니다.
reticlehq/reticle
실행 중인 웹·데스크톱 앱을 AI 코딩 에이전트가 조작하고, 근거와 함께 성공·실패·판단 불가를 반환하도록 하는 개발 환경 전용 SDK 및 MCP 서버입니다.
- 스타
- 1,276
- 포크
- 220
- 열린 이슈
- 220
- 마지막 커밋
- 16시간 전
어떤 프로젝트인가요?
Reticle은 AI 지원 코딩에서 흔히 발생하는 문제를 해결합니다. 에이전트가 코드를 수정한 뒤 제대로 작동한다고 넘겨짚고 앱을 직접 열어 보지 않는 문제입니다. Reticle은 앱에 개발 환경 전용의 작은 SDK를 설치하고 MCP를 통해 도구를 제공하므로, 에이전트가 실행 중인 애플리케이션을 살펴보고 조작하며 관찰하고 검증할 수 있습니다.
SDK가 페이지 내부에서 데이터를 읽기 때문에 클릭을 유발한 요청의 네트워크 응답, zustand, Redux, TanStack Query, Pinia 같은 라이브러리의 상태, 콘솔 오류, 각 요소의 소스 파일과 줄 번호를 확인할 수 있습니다. 각 검사는 근거와 함께 yes, no, unknown 중 하나의 판정으로 끝납니다. 저장된 플로우는 나중에 AI 모델 없이 재생할 수 있으며, `reticle gate`를 CI에서 사용하면 해당 코드가 변경될 때 통과한 실행이 있어야 하도록 설정할 수 있습니다.
Reticle은 React, Next.js, Vue, Svelte, Angular 등의 웹 스택과 Electron 및 Tauri 데스크톱 앱을 지원하며, Claude Code, Cursor, Codex, Windsurf, VS Code, Gemini CLI 및 기타 MCP 클라이언트에서 작동합니다. 브리지는 localhost에서만 수신하며, 프로덕션 빌드에는 SDK가 포함되지 않습니다.
핵심 기능
- 01코딩 에이전트가 실행 중인 앱을 살펴보고 조작하며 관찰하고 검증할 수 있는 도구를 제공합니다.
- 02요청, 상태 변경, file:line을 근거로 yes, no, unknown 판정을 반환합니다.
- 03페이지 내부에서 네트워크 응답, 스토어 상태, 콘솔 출력, React 렌더링을 읽습니다.
- 04저장된 플로우를 AI 모델 호출 없이 결정적으로 재생합니다.
- 05해당 코드가 변경될 때 CI에서 통과한 실행을 요구하는 `reticle gate`를 제공합니다.
- 06프로덕션 빌드에서 SDK를 제외하고 로컬 브리지를 127.0.0.1에 바인딩합니다.
활용 사례
- 실행 중인 앱에서 에이전트가 수정한 결제 또는 로그인 기능이 실제로 작동하는지 확인합니다.
- 성공 메시지 뒤에 숨은 500 응답과 같은 조용한 실패를 찾아냅니다.
- 중요한 사용자 여정을 고정해 이후 수정으로 인해 문제가 조용히 생기지 않도록 합니다.
- 병합 전에 CI에서 해당 플로우의 검증을 요구합니다.
빠른 시작
- 1
npm으로 reticle 명령어를 전역 설치합니다
npm install -g @reticlehq/server - 2
코딩 에이전트에 Reticle을 등록합니다
reticle setup mcp - 3
코딩 에이전트를 재시작한 다음 앱 폴더에서 init을 실행합니다
reticle init
사용 전 알아둘 점
- 서버와 CLI는 FSL-1.1-ALv2에 따라 소스가 공개되어 있지만, OSI가 승인한 오픈소스는 아닙니다. 2년 후 Apache-2.0으로 전환됩니다.
- Node 20.11 이상, 로컬에서 실행 중인 개발 서버, MCP를 지원하는 코딩 에이전트가 필요합니다.
- Chromium 브라우저를 구동하며, 사용자가 끄지 않는 한 익명 사용량 텔레메트리가 기본적으로 활성화됩니다.
토픽
자주 묻는 질문
- reticle은(는) 무엇인가요?
- 실행 중인 웹·데스크톱 앱을 AI 코딩 에이전트가 조작하고, 근거와 함께 성공·실패·판단 불가를 반환하도록 하는 개발 환경 전용 SDK 및 MCP 서버입니다. Reticle은 AI 지원 코딩에서 흔히 발생하는 문제를 해결합니다. 에이전트가 코드를 수정한 뒤 제대로 작동한다고 넘겨짚고 앱을 직접 열어 보지 않는 문제입니다. Reticle은 앱에 개발 환경 전용의 작은 SDK를 설치하고 MCP를 통해 도구를 제공하므로, 에이전트가 실행 중인 애플리케이션을 살펴보고 조작하며 관찰하고 검증할 수 있습니다.
- reticle은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?
- reticle은(는) Other 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.
- reticle은(는) 아직 유지보수되고 있나요?
- 활발히 유지보수 중. reticle의 마지막 커밋은 2026년 10월 21일입니다.
- reticle은(는) 어디에 사용할 수 있나요?
- 실행 중인 앱에서 에이전트가 수정한 결제 또는 로그인 기능이 실제로 작동하는지 확인합니다. 성공 메시지 뒤에 숨은 500 응답과 같은 조용한 실패를 찾아냅니다. 중요한 사용자 여정을 고정해 이후 수정으로 인해 문제가 조용히 생기지 않도록 합니다. 병합 전에 CI에서 해당 플로우의 검증을 요구합니다.
- reticle는 어떻게 설치하나요?
- npm으로 reticle 명령어를 전역 설치합니다: npm install -g @reticlehq/server 코딩 에이전트에 Reticle을 등록합니다: reticle setup mcp 코딩 에이전트를 재시작한 다음 앱 폴더에서 init을 실행합니다: reticle init
- reticle은(는) 어디서 받을 수 있나요?
- 소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/reticlehq/reticle
요약은 프로젝트 README를 바탕으로 AI가 작성했습니다. GitHub 통계는 매일 갱신됩니다.
관련 프로젝트
Claude Code, Codex 및 기타 코딩 에이전트에서 에이전트, 스킬, 훅, 메모리와 보안 검사를 공유하는 플러그인 기반 하네스입니다.
여러 기기 미리보기에서 웹사이트를 동시에 테스트하고, 상호작용을 동기화하며 AI 에이전트용 MCP 서버도 제공하는 Electron 기반 데스크톱 브라우저입니다.
Codex나 Claude가 2,700개 이상의 SKILL.md 플레이북을 검색하고, 필요한 스킬을 골라 스택을 검증한 뒤 설치 계획을 미리 볼 수 있는 로컬 카탈로그 및 제어 평면입니다.
Claude Code, Codex CLI, Cursor CLI, Gemini CLI를 위한 쉬운 에이전트 스킬로 세션 보고서를 한눈에 이해할 수 있는 결론으로 바꿉니다.
웹사이트 URL을 HTML 기반의 60fps 제품 출시 영상으로 만드는 Claude Code 스킬입니다.