DOM スニペットの抽出
対象コンポーネントの正確な HTML または計算済み文字列を取得し、要約ではなく実際の構造からエージェントが作業できるようにします。
AI 支援のフロントエンド作業のためのブラウザキャプチャ
Vibeocus Lens は、フロントエンドのデバッグと AI 支援開発のための、ブラウザからワークスペースへのキャプチャツールです。選択したブラウザ要素を、Vibeocus Desktop と MCP 互換エージェント向けの構造化されたコンテキストに変換する Chrome 拡張として提供されています。
スクリーンショットや曖昧な説明から AI にバグを推測させる代わりに、Lens は正確な DOM スニペット、精密なセレクタ、ローカライズされた視覚状態、そしてあなたの注釈を、ローカルブリッジ経由でストリーミング可能なペイロードにまとめます。これにより、ライブなフロントエンドから、Cursor や Claude Code のようなエージェントが同じコンポーネント文脈を確認できるローカルワークスペースへの、より具体的な引き渡しが実現します。
主な機能
正確な CSS セレクタ
`#hero .btn-primary` のような正確なターゲットパスを記録し、AI ツールを適切な要素に向けやすくします。
視覚状態のキャプチャ
選択した要素、注釈、タスク状態にローカライズされたビューポートのスクリーンショットを紐づけ、視覚的な文脈を提供します。
要素に紐づく注釈
選択した要素に直接コメント、期待される動作、またはタスクメモを追加できます。
ローカル MCP 同期
localhost のブリッジを使って、ブラウザのキャプチャを Vibeocus Desktop とその MCP コンテキストへ送信します。
ページ内デモとペイロードプレビュー
サイト上の内蔵デモフローを使って要素を選択し、拡張機能をインストールする前に構造化されたペイロードのプレビューを確認できます。
実用的なユースケース
フロントエンドのバグ報告
壊れたボタン、入力欄、パネルをブラウザ上で選択し、期待される動作を添えて、正確なセレクタと DOM スニペットを AI エージェントに渡して、より精密な修正につなげます。
コンポーネント単位のデバッグ
スクリーンショットだけでは関連する DOM 構造やネストされた要素が見えない場合に、ページから直接コンポーネントのライブ状態を取得します。
ワークスペース連携の引き渡し
ブラウザの文脈をローカルの Vibeocus ワークスペースへ送信し、キャプチャを適切なプロジェクト、タスク、エージェントのワークフローにひも付けます。
評価とオンボーディング
拡張機能をインストールしてデスクトップアプリに接続する前に、内蔵デモを使ってペイロードの組み立て方を理解します。
Pros and Cons
Pros
- DOM、セレクタ、スクリーンショット、注釈を 1 つのフローでまとめて取得できます。
- ローカルブリッジを使い、送信はクラウドバックエンドではなくローカルにとどまるとしています。
- ブラウザのキャプチャを Vibeocus Desktop に接続し、プロジェクト文脈や MCP 可読データとして整理できます。
- 製品ページに内蔵デモが用意されており、インストール前にキャプチャの流れを理解しやすくなっています。
Cons
- 料金の詳細は料金 URL で公開されておらず、現在そのページは 404 を返します。
- サイトには、ブラウザ互換性や拡張機能の権限に関する完全な技術仕様が表示されていません。
FAQ
Vibeocus Lens はどのようにセットアップしますか？
Lens は Chrome 拡張としてインストールします。ページでは、サイト上のデモから始めて、Chrome ウェブストアからインストールし、Settings > Lens から Vibeocus Desktop に接続できると案内されています。
Lens は AI ワークスペースに何を送信しますか？
Lens は、正確な DOM スニペット、精密な CSS セレクタ、ローカライズされたビジュアルスクリーンショット、そして注釈またはタスクメモを取得し、その構造化されたキャプチャをローカルの MCP ブリッジ経由で送信します。
Lens はクラウドベースですか、それともローカル優先ですか？
ソースでは localhost 上のローカルブリッジが説明されており、Lens のキャプチャはクラウドバックエンドを使わずローカルで送信されるとされています。
Lens を使うにはデスクトップアプリが必要ですか？
サイトでは、ローカルの MCP ゲートウェイを開くために Lens が Vibeocus Desktop と組み合わせて使われています。この組み合わせにより、対象サイトをプロジェクトに割り当て、キャプチャをワークスペース内でエージェントが読み取れる形にできます。
Lens はどのような問題を解決するためのものですか？
ページでは、Lens はフロントエンドのバグ報告と正確なコンポーネント特定向けに位置づけられています。AI エージェントが必要とする正確なコンポーネント、セレクタ、視覚状態を把握する際の推測を減らすことを目的としています。
Quick Facts
- カテゴリ
- Developer Tool
- 製品
- Vibeocus Lens
- プラットフォーム
- Chrome 拡張機能; Vibeocus Desktop 連携アプリ
- 統合
- MCP 互換のローカルワークスペース
- 主な用途
- フロントエンドのバグ取得とコンテキスト共有
- Webサイト
- vibeocus.com
Vibeocus Lensの代替品
Biji
Bijiは、革新的なツールと機能を通じて生産性を向上させるために設計された多目的プラットフォームです。
Ably Chat
Ably Chat is a chat API platform for building custom realtime chat applications. It supports room-based messaging, typing indicators, presence, reactions, and message updates, with usage-based pricing options for different deployment stages.
Ghost
Ghostは、チャット、コード生成、コマンドラインでのタスク実行に対応したターミナル向けAIアシスタントです。無料モデルを同梱し、Linux、macOS、Windowsで使えます。オープンソースです。
AakarDev AI
AakarDev AI helps teams manage AI provider access, project-level setups, logs, and analytics from one dashboard. It supports BYOK workflows and lists providers including OpenAI, Google Gemini, Anthropic, Groq, Mistral AI, and Perplexity AI.
DeepMotion
DeepMotionは、動画から3Dアニメーションを生成するAnimate 3Dと、テキストから動きを作るSayMotionを備えたWebベースのAIモーションキャプチャ＆3Dアニメーションプラットフォームです。
Carbon Voice
Carbon Voice is an asynchronous voice messaging app for teams and individuals, with transcripts, AI catch-up, and cross-device access. It helps people and agents communicate without needing a live call.