magentic/flowlens-mcp-server

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)을 추가하여 코딩 에이전트와 함께 디버깅하세요. 이에 대한 자세한 내용은 여기에서 확인하실 수 있습니다.