flowlens-mcp-server는
당신의 코딩 에이전트(Claude Code, Cursor, Copilot, Codex)에게 심층적인 디버깅(debugging) 및 회귀 테스트(regression testing)를 위한 완전한 브라우저 컨텍스트(browser context)를 제공합니다.
- FlowLens Chrome 확장 프로그램을 사용하여 브라우저 흐름을 기록합니다 (사용자 작업, 네트워크, 콘솔, 스토리지, DOM 이벤트/화면 녹화).
- FlowLens MCP 서버를 통해 코딩 에이전트와 공유하여, 에이전트가 녹화된 내용에 완전히 접근할 수 있도록 합니다.
- 에이전트는 문제를 재현하는 데 시간이나 토큰(tokens)을 소비하지 않고도, 디버깅 및 통찰력을 얻기 위해 흐름을 조사하고 분석합니다.
flowlens-roboshop-claude.mp4
- 사용 편의를 위해 FlowLens 브라우저 확장 프로그램을 Chrome에 추가하고 고정하세요.
- pipx
설치 방법:
pipx install flowlens-mcp-server
최신 버전으로 업그레이드하려면:
pipx upgrade flowlens-mcp-server
설치가 성공했는지 확인하려면:
flowlens-mcp-server
다음 설정을 MCP 클라이언트(예: ~/.claude.json)의 mcpServers 아래에 추가하세요:
"flowlens": {
"command": "flowlens-mcp-server",
"type": "stdio"
...
Claude Code
Claude Code CLI를 사용하여 FlowLens MCP 서버를 추가하세요 (가이드): claude mcp add flowlens --transport stdio -- flowlens-mcp-server
Cursor
설치 버튼을 클릭하세요:
또는 수동으로 설치하세요:
Cursor Settings로 이동
-> MCP
-> New MCP Server
. 위에서 제공된 설정을 사용하세요.
Copilot / VS Code
위의 표준 설정을 사용하여 MCP 설치 가이드를 따르세요. 또한 VS Code CLI를 사용하여 FlowLens MCP 서버를 설치할 수 있습니다: code --add-mcp '{"name":"flowlens","command":"flowlens-mcp-server"}'
Codex
Codex CLI를 사용하여 FlowLens MCP 서버를 추가하세요 (MCP 설정 가이드): codex mcp add flowlens -- flowlens-mcp-server
Antigravity
커스텀 MCP 서버 연결(Connecting Custom MCP Servers) 가이드를 따르세요. MCP 서버 설정에 다음 구성을 추가하세요:
"flowlens": {
"command": "flowlens-mcp-server"
}
위의 설정은 로컬 흐름(local flows)에서만 작동합니다. 공유 가능한 흐름(shareable flows)에도 연결하려면 FLOWLENS_MCP_TOKEN을 발급받으세요.
FlowLens 플랫폼에서 발급받아 관련 MCP 설정 파일에 추가하세요:
"flowlens": {
"command": "flowlens-mcp-server",
"type": "stdio",
...
-
FlowLens를 사용하여 코딩 에이전트(coding agent)에게 전체 컨텍스트가 포함된 버그를 빠르게 보고하세요. 더 이상 콘솔 로그(console logs)를 복사하여 붙여넣거나, 여러 장의 스크린샷을 찍거나, 에이전트가 문제를 재현하는 데 토큰(tokens)을 소비하게 할 필요가 없습니다.
-
FlowLens를 사용하여 중요한 사용자 흐름(user flows)을 기록하고, 코딩 에이전트에게 이러한 흐름을 자동 테스트하거나 그에 상응하는 Playwright 테스트 스크립트를 생성하도록 요청하세요.
-
캡처된 흐름을 FlowLens 플랫폼에서 팀원들과 공유하고, MCP 설정에 생성된 액세스 토큰(access token)을 추가하여 코딩 에이전트와 함께 디버깅하세요. 이에 대한 자세한 내용은 여기에서 확인하실 수 있습니다.