Screen Browser

Screen Browser スキル

ガイドまたはコーディングエージェントによる、ウェブアプリのナレーション付きデモ動画とチュートリアル動画。

コードベースを把握しているエージェントに、機能のチュートリアル動画を依頼します。エージェントは、ボタンやフィールドで使われている用語に合わせて手順を作成します。Screen Browser がデプロイ済みアプリ上で実際のブラウザーを操作して録画し、ナレーションや画面上のエフェクトを追加します。その後、エージェントから GIF、字幕、チャプター付きの MP4 を受け取れます。アプリが変わったら、1 行編集してもう一度依頼するだけです。

これは「キャンペーンを作成するチュートリアル動画を作って」という依頼から作成された、66 秒の動画の最初のチャプターです。その一文から、正確なプロンプトや途中のすべての画面を含む完成動画までのセッション全体は、Claude Code ガイドでご覧いただけます。

このリポジトリは、エージェントに次の 2 つを提供します。

• screenbrowser スキル — コードベースの読み取り方と、Screen Browser が必要とする 2 つのガイド（ログインフローと操作手順）の作成方法、各場面に適したエフェクト、録画前にガイドを無料で確認する方法、動画を確認してから渡す方法を説明します。
• MCP サーバーの設定 — エージェントが呼び出すツールです。プロジェクトの作成、ガイドのアップロードと確認、実行の開始と状態の確認、動画の取得を行います。サーバー自体は、https://mcp.screenbrowser.com にある Screen Browser アカウントの一部です。

Claude Code、Codex、Cursor、その他の MCP クライアントで使用できます。サインインはブラウザーで行うため、貼り付けるキーはありません。

インストール（Claude Code）

このリポジトリをプラグインマーケットプレイスとして追加し、プラグインをインストールします。

claude plugin marketplace add screenbrowser/skill
claude plugin install screenbrowser@screenbrowser

エージェントが Screen Browser のツールを初めて使うとき、Claude Code がブラウザーを開きます。Screen Browser にサインインして接続を承認すれば完了です。コピーするものはありません。（プロンプトが表示されない場合は、/mcp を実行して screenbrowser → Authenticate を選択してください。）

プラグインシステムを使わない場合は、サーバーを自分で登録してスキルをコピーします。

claude mcp add --transport http screenbrowser https://mcp.screenbrowser.com
cp -r skills/screenbrowser ~/.claude/skills/

API キーを使用する場合

エージェントがブラウザーを開いてサインインできない場合は、Screen Browser の Settings → API keys でキーを作成し、ベアラートークンとして渡します。

claude mcp add --transport http screenbrowser https://mcp.screenbrowser.com \
  --header "Authorization: Bearer <your API key>"

どの MCP クライアントでも同じ方法で使えます。https://mcp.screenbrowser.com の Streamable HTTP、対話型サインイン用の動的クライアント登録に対応した OAuth 2.1、または Authorization: Bearer <key> を使用します。

その他のエージェント

このスキルはオープンな Agent Skills 形式の通常の SKILL.md で、サーバーは HTTP 経由の標準 MCP です。そのため、Claude Code 以外でも同じ 2 つを使用できます。

Cursor、VS Code、GitHub Copilot、その他の Agent Plugins クライアント — このリポジトリは Agent Plugins パッケージ（plugin.json、mcp.json、skills/）でもあるため、リポジトリ URL からプラグインとしてインストールし、クライアントから案内されたらサインインしてください。プラグインを使わない Cursor の場合は、サーバーを .cursor/mcp.json（または Cursor の設定にあるグローバル設定ファイル）に追加し、その横にある Sign in をクリックして、スキルを .cursor/skills/ にコピーします。

{
  "mcpServers": {
    "screenbrowser": { "url": "https://mcp.screenbrowser.com" }
  }
}

mkdir -p .cursor/skills && cp -r skills/screenbrowser .cursor/skills/

OpenAI Codex CLI — サーバーを ~/.codex/config.toml に追加して一度サインインし、スキルを Codex のスキルフォルダーにコピーします。

[mcp_servers.screenbrowser]
url = "https://mcp.screenbrowser.com"

codex mcp login screenbrowser
mkdir -p ~/.codex/skills && cp -r skills/screenbrowser ~/.codex/skills/

その他（Gemini CLI、Windsurf、カスタムエージェント） — そのツールのドキュメントに従って、URL を指定した HTTP MCP サーバーを登録します。OAuth に対応したクライアントならサインインでき、対応していない場合は Authorization: Bearer ヘッダーで API キーを渡します。エージェントには skills/screenbrowser/SKILL.md を指示として渡します（貼り付けるか、ツールのルールファイルから参照します）。MCP サーバー自体もガイドの構文をリソースとして提供し、write-tutorial-guide プロンプトを備えているため、MCP プロンプトに対応したクライアントならスキルファイルなしでも使用できます。

使い方

動画はデスクトップ、またはスマートフォンやタブレット（device: iphone、android、ipad、 …）で録画できます。縦向きの9:16またはワイドスクリーンの16:9のキャンバスにスマートフォンのフレームを表示するか、画面のみを表示できます。1回の実行につきデバイスは1台です。

Claude Codeでアプリのリポジトリを開き、次のように依頼します。

キャンペーンを作成するチュートリアル動画を作成してください。

エージェントがクレジットを確認し、プロジェクトを作成します（デプロイ済みURL、デモユーザー、法的確認事項について質問します）。続いて、ルートとテンプレートをもとにガイドを作成して検証し、内容を提示してから実行を開始します。数分後に動画のリンクが届きます。

MCP サーバーには、同じ手順を任意のクライアントに案内するwrite-tutorial-guideプロンプトと、2つのリソース（screenbrowser://guide-syntaxとscreenbrowser://example-guides）も含まれています。

アプリに必要なもの

• メールアドレスとパスワードでサインインできるデモユーザー（OAuth、2FA、CAPTCHAは使用できません）。現実的なデータを登録してください。
• 録画対象のデプロイ済みURL（ステージング環境でもかまいません）と、アプリが通信するすべてのホスト（APIサブドメイン、認証プロバイダー、CDN）。
• アプリを録画する許可を得ていることの確認（自社のアプリ、許可を得たクライアントのアプリ、または社内ツール）。

送信内容と送信先

プラグインが行うすべての処理は、HTTPS経由でScreen Browserアカウントにサインインした状態で、Screen Browser MCP サーバー（https://mcp.screenbrowser.com）の1か所に送信されます。スキル自体はエージェント向けの指示であり、マシン上で何かを実行したり、何かを取得したりすることはありません。

動画を依頼した際に、エージェントからScreen Browserに送信されるものは次のとおりです。

• プロジェクトの設定：アプリのURL、アプリが通信するホスト、サインイン確認、ナレーションの言語と音声。
• コードをもとに作成したガイド：画面上に表示されるボタンやフィールドの名前を記した、平易な文章です。保存前に内容を確認できます。エージェントが提示します。
• デモユーザーの認証情報（プロジェクト変数として）。Screen Browserは暗号化して保存し、録画時のサインインにのみ使用します。どのツールを通じても返されることはありません。エージェントに渡す値は会話を経由します。チャットに表示させたくない場合は、代わりにScreen Browserダッシュボードのプロジェクトページで設定してください。
• 実行コマンド：開始、状態確認、キャンセル、および、同意した場合に限り、Screen Browser側で失敗した実行の録画スクリーンショットとログを含む失敗レポート。

ソースコードが送信されることはありません。エージェントはラベルを確認するためにリポジトリをローカルで読み取り、マシンから送信されるのはガイドのテキストだけです。他のサービスに送信されることもありません。Screen Browserが保存するデータと保存期間については、プライバシーポリシーをご覧ください。

料金

プランは月額49ドルからで、完成した動画の分数に応じて設定されています。録画前のガイド確認は無料で、失敗した実行には料金がかかりません。動画の長さは最大5分で、無料プランはありません。最新の料金は料金ページをご覧ください。

レイアウト

plugin.json                        Agent Plugins manifest (Cursor, VS Code, Copilot, …)
mcp.json                           Agent Plugins MCP config (the URL; sign-in is OAuth)
.claude-plugin/plugin.json         Claude Code plugin manifest
.claude-plugin/marketplace.json    lets this repo act as its own Claude Code marketplace
.mcp.json                          Claude Code MCP server config
skills/screenbrowser/SKILL.md      the skill
skills/screenbrowser/references/   guide syntax reference, worked example
examples/chatamatic/               a real auth guide + main guide pair

ガイドの例

平易な言葉で、画面上の表示どおりの名前を使い、1行につき1ステップを記述します。Screen Browserがこれを台本（ナレーション、ハイライト、進行のテンポ）に変換し、実際のページで各ステップを照合します。

Go to https://app.acme.test/campaigns
"Let's create a spring promotion."
Click "New campaign"
Type "Spring promo" into the Name field
Click "Save"
Confirm text "Campaign created" is visible

ステップを正確に指定する必要がある場合は、IDやname=属性を使用できます。ビルドツールが生成したクラス名は使用できません。省略可能な効果ディレクティブを含む完全なリファレンスは、skills/screenbrowser/references/guide-syntax.mdをご覧ください。

AI エージェント向けドキュメント一覧

このスキルには、ガイドの作成と録画の実行に必要なものがすべて含まれています。前提条件、料金、制限事項、APIなど、その他の情報については、https://screenbrowser.com/llms.txt に公開ドキュメントのMarkdown形式の一覧があり、この連携のリファレンスは https://screenbrowser.com/docs/agents/ にあります。

サポート

このスキルに関する問題やアイデアは、このリポジトリでお寄せください。アカウントまたは特定の録画に関するお問い合わせは、https://screenbrowser.com/contact/ のお問い合わせフォームをご利用ください。

ライセンス

MIT。Screen Browser 自体はホスト型サービスです。このリポジトリには、エージェント向けのスキル、設定、サンプルのみが含まれています。