kogiQA MCP Web Browser

공식

이것은 Claude Code와 같은 코딩 에이전트가 사용자를 대신해 웹사이트를 방문하여 버그를 식별하거나 UI 테스트 케이스를 생성하는 데 도움을 주는 웹 브라우저입니다.

GitHub
103
이 MCP 사용해 보기스폰서

kogiQA Web Browser MCP(으)로 무엇을 할 수 있나요?

어시스턴트에게 선택자 없이 자연어만으로 실제 브라우저를 구동하도록 요청하세요.

  • 스타일 문제 디버깅 — 어시스턴트가 페이지를 검사하고 요소가 넘치거나 정렬이 어긋나는 이유를 설명한 후 CSS 수정을 제안하게 하세요.
  • 콘솔 오류 수정 — 어시스턴트에게 페이지를 탐색하고 콘솔 오류를 수집한 뒤 소스 코드에 수정 사항을 적용하도록 요청하세요.
  • 앱 매핑 및 문서화 — 어시스턴트에게 내부 링크를 탐색하고 각 페이지의 기능에 대한 Markdown 개요를 생성하도록 지시하세요.
  • 엔드투엔드 테스트 생성 — 플로우의 정상 경로와 유효성 검사 오류를 다루는 Cypress 테스트를 요청하세요.
  • 탐색적 테스트 실행 — 어시스턴트가 양식에서 경계값 입력을 시도하고 깨지거나 일관되지 않은 동작을 보고하게 하세요.

문서

kogiQA MCP Web Browser

kogiQA를 사용하여 브라우저 자동화 기능을 제공하는 Model Context Protocol (MCP) 서버입니다. 이 서버는 LLM이 스크린샷이나 시각적 튜닝 모델 없이 자연어를 통해 웹 페이지와 상호작용할 수 있게 해줍니다.

사용 용도:

  • 페이지의 스타일 문제 디버깅
  • 콘솔 오류 자동 수정
  • 웹 앱의 기능 매핑 및 문서화
  • 엔드투엔드 테스트 자동 작성
  • 애플리케이션의 탐색적 테스트 자동화

예시 프롬프트는 사용 예시를 참조하세요.

kogiQA MCP vs Playwright MCP

kogiQA MCP 서버는 kogiQA 브라우저 제어 알고리즘의 기능을 통합한 브라우저를 제공합니다. 이를 통해 에이전트는 선택자 없이 페이지와 상호작용할 수 있어 시간과 토큰을 절약할 수 있습니다.

설치

자동 설치:

npx kogiqa-mcp@latest

Claude Code

claude mcp add kogiqa-browser npx kogiqa-mcp@latest

VS Code

아래 버튼 중 하나를 클릭하여 VS Code에 직접 설치하세요:

Install in VS Code Install in VS Code Insiders

또는 VS Code CLI를 통해 설치할 수 있습니다:

code --add-mcp '{"name":"kogiqa-browser","command":"npx","args":["kogiqa-mcp@latest"]}'

Cursor

Install in Cursor

또는 Cursor Settings → MCP → Add new MCP Server로 이동하여 npx kogiqa-mcp@latest 명령을 입력하세요.

표준 구성

다른 MCP 클라이언트의 경우 MCP 구성에 다음을 추가하세요:

{
  "mcpServers": {
    "kogiqa-browser": {
      "command": "npx",
      "args": [
        "kogiqa-mcp@latest"
      ]
    }
  }
}

사용 예시

서버가 구성되면 에이전트에게 자연어로 말하기만 하면 됩니다. kogiQA는 선택자가 필요 없으므로 요소를 찾는 방법이 아니라 원하는 작업을 설명하면 됩니다.

사용자 흐름 스모크 테스트

Open http://localhost:3000, log in with the demo credentials, add the first product to the cart, and verify that the cart badge shows "1".

스타일 문제 디버깅

Go to https://myapp.example.com/pricing and check why the "Pro" plan card overflows its container on a 1280px-wide viewport. Suggest a CSS fix.

콘솔 오류 수정

Navigate to http://localhost:5173, open every page linked from the main menu, collect all console errors, and fix them in the source code.

앱 매핑 및 문서화

Explore https://staging.example.com, follow all internal links up to two levels deep, and produce a Markdown document describing each page and its main features.

엔드투엔드 테스트 생성

Walk through the sign-up flow at http://localhost:3000/signup and write Cypress end-to-end tests covering the happy path and validation errors.

탐색적 테스트

Do 10 minutes of exploratory testing on http://localhost:8080: try edge-case inputs in every form you find and report anything that looks broken or inconsistent.

요구 사항

  • Node.js 20 이상
  • VS Code, Cursor, Windsurf, Claude Desktop, Goose, Junie 또는 기타 MCP 클라이언트