コーディングエージェントがPlaywrightの自動化スクリプトを作成・実行できるAgent Skill
reticlehq/reticle
AIコーディングエージェントが起動中のWebアプリやデスクトップアプリを操作し、証拠付きで合格・不合格・判定不能を返す、開発時専用のSDKとMCPサーバー。
- スター
- 1,276
- フォーク
- 220
- 未解決の Issue
- 220
- 最終コミット
- 17 時間前
これは何?
Reticleは、AI支援コーディングでよくある「エージェントが変更を加え、動くと思い込んだまま、アプリを開いて確認しない」という問題に対処します。アプリに開発時専用の小さなSDKを組み込み、MCP経由でツールを公開することで、エージェントが起動中のアプリを確認、操作、観察し、アサーションできるようにします。
SDKはページ内からデータを読み取るため、クリックに関連するネットワークレスポンス、zustand、Redux、TanStack Query、Piniaなどのライブラリの状態、コンソールエラー、各要素のソースファイルと行番号を確認できます。各チェックは、証拠を添えた「はい」「いいえ」「不明」のいずれかで判定されます。保存したフローはAIモデルなしで後から再生でき、`reticle gate`を使えば、対象コードに変更があった場合にCIで合格実行を必須にできます。
ReticleはReact、Next.js、Vue、Svelte、AngularなどのWebスタックに加え、ElectronやTauriのデスクトップアプリにも対応し、Claude Code、Cursor、Codex、Windsurf、VS Code、Gemini CLIなどのMCPクライアントで利用できます。ブリッジはlocalhostのみで待ち受け、SDKは本番ビルドから除外されます。
主な機能
- 01コーディングエージェントが起動中のアプリを確認、操作、観察し、アサーションするためのツールを提供します。
- 02リクエスト、状態変更、file:lineを証拠として添え、「はい」「いいえ」「不明」の判定を返します。
- 03ページ内からネットワークレスポンス、ストアの状態、コンソール出力、Reactのレンダリングを読み取ります。
- 04AIモデルを呼び出さずに、保存したフローを決定論的に再生します。
- 05対象コードに変更があった場合に合格実行を必須にする、CI向けの`reticle gate`を提供します。
- 06SDKを本番ビルドから除外し、ローカルブリッジを127.0.0.1にバインドします。
ユースケース
- エージェントが変更したチェックアウトやログインの機能が、起動中のアプリで実際に動作するか確認する。
- 成功メッセージの裏で500レスポンスが返るなど、見えにくい失敗を検出する。
- 重要なユーザーフローを固定し、その後の編集で気付かないうちに壊れるのを防ぐ。
- マージ前に、CIで対象フローの検証を必須にする。
クイックスタート
- 1
npmでreticleコマンドをグローバルにインストールする
npm install -g @reticlehq/server - 2
Reticleをコーディングエージェントに登録する
reticle setup mcp - 3
コーディングエージェントを再起動し、アプリのフォルダーでinitを実行する
reticle init
使う前に知っておきたいこと
- サーバーとCLIはFSL-1.1-ALv2の下でソースコードが公開されていますが、OSI承認のオープンソースではありません。2年後にApache-2.0へ移行します。
- Node 20.11以降、ローカルで起動している開発サーバー、MCPに対応したコーディングエージェントが必要です。
- Chromiumブラウザーを操作します。無効にしない限り、匿名の利用状況テレメトリーがデフォルトで有効です。
トピック
よくある質問
- reticle とは?
- AIコーディングエージェントが起動中のWebアプリやデスクトップアプリを操作し、証拠付きで合格・不合格・判定不能を返す、開発時専用のSDKとMCPサーバー。 Reticleは、AI支援コーディングでよくある「エージェントが変更を加え、動くと思い込んだまま、アプリを開いて確認しない」という問題に対処します。アプリに開発時専用の小さなSDKを組み込み、MCP経由でツールを公開することで、エージェントが起動中のアプリを確認、操作、観察し、アサーションできるようにします。
- reticle は無料で使えますか?ライセンスは?
- reticle は Other ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。
- reticle は今もメンテナンスされていますか?
- 活発にメンテナンス中。reticle の最終コミットは 2026年10月21日 です。
- reticle は何に使えますか?
- エージェントが変更したチェックアウトやログインの機能が、起動中のアプリで実際に動作するか確認する。 成功メッセージの裏で500レスポンスが返るなど、見えにくい失敗を検出する。 重要なユーザーフローを固定し、その後の編集で気付かないうちに壊れるのを防ぐ。 マージ前に、CIで対象フローの検証を必須にする。
- reticle のインストール方法は?
- npmでreticleコマンドをグローバルにインストールする: npm install -g @reticlehq/server Reticleをコーディングエージェントに登録する: reticle setup mcp コーディングエージェントを再起動し、アプリのフォルダーでinitを実行する: reticle init
- reticle はどこで入手できますか?
- ソースコードとインストール手順は GitHub にあります:https://github.com/reticlehq/reticle
概要はプロジェクトの README をもとに AI が生成しています。GitHub の数値は毎日更新されます。
関連プロジェクト
Claude CodeやCodexなどのコーディングエージェントに、共通のエージェント、スキル、フック、メモリ、セキュリティスキャン機能を提供するプラグイン型ハーネス。
多くのデバイスのプレビューを同時に表示し、操作を同期できる、AIエージェント向けMCPサーバー搭載のElectronベースのデスクトップブラウザー。
CodexやClaudeが2,700件以上のSKILL.mdプレイブックを検索し、スキルを選択して、スタックを検証し、インストール計画をプレビューできるローカルカタログ兼コントロールプレーン。
Claude Code、Codex CLI、Cursor CLI、Gemini CLI向けの平易なエージェントスキル。セッション報告を誰にでも分かる一画面の結論にまとめます。
WebサイトのURLから、音楽に同期した効果音とモーションブラー付きの60 fps製品ローンチ動画を作るClaude Codeスキル。