FlowLens
Magentic AI · コーディング
FlowLensは、Magentic AIが作ったAIネイティブのバグ報告ツールだ。バグが出たときにブラウザで起きたことを記録し、その完全なコンテキストをコーディングエージェントに渡すので、長いやり取りなしでデバッグできる。スクリーンショットとコピペしたコンソールエラーの代わりに、チームとAIエージェントの両方が理解できる1本のリンクを送るだけで済む。
FlowLens について
FlowLensとは
FlowLensはAI時代のために設計されたバグ報告ツールで、バグの周辺コンテキストは報告そのものより重要であり、1回の記録でスクリーンショット、チャットメッセージ、うろ覚えの再現手順という一連の流れを丸ごと置き換えられるという考えに基づいている。バグの完全なブラウザコンテキスト（動画、ネットワークリクエスト、コンソール出力、ユーザー操作、ストレージ状態、ナビゲーションイベント、システム情報）を、人も機械も追加説明なしに読める1本の共有リンクにまとめる。その記録が1本の共有リンクになる。
では、日常で実際に何が変わるのか。リンクがエージェントに届いた瞬間から、かなり変わる。
鍵はコンテキストだ。開発者やデバッグアシスタントがフロントエンドの問題を調べるとき、最も難しいのは大抵、ユーザーが実際に何をしたかを再構成する部分にある。FlowLensはその当て推量を取り除く。エージェントはMCPサーバー経由で記録を取得し、実データで作業を始める。だからここのAIデバッグは、単なるスクリーンショットとは違って感じられる。
最大の制約は範囲だ。FlowLensはブラウザベースのツールなので、Webアプリとフロントエンドのデバッグに向いており、ネイティブのモバイルやバックエンドだけの問題には向かない。ワークフローにMCP対応のコーディングエージェントがすでにあることも前提としている。チームが手作業でデバッグしているなら、得られるものは少ない。
はじめ方
- FlowLensのブラウザ拡張機能とMCPサーバーをインストールする。公式サイトによれば1分ほどで終わる。
- Webアプリを開き、バグを再現する前に録画ボタンを押す。
- 実際のユーザーがするように問題を再現する。顧客がたどる流れのままにクリックし、入力する。
- 録画を停止する。FlowLensは動画、ログ、ネットワーク活動、操作を1本のリンクにまとめる。
- リンクをチームに共有するか、AIエージェントに貼り付ける。エージェントはFlowLensのMCP接続経由でそれを読む。
AIツール情報
FlowLensの料金、対応プラットフォーム、性能を簡単に確認できます。
こんな人におすすめ
このツールが最も力を発揮するユーザー、タスク、シーン。
ユーザー
- フロントエンド開発者：Webアプリを扱っている限り、テスターに再説明を頼まずにバグの完全なブラウザコンテキストを得られる。
- QA・テストエンジニア：人もAIエージェントも読める報告を提出できる。いつもの確認の往復がなくなる。
- 個人の創業者や小規模チーム：詳細な再現手順を書く代わりに、粗いバグ録画をそのままコーディングエージェントに渡せる。
タスク
- フロントエンドのバグの再現と報告：一度録画すれば、クリック、入力、セレクタ、タイムスタンプを自動で記録する。
- コンソールとネットワークのエラーをデバッグ：記録がエラー、警告、スタックトレース、リクエストの完全なデータをまとめる。
- バグをAIコーディングエージェントに引き渡す：エージェントはMCP経由で記録を読むので、プロンプトのコピペが要らない。
シーン
- 決済フローが断続的に壊れ、どのリクエストが失敗したか分からない。ネットワーク記録が失敗した呼び出しを直接示す。
- 同僚が詳細なしで「ボタンが動かない」と報告し、記録を開くと正確なクリックとコンソールエラーが見える。
- 席を離れていて、1本の共有リンクからエージェントにバグ修正を始めてほしい。
主な機能
ワンクリックのブラウザ録画
FlowLensは、かつての右クリックして検証する手順を録画ボタンに置き換える。普通のユーザーと同じようにバグを再現すれば、ツールが背後で全てを記録する。停止すれば、散らばったメモではなく完全な一式が手に入る。
ブラウザコンテキストの完全記録
記録は、画面の動画、ネットワーク活動、コンソール出力、ユーザー操作、ストレージ状態、ナビゲーションイベント、システム情報を一つにまとめる。各部分は互いに同期しているので、動画のある瞬間と、同じ瞬間に失敗したリクエストを突き合わせられる。この同期が全ての要だ。FlowLensが単なる画面録画ツールと一線を画す核心はここにある。
MCP経由のAI対応コンテキスト
FlowLensは、記録をClaude Code、Cursor、Copilot、Codex、Windsurf、Gemini CLIといったコーディングエージェントにつなぐMCPサーバーを同梱する。エージェントは完全なコンテキストを直接読むので、コンソールエラーの貼り付け、スクリーンショット、長いプロンプトの作成を飛ばせる。GitHubのプロジェクトはこのMCPサーバーをオープンソースと説明している。
共有できるバグリンク
1本のリンクが同僚にもAIエージェントにも使える。チャットに投稿してもエージェントに渡しても、何も整形し直さずに済み、報告者が何を言いたかったかをめぐるいつもの往復が終わる。
プライバシー重視の扱い
個人情報（PII）の自動伏せ字はあなたのマシン上でローカルに動き、録画は暗号化され、チームと何を共有するかはあなたが決める。バグ録画に顧客データや広めたくないセッションの詳細が含まれるとき、これは効いてくる。
SPA対応のナビゲーション追跡
記録はHistory APIとhashの変化を通じてシングルページアプリを扱うので、URLがほとんど動かなくてもナビゲーションイベントがそろう。JavaScriptだけでルーティングするフロントエンドアプリでも、報告に空のリンクは生まれない。
メリットとデメリット
メリット
- 開発者が本当に必要とする技術的コンテキストを、ネットワークデータやストレージ状態も含めて一度で記録する。
- 主要なMCP対応コーディングエージェントで動くので、すでにあるワークフローに合う。
- ローカルのPII伏せ字と暗号化された録画が、機微なバグ報告の共有を楽にする。
- 1本のリンクが人にもエージェントにも役立ち、フロントエンドのバグでの確認の往復を減らす。
デメリット
- ブラウザツールなので、ネイティブのモバイルアプリやバックエンドサービスのバグは範囲外になる。
- 価値はMCP対応エージェントの有無に左右される。完全に手作業でデバッグするチームは恩恵が限られる。
- 詳細なネットワークとストレージの記録は長いセッションでは重く感じられ、残すものを絞りたくなる。
よくある質問
FlowLensはフロントエンドのバグを報告し、デバッグするために使う。バグの完全なブラウザコンテキストを記録し、その記録を開発者とAIコーディングエージェントに共有するので、問題をより速く直せる。
関連コンテンツ
FlowLensに関連するツール、スキル、記事を探す。
FlowLensの代替ツール
Forefront
Forefront · コーディングForefrontはオープンソースAIで構築するためのウェブプラットフォームだ。主要なオープンソース言語モデルを自分のデータで微調整し、性能を評価し、API経由で実行したり、エクスポートして自分でホストしたりできる。クローズドなプラットフォームの手軽さを求めつつ、モデルとデータの所有権にはこだわる開発者が対象だ。
Startkit
StartKit.AI · コーディングStartkitは、AI SaaSとAIラッパー製品を作るためのボイラープレートだ。面倒な部分をあらかじめ配線済みにしたAIスタートアップボイラープレートと考えればいい。認証、StripeとLemon Squeezyの決済、利用制限、トランザクションメール、そしてOpenAI、Anthropic、Groq、Llamaと通信するAI APIスターターキットが含まれる。リポジトリをクローンして価格を設定し、ユーザーが実際にお金を払う部分に取りかかれる。ReactとTailwind上のNext.jsで作られているため、ボイラープレートコードの多くはすでに見慣れたものだ。
Testim
Tricentis · コーディングTestimは、Web・モバイル・Salesforceアプリ向けにエンドツーエンドテストを構築して実行するAIテスト自動化プラットフォームだ。機械学習を頼りに、インターフェースが変わってもテストを安定させ、チームが壊れたセレクターの修正に費やす時間を減らす。今日から使い始められる自動テストツールとしては悪くない。ブラウザで操作を録画してテストを作り、より細かい制御が必要なときはJavaScriptを足す。忙しいQAチームにとって堅実な選択肢である。