Screen Browser

Vídeos de demonstração e tutorial narrados do seu aplicativo web, a partir de um guia ou do seu agente de codificação.

Ver em screenbrowser.comExperimente este MCPPatrocinado

Servidor MCP hospedado

npx add-mcp 'https://mcp.screenbrowser.com'

Instala no Claude Code, Codex, Cursor e outros

Documentação

smart_toyClaude Code · Codex · Cursor · qualquer cliente MCP

Peça ao seu agente de codificação para criar o vídeo tutorial.

A habilidade Screen Browser ensina seu agente a ler o código e escrever o passo a passo nas palavras que seus botões e campos realmente usam. O servidor MCP faz login no seu aplicativo implantado, grava o passo a passo, narra e entrega o MP4 ao agente.

Instale o plugin do Claude Code menu_bookLeia a referência

Requer um plano Screen Browser, a partir de US$ 49 por mês. Uma execução que falha não custa nada.

Claude Code right after the request “Make a tutorial video of creating a campaign in this app”: it loads the Screen Browser skill, starts a search of the codebase for the login form and the campaign screens, and asks for approval to connect to Screen Browser.

Uma sessão real, detalhes da conta demo ocultos. A sessão inteira, com o vídeo finalizado.

Configure uma vez por máquina

Instale e faça login pelo navegador na primeira vez que o agente usar uma ferramenta Screen Browser. Sem chave para colar.

$ claude plugin marketplace add screenbrowser/skill
$ claude plugin install screenbrowser@screenbrowser{
  "mcpServers": {
    "screenbrowser": { "url": "https://mcp.screenbrowser.com" }
  }
}[mcp_servers.screenbrowser]
url = "https://mcp.screenbrowser.com"

$ codex mcp login screenbrowser$ claude mcp add --transport http screenbrowser https://mcp.screenbrowser.com

# or any client: Streamable HTTP, OAuth sign-in or a bearer key

O plugin carrega a habilidade e a conexão com o servidor. Depois, peça: "faça um vídeo tutorial de criação de campanha". Detalhes na referência de agentes.

edit_noteUm único pedido

"Faça um vídeo tutorial de criação de campanha."

Esse é o prompt completo. O agente já conhece a rota, o formulário, os rótulos e onde a mensagem de sucesso aparece. A habilidade diz a ele como transformar isso em um guia que o Screen Browser pode seguir na primeira execução, e as ferramentas MCP cuidam do resto.

  1. 1 Verifica o saldo com get_credits e repassa um link de recarga se o saldo estiver baixo.
  2. 2 Cria o projeto a partir da URL implantada, do redirecionamento pós-login que ele lê no código, dos hosts que o frontend chama e das credenciais do usuário demo como variáveis.
  3. 3 Escreve dois guias: o de login e o passo a passo, em linguagem simples, nomeando as coisas como os templates as rotulam.
  4. 4 Valida, grava, espera: validate_guide até passar, start_run, depois get_run até o vídeo ficar pronto.
  5. 5 Entrega o link e os créditos que custou. Quando o aplicativo mudar, peça novamente: o guia é reutilizado, editado apenas onde um rótulo mudou de lugar.

O que o agente ainda precisa de você

Somente o código-fonte não gera uma gravação. Antes da primeira execução, tenha estes itens prontos; o agente pedirá o que não encontrar no código.

  • public Uma URL implantada que o gravador possa acessar pela internet. Staging é aceitável; localhost, IPs puros e aplicativos atrás de VPN não são.
  • person Um usuário demo que faça login com e-mail e senha: sem OAuth, sem códigos de dois fatores, sem captcha, sem e-mails de novo dispositivo. Dê a ele dados realistas para exibir.
  • verified_user Permissão para gravar. Você atesta uma vez por aplicativo que ele é seu, de um cliente ou interno. O agente faz isso por você quando você autoriza.
  • lan Os hosts com os quais o aplicativo fala. O gravador acessa apenas seu aplicativo e os hosts que você listar; uma API não listada aparece como página vazia. O agente lê a maioria deles no código.
  • payments Um plano com minutos restantes. Os planos são dimensionados em minutos de vídeo finalizado; o agente verifica o saldo antes de começar. Verificações são gratuitas, e uma execução que falha também é.

As credenciais vão para variáveis do projeto, criptografadas, e são digitadas apenas no navegador de login não gravado. Elas nunca são compartilhadas com mais nada, incluindo o agente que escreve o guia.

Isso não é uma maquete: o guia do Claude Code mostra uma sessão real daquela frase até o vídeo finalizado, com o prompt exato e cada tela ao longo do caminho.

Claude Code’s progress: the codebase search reports that creation is a three-field modal and a single-screen editor; it checks what the demo workspace contains, writes and validates both guides, and estimates the video length and cost before uploading.

Enquanto funciona: o agente lê o aplicativo, verifica o workspace demo e valida ambos os guias antes de gastar qualquer coisa.

Claude Code’s report: what the video shows, step by step, two things to know about the demo workspace, and where the project and guides are stored for the next video.

O relatório: o que o vídeo mostra, o que ele notou no workspace demo e onde os guias ficam para o próximo.

O que esperar, e o que ele não fará

A versão honesta, para que a primeira execução não seja uma surpresa.

Reexecuções, não detecção de mudanças

Nada monitora seu aplicativo. Após um lançamento, peça ao agente para gravar novamente; ele reutiliza o guia e edita uma linha se um rótulo mudou.

Cinco minutos por vídeo

Um bom tutorial tem de dez a vinte e cinco passos. A habilidade divide um recurso longo em vários guias no mesmo projeto.

A primeira execução é o professor mais rápido

Uma execução que falha é gratuita e relata como cada passo foi resolvido, então o agente aprende como a página realmente nomeia as coisas e corrige o guia.

Dois a seis minutos por execução

O agente consulta a cada 15 a 30 segundos. Um guia típico de dois minutos grava, narra e mescla em três a cinco minutos.

Mobile significa web mobile

O mesmo guia pode ser gravado como celular ou tablet, mostrando o layout mobile do aplicativo. Aplicativos nativos iOS e Android não são gravados.

Atualizações

O servidor hospedado atualiza para todos de uma vez. O plugin é fixado quando você o instala: claude plugin update screenbrowser@screenbrowser quando as orientações de escrita de guias mudam.

A lista de ferramentas, códigos de erro e todas as variantes de configuração estão na referência de agentes. As regras de guia que a habilidade segue estão na sintaxe de guias.

Escolha um plano, instale o plugin, peça um vídeo.

Todo plano inclui o servidor MCP e a API. O plugin instala em menos de um minuto; a primeira verificação de guia é gratuita.

Escolha um plano codeLeia a habilidade no GitHub