Construindo uma ferramenta para copiar e colar sessões de terminal de compartilhamento usando Claude Code para web

Vídeo: Construindo uma ferramenta para copiar e colar sessões de terminal usando Claude Code para web

23 de outubro de 2025

Esta tarde eu estava convertendo manualmente uma sessão de terminal em um arquivo HTML compartilhado pela enésima vez quando decidi reduzir o atrito criando uma ferramenta personalizada para isso – e no calor do momento comecei Descrição para registrar o processo. O resultado é este novo Vídeo de 11 minutos no YouTube mostrando meu fluxo de trabalho para ferramentas simples de codificação de vibração do início ao fim.

O problema inicial

O problema que eu queria resolver envolve o compartilhamento das minhas sessões CLI do Claude Code – e o problema mais geral de compartilhar coisas interessantes que acontecem no meu terminal.

Há algum tempo, descobri (usando meu inspetor de área de transferência codificado por vibe) que copiar e colar do terminal macOS preenche um formato de área de transferência rich text que preserva as cores e a formatação geral da saída do terminal.

O problema é que o formato fica assim:

{rtf1ansiansicpg1252cocoartf2859
cocoatextscaling0cocoaplatform0{fonttblf0fnilfcharset0 Monaco;}
{colortbl;red255green255blue255;red242green242blue242;red0green0blue0;red204green98blue70;
red0green0blue0;red97green97blue97;red102green102blue102;red255

Isso me pareceu o tipo de coisa que um LLM poderia escrever código para analisar, então tive ChatGPT dê uma olhada nisso e depois reescrevi do zero com Claude Sonnet 4.5. O resultado foi esta ferramenta rtf para HTML que permite colar texto formatado rico e fornece HTML razoavelmente sólido que você pode compartilhar em outro lugar.

Para compartilhar esse HTML, comecei a colá-lo habitualmente em um Gist do GitHub e então aproveitando gitpreview.github.iouma pequena ferramenta não oficial que aceita ?GIST_ID e exibe o conteúdo principal como uma página HTML independente… o que significa que você pode vincular ao HTML renderizado armazenado em uma essência.

Então meu processo foi:

1. Copiar saída do terminal
2. Cole em rtf para html
3. Copie o HTML resultante
4. Cole isso em um novo GitHub Gist
5. Pegue o ID do Gist
6. Compartilhe o link para gitpreview.github.io?GIST_ID

Não é muito complicado, mas é frustrantemente manual se você fizer isso várias vezes ao dia.

A solução desejada

Idealmente, quero uma ferramenta onde possa fazer isso:

1. Copiar saída do terminal
2. Cole em uma nova ferramenta
3. Clique em um botão e obtenha um gistpreview link para compartilhar

Decidi contratar o Claude Code para web para construir tudo.

A solicitação

Aqui está o prompt completo que usei claude.ai/codeapontou para o meu simonw/tools repo, para construir a ferramenta:

Build a new tool called terminal-to-html which lets the user copy RTF directly from their terminal and paste it into a paste area, it then produces the HTML version of that in a textarea with a copy button, below is a button that says "Save this to a Gist", and below that is a full preview. It will be very similar to the existing rtf-to-html.html tool but it doesn't show the raw RTF and it has that Save this to a Gist button

That button should do the same trick that openai-audio-output.html does, with the same use of localStorage and the same flow to get users signed in with a token if they are not already

So click the button, it asks the user to sign in if necessary, then it saves that HTML to a Gist in a file called index.html, gets back the Gist ID and shows the user the URL https://gistpreview.github.io/?6d778a8f9c4c2c005a189ff308c3bc47 - but with their gist ID in it

They can see the URL, they can click it (do not use target="_blank") and there is also a "Copy URL" button to copy it to their clipboard

Make the UI mobile friendly but also have it be courier green-text-on-black themed to reflect what it does

If the user pastes and the pasted data is available as HTML but not as RTF skip the RTF step and process the HTML directly

If the user pastes and it's only available as plain text then generate HTML that is just an open

 tag and their text and a closing

tag

É um prompt bastante longo – levei vários minutos para digitar! Mas cobria a funcionalidade que eu queria com detalhes suficientes para que eu tivesse certeza de que Claude seria capaz de construí-la.

Estou usando uma técnica chave neste prompt: estou referenciando ferramentas existentes no mesmo repositório e dizendo a Claude para imitar sua funcionalidade.

Escrevi sobre esse truque pela primeira vez em março passado em Executando OCR em PDFs e imagens diretamente no seu navegador, onde descrevi como um trecho de código que usava PDF.js e outro trecho que usava Tesseract.js foi suficiente para Claude 3 Opus construir para mim esta ferramenta funcional de OCR de PDF. Na verdade, essa foi a ferramenta que deu início à minha coleção tools.simonwillison.net, que desde então cresceu para 139 e continua aumentando.

Aqui estou dizendo a Claude que quero a funcionalidade RTF para HTML do rtf-para-html.html combinado com a funcionalidade de salvamento Gist do openai-audio-output.html.

Esse tem muita coisa acontecendo. Ele usa a API de áudio OpenAI para gerar saída de áudio a partir de um prompt de texto, que é retornado por essa API como dados codificados em base64 em JSON.

Em seguida, ele oferece ao usuário um botão para salvar esse JSON em um Gist, que fornece uma URL ao snippet.

Outra ferramenta que escrevi, gpt-4o-audio-player.htmlpode então aceitar esse ID Gist no URL e buscar os dados JSON e tornar o áudio reproduzível no navegador. Aqui está um exemplo.

A parte mais complicada disso são os tokens de API. Eu criei ferramentas no passado que exigem que os usuários colem um GitHub Personal Access Token (PAT) (que eu armazeno em localStorage no navegador deles — não quero as credenciais de autenticação de outras pessoas perto dos meus próprios servidores). Mas isso é um pouco complicado.

Em vez disso, eu descobri o trabalhador mínimo da Cloudflare necessário para implementar a parte do lado do servidor do fluxo de autenticação do GitHub. Esse código mora aqui e significa que qualquer uma das ferramentas HTML+JavaScript da minha coleção pode implementar um fluxo de autenticação GitHub se precisar salvar Gists.

Mas não preciso contar nada disso à modelo! Posso apenas dizer “faça o mesmo truque que openai-audio-output.html faz” e Claude Code resolverá o resto sozinho.

O resultado

Esta é a aparência do aplicativo resultante depois de colar alguma saída de terminal da CLI do Claude Code:

É exatamente o que eu pedi, e a estética do terminal verde sobre preto também está correta.

Outras notas do vídeo

Há um monte de outras coisas que menciono no vídeo. Aqui está um rápido resumo: