/jaspr-web setup — 웹 자동화 도구 설치·연결#

한마디로#

웹 페이지를 자동으로 열어보고 클릭·확인하는 두 가지 도구(Playwright, Chrome DevTools)를 처음 한 번만 설치하고 연결하는 단계입니다. 새 사무실에 들어가서 프린터와 모니터를 컴퓨터에 연결하는 것과 같은 "초기 셋업"이에요.

누가·언제 쓰나요#

• cocode 웹사이트(coui.cocode.im 등)를 자동으로 검사·테스트하려는 사람이
• 다른 /jaspr-web 명령(audit, match 등)을 처음 쓰기 직전에, 딱 한 번만 실행합니다.

👉 이미 두 도구가 연결돼 있다면 다시 할 필요 없습니다.

무엇을 해주나요#

• Playwright MCP — 웹 페이지를 자동으로 열고 조작하는 도구를 Claude에 연결합니다(처음 실행 시 브라우저 파일 약 300MB도 함께 설치).
• Chrome DevTools MCP (선택) — 크롬 브라우저의 개발자 도구를 함께 연결합니다.
• 연결 확인 — 두 도구가 제대로 붙었는지(✓ connected) 점검하고, 가볍게 한 번 돌려봅니다.
• 잘 돌아가면 결과물로 .claude/docs/jaspr-web/<시각>/inventory/index.json 파일이 생기는데, 랜딩 페이지에서 보이는 CoUI 요소 목록이 담깁니다.

어떻게 쓰나요#

# 1. Playwright 도구 연결
claude mcp add --transport stdio playwright -- npx -y @playwright/mcp@latest

# (선택) 브라우저 파일 미리 받아두기
npx -y playwright install

# 2. Chrome DevTools 도구 연결 (선택, 권장)
claude mcp add --transport stdio chrome-devtools -- npx -y chrome-devtools-mcp@latest

# 3. 두 도구가 잘 연결됐는지 확인
claude mcp list | grep -E  " playwright|chrome-devtools " 

 # 가볍게 한 번 돌려보기
/jaspr-web audit --url=https://coui.cocode.im --depth=0

CI(자동화 서버)에서 화면 없이 돌릴 때는 도구 인자에 --headless=true를 넘기면 됩니다.

안에서 무슨 일이 벌어지나요#

1. Playwright 연결 — 웹 자동화 도구를 등록하고, 처음이라면 브라우저 파일(약 300MB)도 받습니다.
2. Chrome DevTools 연결 (선택) — 로컬 크롬이 필요하며, 기본은 창이 보이는 모드로 뜹니다.
3. 연결 점검 — 두 도구 모두 ✓ connected로 나오는지 확인하고, 샘플 audit을 한 번 실행해 결과 파일이 생기는지 봅니다.
4. (선택) Flutter Web 연동 — Jaspr 페이지 안의 Flutter 위젯까지 자동 조작하려면, 해당 임베드의 main()에 semantics를 켜는 코드를 추가합니다.

# Register with Claude Code (downloads npm package on first invocation)
claude mcp add --transport stdio playwright -- npx -y @playwright/mcp@latest

npx -y playwright install

claude mcp add --transport stdio chrome-devtools -- npx -y chrome-devtools-mcp@latest

claude mcp list | grep -E  " playwright|chrome-devtools " 
 # expected:
# playwright       ✓ connected
# chrome-devtools  ✓ connected

/jaspr-web audit --url=https://coui.cocode.im --depth=0

import 'package:flutter/semantics.dart';

void main() {
  SemanticsBinding.instance.ensureSemantics();
  runApp(const LivePreviewApp());
}