TextWeb — テキストグリッドのウェブレンダラー

Tool
TextWeb — テキストグリッドのウェブレンダラー

TextWeb — テキストグリッドのウェブレンダラー

TextWebは、ウェブページを高解像度のスクリーンショットや視覚モデルに頼らずに「テキストグリッド」としてレンダリングするツールです。JavaScriptの完全実行と空間レイアウトの保持、インタラクティブ要素の注記を行い、LLMやAIエージェントがウェブを直接「読む」ことで推論や操作を行えるようにします。npmパッケージとして配布され、ドキュメントとサンプルが用意されているため、エージェントのウェブブラウジングやアクセシビリティ解析、テキストベースのUIテストに適しています。（約300字）

https://github.com/chrisrobison/textweb

概要

TextWebは「スクリーンショットを撮って視覚モデルに渡す」代わりに、ウェブページを構造化されたテキストグリッドとして出力するライブラリです。ページ上のテキストをモノスペースのグリッド上に再現し、要素の空間的配置を保持したままインタラクティブ要素（リンク、ボタン、フォームなど）を注記します。これにより、LLMや他のテキスト志向のAIが視覚情報を介さずにページ内容を直接推論・操作でき、コスト・遅延の削減や解釈性の向上が期待されます。npm配布とドキュメントが整備されており、エージェント設計やアクセシビリティ評価などに活用できます。

GitHub

リポジトリの統計情報

  • スター数: 29
  • フォーク数: 2
  • ウォッチャー数: 29
  • コミット数: 6
  • ファイル数: 9
  • メインの言語: JavaScript

主な特徴

  • ウェブページを「テキストグリッド」としてレンダリングし空間レイアウトを保持
  • JavaScriptの完全実行により動的コンテンツを反映
  • リンクやボタン、フォーム等のインタラクティブ要素を注記してAIが操作可能に
  • スクリーンショット＋ビジョン経路に比べ低コストで解釈性が高い

技術的なポイント

TextWebの中心的アイデアは「視覚的なピクセルを扱う代わりに、テキストの配置情報を保存する」ことです。具体的には、ブラウザのレンダリング結果（DOMとレイアウト情報）を読み取り、各テキストノードをグリッド上の位置（行・列）にマッピングしてモノスペース表現に変換します。こうして得られる出力は単なるプレーンテキストではなく、空間的な配置が保たれたグリッドであり、LLMはページ構造やボタンの相対位置などを自然言語的に解釈しやすくなります。

動的ページに対応するために「JavaScriptの完全実行」をサポートしている点も重要です。これによりDOMの差分やランタイムで生成される要素もグリッドに反映され、シングルページアプリやクライアントサイドで生成されるコンテンツにも対応できます。さらに、リンク先URL、aria属性、altテキスト、ボタンのラベル、フォームフィールドの種類など、インタラクティブ要素のメタデータを付与することで、エージェントはどの座標を押せばどの操作が発生するかを判断できます。

内部的にはヘッドレスブラウザ（PuppeteerやPlaywrightなど）やブラウザAPIで取得したレイアウト情報を使ってテキストの位置や幅を計算し、所定のグリッド幅・高さに収める処理が想定されます。レイアウトの再現にはフォントメトリクスや折り返し処理、重なりや視覚的装飾の扱いなどの設計上の工夫が必要です。出力は読みやすいテキストグリッドに加えて、JSON形式で要素ごとのメタ情報（id、role、boundingBox、action typeなど）を添付することで、LLMやエージェントフレームワークとのインターフェースを提供します。

利点としては、（1）視覚モデルやOCRに比べてトークンや計算コストが明瞭であること、（2）文章としての表現がそのままLLMの入力になるため推論精度が上がる可能性があること、（3）インタラクション制御が明示的に記述されるためエージェントの安全性・透明性が向上することが挙げられます。一方で、グラフィックや複雑なレイアウト、キャンバス要素、画像ベースの情報（図表やチャート）などはテキスト化で失われやすく、補完のためにalt情報やメタデータ、場合によっては原画像への参照を併用する必要があります。

実運用面では、グリッドサイズの決定（幅と高さ）、トークン制限に合わせた部分的レンダリング（スクロール領域の分割）、インタラクション履歴の管理（クリック→再レンダリング→差分取得）といった機構が重要です。また、LLMとの組み合わせでは「どのように座標や要素を指示させるか」の設計が鍵になります。たとえば、出力に要素IDとラベル、相対位置を付け、エージェントのアクション命令を「クリック element:button#signup」といった構造化された命令に制約することで実行の確実性を高められます。

TextWebはnpmパッケージとして配布されているため、既存のエージェントフレームワークや自動化ツールに組み込みやすく、ドキュメントも用意されています。アクセシビリティ評価、自動テスト、データ収集、あるいはLLMベースのブラウジングエージェントの観点から実用的な選択肢となるでしょう。

プロジェクトの構成

主要なファイルとディレクトリ：

  • .gitignore: file
  • LICENSE: file
  • README.md: file
  • docs: dir
  • mcp: dir

…他 4 ファイル

まとめ

スクリーンショットに依存せずテキストでウェブを扱う、新しいエージェント向けレンダラー。

リポジトリ情報：

READMEの抜粋：

TextWeb

A text-grid web renderer for AI agents — see the web without screenshots.

Instead of taking expensive screenshots and piping them through vision models, TextWeb renders web pages as structured text grids that LLMs can reason about natively. Full JavaScript execution, spatial layout preserved, interactive elements annotated.

📄 Documentation · 📦 npm · 🐙 [GitHub](https://github.com/chrisrobison/te…