Screen Browser skill

Narrated demo and tutorial videos of your web app, from a guide or your coding agent.

Ask the agent that knows your codebase for a tutorial video of a feature. It writes the walkthrough in the words your buttons and fields use, Screen Browser records a real browser following it against your deployed app, narrates it, adds the on-screen effects, and the agent hands you the MP4 with a GIF, subtitles and chapters. When the app changes, edit a line and ask again.

That is the first chapter of a 66-second video made from the request "make a tutorial video of creating a campaign". The whole session, from that sentence to the finished video with the exact prompt and every screen along the way, is in the Claude Code guide.

This repository gives your agent two things:

• The screenbrowser skill — how to read your codebase and write the two guides Screen Browser needs (the login flow and the walkthrough), which effect fits which moment, how to check a guide for free before recording, and how to review the video before handing it over.
• The MCP server configuration — the tools the agent calls: create the project, upload guides, check them, start the run, poll it, fetch the video. The server itself is part of your Screen Browser account at https://mcp.screenbrowser.com.

Claude Code, Codex, Cursor or any MCP client can use it. Sign-in happens in the browser; there is no key to paste.

Install (Claude Code)

Add this repository as a plugin marketplace and install the plugin:

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

The first time the agent reaches for a Screen Browser tool, Claude Code opens your browser: sign in to Screen Browser, approve the connection, and you are done. Nothing to copy. (If it does not prompt, run /mcp and pick screenbrowser → Authenticate.)

Without the plugin system, register the server yourself and copy the skill:

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

With an API key instead

If your agent cannot open a browser to sign in, create a key under Settings → API keys in Screen Browser and pass it as a bearer token:

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

Any MCP client works the same way: Streamable HTTP at https://mcp.screenbrowser.com, OAuth 2.1 with dynamic client registration for interactive sign-in, or Authorization: Bearer <key>.

Other agents

The skill is a plain SKILL.md in the open Agent Skills format, and the server is standard MCP over HTTP, so the same two pieces work outside Claude Code.

Cursor, VS Code, GitHub Copilot and other Agent Plugins clients — this repository is also an Agent Plugins package (plugin.json, mcp.json, skills/), so install it as a plugin from the repository URL and sign in when the client offers. Cursor without the plugin: add the server to .cursor/mcp.json (or the global one in Cursor settings), click Sign in next to it, and copy the skill into .cursor/skills/:

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

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

OpenAI Codex CLI — add the server to ~/.codex/config.toml, sign in once, and copy the skill into Codex's skills folder:

[mcp_servers.screenbrowser]
url = "http

... [View full README on GitHub](https://github.com/screenbrowser/skill#readme)