mcpField
R
Riffle

Riffle

ローカル
noetive.ioブラウザ自動化33 週間前に更新

Riffle について

Riffleは、スクリーンショットではなく簡潔なテキスト表示を使い、JavaScript対応のChromeページを操作するMCPサーバー兼CLIです。表示間の変更だけを返し、複数のブラウザー操作を1回の呼び出しで実行できるため、Web操作の自動化やテストに向いています。

主な機能

  1. 01対話型Webページのテキスト表示
  2. 02初回表示後はページの変更のみを返却
  3. 031回の呼び出しで複数のブラウザー操作を実行
  4. 04クリック、入力、移動、ページ内容の確認
  5. 05任意でサインイン状態を保持

活用シーン

  1. 01サインインを含む複数段階のWeb操作
  2. 02Webページからの表データ抽出
  3. 03ブラウザー画面を通じたローカルWebアプリのテスト
  4. 04ページのネットワークリクエストの確認

MCP 対応

ローカルで動作するMCPサーバーを通じて、`browser_run`と`browser_view`の2つのMCPツールを提供します。MCPクライアントはこれらを使ってChromeまたはChromium内のページを操作・閲覧できます。

設定

ローカルサーバーの設定はどのクライアントでも共通です。コピーしてクライアントの MCP 設定ファイルに貼り付けてください。

mcp.json · 共通設定
{
"mcpServers": {
"io-noetive-riffle": {
"command": "npx",
"args": [
"-y",
"@noetive/riffle"
]
}
}
}
起動コマンドnpx -y @noetive/riffle

ローカルサーバーにはマシン上の実行環境(Node.js 18 以上など)が必要です。設定ファイルの場所はクライアントごとに異なります。

パッケージ
npm@noetive/riffle0.1.1

ツール

2

掲載時のツール一覧 · 2 週間前に更新

パラメーター型必須説明
programstringはい改行区切りのステップ。1 行に 1 つ。

詳細

Riffle

エージェントはスクリーンショットではなく、テキストとしてウェブを使います。

ページはテキストで。変化した部分だけが返されます。1 回の呼び出しで複数のステップを実行。マウスやキーボードなしで、完全に操作できます。

npm CI Go MCP server License: ISC

Riffle を選ぶ理由 · インストール · 使い方 · ログイン状態の維持 · デフォルトで安全 · リリース

npx @noetive/riffle init

Claude Code · Cursor · GitHub Copilot · Kiro · Antigravity · あらゆる MCP クライアント


Riffle は MCP サーバーおよび CLI です。ページの JavaScript を実行する Chrome を起動し、エージェントが読み取って操作できるよう、各ページをテキストとして渡します。

Riffle を選ぶ理由

エージェントには人が見るものが見えます

覆われている、隠されている、主要な、無効になっている、取り消し線が引かれている、切り詰められているといった情報を、言葉でその行に記述します。HTML も CSS も画像もありません。Riffle はページを短いテキスト行に変換するため、エージェントはマークアップやピクセルから推測する代わりに、こうした事実を読み取れます。

modal d1 "Cookie preferences" covers=page
  text "We use cookies."
  button b1 "Accept all" primary
  button b2 "Reject"
main covered-by=d1
  h1 "Your cart"
  list
    item "Trail shoe 42" "€89" strike "€69" red | "Qty" | spinbutton f1 "Qty" ="1" | button b3 "Remove"
  button b4 "Checkout"

カートは Cookie ダイアログの背後にあり、旧価格には取り消し線が引かれ、新価格は赤字です。covered-by=d1 は、チェックアウトボタンがダイアログの背後にあることをエージェントに伝えます。

タスク全体を通してコンテキストを保持

最初の表示の後は、返信には変更された部分だけが含まれます。上のページで「拒否」をクリックすると、返信全体は次のとおりです。

- d1
- text "We use cookies."
- b1
- b2
~ main -covered-by=d1

各表示にはトークン予算も設定できます。そのため、長いページでも設定した量に収まります。view interactive budget=800

やり取りを減らし、待ち時間を短縮

エージェントが 1 行に 1 ステップのプログラムを作成し、Riffle はそれを 1 回の呼び出しでまとめて実行します。サインイン全体も 1 回のやり取りで完了します。

goto https://shop.example/login
try click "Reject"
fill "Email" "[email protected]"
fill "Password" $secret:shop
click "Sign in"
expect url ~ /account
view interactive budget=800

各ステップの後、Riffle は固定時間だけ待つのではなく、ページが応答して落ち着くまで待機します。クリック後は約 1 秒、ページ読み込み後は数秒です。プログラムは最初に失敗したステップで停止し、どのステップがなぜ失敗したかを伝えます。

マウスもキーボードもスクリーンショットも不要

エージェントは、対象に書かれた言葉か、表示から取得した ref を使って操作対象を指定します。click "Reject"、fill "Email" "[email protected]"、click b4 のように指定します。エージェントがポインターを動かしたり、座標を狙ったり、画像を読み取ったりすることはありません。fill は 1 ステップでフィールド全体を設定し、press Enter はキーを指定します。ステップを実行できない場合は、何が妨げになっているかを返信で知らせます。

failed line 1: click "Checkout": blocked: b4 covered-by d1 "Cookie preferences"

次にエージェントが実行するプログラムで、まずダイアログを閉じます。

その代わりに
エージェントが現在使用しているものそのコストRiffle の場合
スクリーンショットと座標を指定したクリック操作のたびに画像と 1 回のやり取りが必要で、ピクセルから推測するテキストを使い、1 回の呼び出しで複数のステップを実行
操作のたびにページ全体のスナップショットまたは生の HTML を取得毎回、エージェントのコンテキストにページ全体が入る変更された部分だけ
ページを Markdown として取得読み取れても、クリック、入力、サインインはできない実際のブラウザーで、クリック、入力、サインインが可能

インストール

npx @noetive/riffle init --client claude-code

その他のエディター:--client cursor、copilot、kiro、antigravity。--client を指定せずに init を実行すると、検出したエディターを設定します。--dry-run を指定すると、変更を書き込まずに内容を表示します。--keep-state NAME を指定すると、実行の間もエージェントのサインイン状態が保持されます。詳しくはサインイン状態を保持するをご覧ください。

どの MCP クライアントからも、次のエントリを使用できます。

{
  "mcpServers": {
    "riffle": { "command": "npx", "args": ["-y", "@noetive/riffle", "mcp"] }
  }
}

ネイティブ Windows では、npx を cmd 経由で実行します:"command": "cmd", "args": ["/c", "npx", "-y", "@noetive/riffle", "mcp"]。init がこの形式を書き込みます。

または、バイナリをインストールします:go install github.com/noetive/riffle/cmd/riffle@latest、あるいはリリースから入手します。

Riffle の実行には、マシンに Chrome または Chromium が必要です。次のコマンドで確認できます。

riffle doctor

Riffle は使い捨ての Chrome を独自に実行します。保存済みのパスワードやキーチェーンには一切触れず、停止時には後片付けをします。

使い方

エージェントは 2 つのツールを利用できます。browser_run は、ターン数を減らし、待ち時間を短縮にあるサインインの例のように、1 行に 1 ステップのプログラムを受け取ります。browser_view はページを読み取ります。

構文が分からない場合は、view help を指定するか、riffle grammar を実行してください。

ステップ:goto back forward click dblclick fill select check press hover scroll upload wait expect dialog try view eval。 ビュー:outline、interactive、read、table REF、find "text"、expand REF、net、unseen。

シェルから実行する場合:

riffle run  < program.txt      # run a program
riffle view interactive        # read the current page
riffle close                   # end the session and its browser
riffle stop                    # end Riffle and every session in it

各エディターのエージェントはそれぞれ専用のブラウザーを使うため、2 つのウィンドウが同じページを操作することはありません。MCP サーバーは起動時に、セッション名を stderr に出力します。riffle view -s NAME を実行すると、そのエージェントのページを表示できます。同じ -s NAME を渡したエントリは、riffle mcp -s shared のように、1 つのブラウザーを共有します。

Riffle は、マシン上でブラウザーが増えすぎないように管理します。Riffle を利用するエージェントの数にかかわらず、同時実行数は最大 4 つです(変更するには riffle serve -max-browsers N を使用します)。別のブラウザーを必要とするエージェントは、1 つが終了するまで待機し、その後、どのセッションがブラウザーを使用しているかを通知されます。15 分間使われなかったセッションは終了します。次に使うときは空白のページから開始し、そのことが通知されます。エディターが MCP サーバーを停止すると、そのエディターのセッションも終了します。何も処理していない Riffle は、30 分後に終了します。

サインイン状態を保持する

エディターのエントリでセッション名を指定すると、Riffle はサインイン状態を保持します。エージェントが一度サインインすれば、次回エディターを起動したときもサインイン状態が続きます。

npx @noetive/riffle init --client claude-code --keep-state shop

または、手動で設定します。

{ "mcpServers": { "riffle": { "command": "npx", "args": ["-y", "@noetive/riffle", "mcp", "-keep-state", "shop"] } } }
  • 保持されるもの。 Cookie とサイトストレージは各呼び出しの後に保存されるため、エディターの再起動、Riffle の停止、ブラウザーのクラッシュ後も保持されます。再起動時にサイトへ何かが送信されることはありません。最初のリクエストはエージェント自身のものです。
  • 保存場所。 起動時に、Riffle は MCP サーバーのログでファイル名を示します。読み取れるのはあなただけですが、そのファイルを読み取れる人なら、保存されたサインイン状態を使えます。共有バックアップや同期フォルダーには置かないでください。セッションをすべてからサインアウトさせるには、その名前を使っているエディターを閉じて、ファイルを削除します。以前のリリースからアップグレードした Riffle では、riffle.state フォルダー内に以前のコピーが残っている場合もあります。こちらも削除してください。
  • 1 つの名前につき 1 つのブラウザー。 同じ名前を使うエントリを持つエディターは、1 つのブラウザーと 1 組のサインイン状態を共有します。それぞれのプロジェクトに別の名前を指定すると、互いに分けて管理できます。名前に使用できるのは、小文字、数字、-、_ です。
  • 制限は引き続き適用されます。 -allow-origin を指定して開始したセッションには、許可されたサイトのサインイン状態だけが引き継がれます。-allow-private が設定されていない限り、プライベートアドレスのサインイン状態は引き継がれません。制限によって対象外となったデータも、そのデータを許可するセッション向けには保持されます。
  • 保持されないもの。 ストレージが保持されるのは、各呼び出しの終了時にエージェントが表示しているサイトのものです。呼び出し中に通過しただけのサイトや、別のサイトのフレームのストレージは対象外です。最大 50 サイト分のストレージが保持されます。最も長い間使われていないサイトから削除されます。ストレージを復元できないサイトは、event unrestored としてエージェントに通知され、そのセッションはストレージなしで開始します。ストレージは保持されたままです。

できること

  • ページから表を取り出す。 table REF は、マークアップの形式にかかわらず、行を TSV として返します。
  • ページが呼び出すものを確認する。 view net は、そのページの背後にある fetch リクエストと XHR リクエストを一覧表示します。
  • 独自のウェブアプリをテストする。 実際のページ JavaScript を実行しながら、ユーザーと同じように localhost を操作できます。ローカルアドレスにアクセスできるよう、エディターのエントリで riffle mcp -allow-private を実行するか、シェルから riffle serve -allow-private を実行して Riffle を起動してください。これは、すでに起動している -allow-private なしの Riffle に置き換わり、そのセッションを終了します。
  • 実行をまたいでサインイン状態を維持する。 -keep-state NAME を使って一度サインインすると、次回エディターを起動したときもエージェントはサインインしたままです。サインイン状態を維持するをご覧ください。

ページは通常のブラウザーと同じようにリアルタイムで動作し、エージェントが考えている間も実行を続けます。カウントダウン、期限切れになるサインイン、後から開くパネルなどは呼び出しの間にも進行し、次の応答で何が変わったかが伝えられます。

また、フォームが拒否された場合など、手順が意図したとおりに実行されなかったときは、Riffle がそのことを知らせるため、エージェントは修正して先に進めます。

デフォルトで安全

  • シークレットは $secret:name として書き込み、オリジンごとにひも付けられ、エージェントに再表示されることはありません。
  • 人がページ上で見ることのできないテキストはカウントされ、要求した場合に限り、ページデータであることを示すマーカー内に表示されます。
  • 非表示のラベルが表示されている語句と矛盾するコントロールには name-differs のフラグが付き、人が見る語句も示されます。
  • ページ上のテキストはデータです。応答では引用されるため、ページがそのテキストをユーザーへの指示に見せかけることはできません。
  • ローカルアドレスとプライベートネットワークアドレスは、-allow-private で有効にするまで無効です。そのため、ページからエージェントをネットワークやクラウドのメタデータサービスに誘導することはできません。
  • アップロードと eval は、有効にするまで無効です。-allow-origin と -upload-dir によって、セッションがアクセスできる場所と送信できる内容を制限できます。シェルから起動した場合やクラッシュ後に、-allow-private、-allow-origin、-allow-eval、-upload-dir を指定せずに起動した Riffle は、最後に実行したときの設定を維持します。これらのいずれかを指定すると、4 つすべてが設定されます。そのため、-allow-private=false だけを指定するとデフォルトに戻ります。
  • -keep-state NAME で維持しない限り、サインイン状態はセッション終了時に終了します。維持したサインイン状態は、自分だけが読み取れるファイルに保存されます。忘れさせるには、そのファイルを削除してください。セッションで復元されるのは、設定された制限で許可されたサインイン状態のみです。

できないこと

  • スクリーンショットツールではありません。答えがピクセル情報にしか含まれていない場合、Riffle では取得できません。
  • ボット対策や CAPTCHA を回避する手段ではありません。回避は試みません。すべてのリクエストは Riffle からのものだと示されます。ユーザーエージェントは Riffle/<version> で終わります。
  • 視覚的なリグレッションをテストするためのフレームワークではありません。その用途に特化したツールを使用してください。
  • 対応しているのは Chrome と Chromium のみです。iframe 内のコンテンツは読み取られず、content-not-shown として報告されます。
  • メールアプリや電話アプリを開くリンクをクリックしても何も起こりません。また、新しいウィンドウは同じタブで開くため、ポップアップが必要なフローは動作しません。

Noetive の他のサービスとの連携

Riffle は単独で動作します。また、別の Noetive サービスと組み合わせて使用できます。

  • Semantik はセマンティックメッセージブローカーです。ページを読み取ったエージェントは、見つけた内容を公開でき、他のエージェントはトピック名を事前に決めることなく、意味に基づいてその内容を見つけられます。

開発

make build
make test
make lint
go test -tags integration ./...   # drives a real Chrome

CONTRIBUTING.md をご覧ください。セキュリティ上の問題は、SECURITY.md の説明に従って報告してください。

ライセンス

ISC。Copyright (c) 2026 Noetive.io

コメント

MCP は初めてですか?

プロトコルの概要から最初のサーバーの導入まで、よくある疑問にまとめて答えます。

AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。