Transformei meu uso do Claude em uma barra de vida de Minecraft (Claude Mods)

Autoria: Better Stack · Assistir no YouTube

Vídeo de autoria do canal indicado, não da IANIA; todos os direitos pertencem ao criador. Transcrição, resumo e tradução gerados automaticamente; o conteúdo no idioma original é preservado na versão em idioma original.

Idioma original: inglês

Vídeo original: Turning My Claude Usage Into a Minecraft Health Bar (Claude Mods) · Canal: Better Stack · 07:19 · Assistir no YouTube

Tópicos: Agentes de IA, Cibersegurança e segurança de software, Claude Code, Ferramentas de desenvolvimento com IA

Resumo

O vídeo apresenta Claude mods, um recurso oficial que permite modificar a interface e o comportamento do Claude Code por meio de arquivos TypeScript. O apresentador cria um mod que exibe o uso da assinatura e da context window em uma barra de vida de Minecraft, e depois outro que simula um chat da Twitch reagindo às ações do Claude. Ele destaca recursos como hot reloading, acesso a eventos e chamadas ao Claude Haiku usando a assinatura. Por fim, alerta que mods podem alterar prompts e recomenda verificar o que se instala.

Pontos-chave

Claude mods são arquivos TypeScript carregados como plugins no Claude Code, disponíveis na CLI e no app desktop.
Diferentemente de hooks, mods rodam dentro do processo e podem reescrever eventos, desenhar elementos de interface ou substituir recursos.
O primeiro mod representa métricas de uso e da context window com elementos visuais de uma barra de vida de Minecraft.
O mod usa uma rota não documentada para obter uma métrica que não é fornecida diretamente pela API de mods.
Mods podem desenhar interfaces alternativas no terminal, usando caracteres para representar imagens.
Arquivos criados em pastas temporárias podem ser apagados; para preservar um mod, é possível copiá-lo para outra pasta ou instalá-lo em outras sessões.
O segundo mod usa Claude Haiku para gerar mensagens de um chat fictício que reage às ações do Claude em tempo real.
Como mods podem alterar ou complementar prompts, é importante revisar os mods antes de instalá-los.

Capítulos

Início	Capítulo	Resumo
00:00	Apresentação de Claude mods	O vídeo introduz os mods como uma forma de personalizar o Claude Code e compara seu funcionamento ao de hooks.
01:36	Criando uma barra de vida de Minecraft	O apresentador pede ao Claude Code que crie um mod para exibir métricas de uso e da context window como uma barra de vida.
04:11	Um chat fictício da Twitch	O apresentador instala o mod em outras sessões e cria um chat que reage às ações do Claude usando Claude Haiku.
05:44	Reações ao vivo e cuidados ao instalar mods	O chat reage às tarefas em tempo real, e o vídeo termina recomendando cautela porque mods podem alterar prompts.

Citações

Enquanto você espera a tarefa terminar, poderia jogar Subway Surfers e tentar bater seu recorde. — 00:00

Hooks rodam fora do Claude Code, enquanto mods rodam dentro do processo. — 01:05

Agora temos uma barra de vida de Minecraft que mostra meu uso da assinatura e da context window. — 02:38

Chat, isso é real ou você acabou de aceitar a tarefa mais absurda de todas? — 05:13

Mods têm o poder de reescrever seus prompts por completo ou acrescentar coisas a eles. Sempre confira o que está instalando. — 06:47

Conceitos e entidades

Claude Mods (ferramenta): Recurso oficial que permite personalizar a interface e o comportamento do Claude Code por meio de mods.
Claude Code (ferramenta): Ferramenta em que os mods demonstrados são carregados e executados.
Claude Haiku (modelo): Modelo usado pelo mod para gerar mensagens de um chat fictício em resposta às ações do Claude.
Claude hooks (ferramenta): Mecanismo mencionado como alternativa aos mods, que executa fora do processo do Claude Code.
Minecraft (conceito): Jogo cuja barra de vida inspira a interface visual do primeiro mod.
Subway Surfers (conceito): Jogo citado como opção de entretenimento enquanto o Claude conclui uma tarefa.
DOOM (conceito): Jogo citado como exemplo de lobby multiplayer para pessoas que aguardam a conclusão de tarefas.
Three.js (ferramenta): Biblioteca usada como exemplo de tarefa que provoca reações do chat fictício.

Tradução completa (pt-BR)

00:00 Esperar pelo Claude é entediante, mas, com esse novo recurso, não precisa ser. Enquanto espera a tarefa terminar, você pode jogar Subway Surfers e tentar bater seu novo recorde. Ou, se jogar sozinho não é a sua praia, por que não abrir uma sala de Doom em que todo mundo também está esperando o Claude terminar, para você curtir um tempo com seus companheiros proxies de carne? Tudo isso e muito mais é possível graças aos Claude mods, um recurso oficial que permite modificar o funcionamento do Claude, adicionando suas próprias interfaces ou mudando completamente as do Claude, além de adicionar comandos, regras de tool calling e muito mais. Então, vamos começar e criar o nosso.

00:34 Na verdade, o Claude mod é bem simples. É só um pequeno arquivo TypeScript que fica dentro do Claude Code como um plugin, e funciona tanto na CLI quanto no app para desktop. E, obviamente, ele foi pensado para opções mais úteis, como mostrar informações extras em um painel ou na linha de status, ou exibir coisas como PRs e outras informações do Git dentro do Claude. Basicamente, você pode fazer o que quiser com eles. Na verdade, criei um que carrega um dos nossos vídeos enquanto você espera o Claude terminar, para eu poder pedir que você se inscreva. Talvez você esteja pensando que já viu isso antes com os Claude hooks, mas os mods são diferentes. Os hooks são executados fora do Claude Code, enquanto os mods são executados

01:05 dentro do processo. Isso significa que os hooks não podem reescrever eventos, desenhar a interface nem substituir recursos, mas os mods podem. Na verdade, alguns recursos do Claude são os próprios mods, como o painel de diff ou o suporte a agents.md. Esses mods funcionam com eventos. Toda vez que o Claude Code faz alguma coisa, como uma chamada de ferramenta, envia um prompt ou finaliza uma rodada, ele envia eventos, e os mods usam esses eventos de três maneiras: apenas observando-os, reescrevendo-os ou ignorando-os completamente. Além disso, os mods também podem desenhar elementos, então podem adicionar um painel a uma conversa, uma faixa acima de um prompt, botões,

01:36 campos de entrada ou até mesmo mudar a interface do Claude Code, como trocar o indicador de carregamento por algo personalizado. Como você pode ver, eles são incrivelmente flexíveis, então vamos criar o nosso. Vou fazer um mais ou menos sério e depois um bobo, e a boa notícia é que você não precisa se preocupar muito com o código desses mods. É só descrever o que você quer para o Claude Code, e ele pode criar o mod para você. Vou começar pelo mais ou menos sério, ou pelo menos pelo que vai ser útil. Talvez não pareça muito sério, já que colei aqui um pouco do HUD do Minecraft, mas, basicamente, quero que o uso da minha assinatura apareça como uma barra de vida do Minecraft. Então, vou enviar o prompt.

02:07 Você pode criar um mod de linha de status para mim? Quero uma reprodução exata do HUD do Minecraft. Fique à vontade para usar a internet, caso precise baixar os sprites originais. Quero que a vida represente meu uso em 7 dias. Quero que a saturação represente meu uso em 5 horas. Quero que a armadura represente meu uso do Fable, e quero que a barra de XP mostre o uso da minha context window. Agora, só precisamos clicar em enviar e, com sorte, em poucos minutos o mod estará pronto. Certo, ele está trabalhando nisso há uns 5 minutos. Você pode ver que está me pedindo para ativar o recarregamento a quente nesta sessão, o que é muito legal. Basicamente, podemos ativar isso e, então, ele pode criar o mod e atualizá-lo aqui mesmo na

02:38 sessão, sem precisarmos recarregar nada. Você pode ver que o recarregamento a quente dos mods está ativado. Os mods desta sessão serão carregados quando esta rodada terminar. Então, devemos ver alguma coisa quando isso acabar. E pronto, a rodada terminou, e ele acabou de carregar este mod para mim. Agora temos um HUD do Minecraft que mostra o uso da minha assinatura e da minha context window. Estamos usando cerca de 22% da minha context window, além de 10% do meu uso em 7 dias e do meu uso do Fable. Se eu clicar aqui embaixo, devemos ver se as informações estão corretas. E sim, lá está, bate certinho. Então, parece que está tudo funcionando.

03:08 A única coisa errada é o fundo branco. Então, vou enviar um prompt de acompanhamento pedindo para removê-lo. E agora está absolutamente perfeito. Acho isso muito legal, e ele fez um trabalho incrível criando esse mod para mim. Estou até pensando em deixar isso para vídeos futuros, só para ver se as pessoas ficam confusas sobre o motivo de eu ter isso. Há duas coisas que esse mod fez que acho muito legais e quero destacar. A primeira é de onde tirei o número do Fable. Você pode ver aqui que a API do mod só fornece os valores de 5 horas e 7 dias. Ela não fornece os valores de uso do Fable. Então, o que ele fez foi ler o comando {slash}usage, descobrir a qual endpoint ele fazia a requisição, que é

03:40 não documentado, e depois ler a própria resposta. Ele consegue fazer isso porque é um mod, então pode simplesmente enviar requisições autenticadas com meu login. Isso significa que você pode fazer um mod executar basicamente qualquer coisa que o Claude Code consiga fazer. A segunda coisa legal foi adicionar alternativas quando não consegue exibir imagens, neste caso, no terminal. Na verdade, cada um desses pixels é renderizado como dois caracteres, o que significa que a imagem fica um pouco distorcida se eu aumentar o zoom e o tamanho da fonte. Mas, nessa escala, fica bem legal, e tenho certeza de que poderia enviar prompts de acompanhamento para deixá-la mais redimensionável ou até adicionar alguns comandos personalizados para fazer isso na hora. Sinceramente, fiquei muito

04:11 surpreso com a precisão dessa reprodução. Uma coisa para ter em mente: se você pedir ao Claude para criar os próprios mods, ele vai fazer isso em uma pasta temporária, que é limpa periodicamente, então tudo será apagado. Se quiser guardar esse mod ou compartilhá-lo com outras pessoas, basta vir aqui e copiar a pasta para outro lugar. Ou você pode fazer como eu fiz e simplesmente pedir ao Claude para instalar isso em todas as minhas outras sessões; ele copia o mod para a minha pasta de mods. Então, agora, em uma nova sessão, vou enviar outro prompt para criar um novo mod bobo. E você pode ver aqui que meu HUD do Minecraft carrega imediatamente, mas o novo mod que quero é basicamente um chat falso da Twitch,

04:42 em que o Claude Haiku lê tudo o que o Claude está fazendo e reage ao vivo na lateral. Certo, crie meu novo mod com o chat falso da Twitch. E, sinceramente, ele já está sendo bem engraçado. Fechei este painel aqui e não sabia como abri-lo de novo. Pelo visto, é só usar o comando {slash}back seat. Mas parece que ele tirou sarro de mim aqui, dizendo: “cara, é só usar {slash}back seat, não é tão difícil assim”. Então já estou levando zoação do chat falso de IA. Quero brincar mais um pouco com isso, então vou pedir um jogo em 3JS e ver o que o chat vai dizer aqui do lado. Você pode ver que ele está dizendo que estou tentando fazer Forza em um único arquivo HTML,

05:13 o que é um comentário bem engraçado no chat. E sim, parece que é isso que muita gente anda fazendo com 3JS. “Chat, isso é real ou você acabou de aceitar a tarefa mais sem noção de todas?” O que está acontecendo aqui é que ele lê cada tarefa e cada etapa que o Claude executa. Então, quando ele lê um arquivo, o chat fica sabendo. Quando tenta executar um comando Bash, o chat fica sabendo. Ele envia essas informações ao Haiku, que gera as mensagens falsas do chat e as envia para cá. Outra coisa legal é que, como isso é um mod, ele pode usar minha assinatura para fazer chamadas ao Claude Haiku. Então, não preciso adicionar chaves de API nem nada do tipo; simplesmente funciona.

05:44 Certo, então o Claude começou a fazer algumas coisas aqui, e dá para ver que o chat reagiu ao vivo a cada etapa que temos aqui. Dá para ver que ele acabou de fazer um speedrun para entrar em /temp? Então leu e viu aquilo. Lendo PNGs agora. Que código é esse? Chat, isso é real ou o Claude acabou de fazer um speedrun? Cara, esse caminho está ferrado. Qual é a estrutura de diretórios? É só mandar um rmrf e começar de novo. Sinceramente, falta de habilidade. Por favor, não mande um rmrf em lugar nenhum, por favor. Eu realmente não quero isso. Entre no reino das sombras com um speedrun. Cara, é só ler o arquivo. E agora? Mande para o dev. Não. Chat, isso é real? Estamos

06:16 carregando imagens no terminal e, pog, o arquivo existe. Agora, faça algo com ele de verdade. Isso é meio amaldiçoado, sinceramente. Eu simplesmente parei porque não quero mesmo uma demonstração de 3.js, mas dá para ver, chat: isso é falta de habilidade ou não? E GG, interrompido no meio do trabalho. Que chato. Então, parece que o Claude haiku está de luto porque parei o Claude de fazer o que podia. Mas agora vou pedir que ele remova tudo relacionado à demonstração de 3.js. Aí, 3.js sendo chutado para longe. Alguém está fazendo um speedrun. Esse chat está realmente obcecado por speedruns. Chat, isso está acontecendo de verdade agora? Ganhei cinco inscrições de presente, aparentemente.

06:47 Uma estrutura de diretórios totalmente embolada. É só mandar um rmrf em tudo e começar do zero. Cara, simplesmente apagou o projeto inteiro. E então, chat, ele vai refazer ou não? Que triste. Sinceramente, estou me divertindo demais com esses mods. Recomendo muito que vocês experimentem. Isso só mostrou um pouco do poder deles. Se quiser ver outros casos de uso legais, vou deixar alguns repos da comunidade e uma lista incrível na descrição abaixo. Mas tome cuidado ao instalar essas coisas. Os mods realmente podem reescrever seus prompts por completo ou acrescentar coisas a eles, entre muitas outras coisas. Então sempre confira o que está instalando. Você

07:19 tem algum caso de uso legal para os mods do Claude, ou algum simplesmente bobo? Me conta nos comentários abaixo. Já que está por aí, inscreva-se. E, como sempre, até a próxima.

Transcrição original

[00:00] Waiting for Claude’s boring, but with this new feature, it doesn’t have to be. While you wait for the task to finish, you could play Subway Surfers and try and get your new high score. Or if solo gaming isn’t for you, why not have it open up a Doom lobby where everyone else in the lobby is also waiting for that Claude to finish, so you can enjoy some time with your fellow meat proxies. All of this and more is made possible thanks to Claude mods, an official feature that lets you modify how Claude works, letting you add your own interfaces or completely changing Claude’s, as well as adding commands, tool call rules, and more. So, let’s jump in and build our own.

[00:34] So, Claude mod is actually really simple. It’s just a small TypeScript file that lives inside of Claude code as a plugin, and it works on both the CLI and the desktop app. And obviously, it’s meant for more useful options like showing extra information in a pane or the status line, or giving you things like PR and other get information inside of Claude. You can basically do anything you want with these, and I actually made one that loads up one of our videos while you wait for Claude to finish, so I could ask you to subscribe. Now, you might be thinking that you’ve seen this before with Claude hooks, but mods are actually different from those. Hooks run outside of Claude code, whereas mods run

[01:05] inside the process. This means that hooks can’t rewrite events, draw UI, or replace features, but mods can. In fact, some of Claude’s features are just mods themselves, like the diff pane or the agents.md support. The way that these mods work is with events. Every time Claude code does something, like a tool call, prompt send, or finalizes a turn, they will send events, and mods use those events in three ways, either by simply observing them, rewriting them, or skipping them entirely. Then on top of this, mods can also draw, so they can add a pane into a conversation, add a band above a prompt, add buttons,

[01:36] inputs, or even change Claude code’s UI, like changing the spinner to something custom. As you can see, these are incredibly flexible, so let’s build our own. I’ll do one semi-serious one, and then one silly one, and the good news is you don’t really have to care much about the code in these. You can just describe what you want to Claude code, and it can build the mod for you. I’ll start by building my semi-serious one, or at least the one that’s going to provide some value. It might not look too serious since I’ve just pasted in some of the Minecraft hard, but essentially what I want is my subscription usage to be displayed as a Minecraft health bar. So, I’ll go ahead and send the prompt.

[02:07] Can you build me a status line mod? I want an exact recreation of the Minecraft hard. Feel free to use the internet if you need to download the real sprites. I want the health to be my 7-day usage. I want the saturation to be my 5-hour usage. I want armor to be my fable usage, and I want the XP bar to show my context window usage. Now, all we need to do is hit send, and hopefully in just a few minutes it should have this mod ready for us. Okay, it’s been working for about 5 minutes here. You can see it’s asking me to enable hot reloading for this session, which is really cool. Essentially, we can just enable this, and now it can build the mod and refresh it right here in the

[02:38] session without us having to reload anything. You can see the mod hot reloading is on. This session mods will load when this turn ends. So, we should see something once it’s done. And here we go, that turn is now over, and it literally just loaded in this mod for me. We now have a Minecraft hard that shows my subscription usage as well as my context window. So, we’re using up about 22% of my context window, as well as 10% of my 7-day usage and my fable usage. If I click down here, we should see that the information is correct, and yeah, there we go, it lines up exactly. So, everything does seem to be working.

[03:08] The only thing that’s wrong with this is the white background. So, I’ll just send a follow-up prompt to ask it to remove it. And now it is absolutely perfect. I actually think this is really cool, and it’s done a really amazing job of building me this mod. I kind of want to keep this around for future videos just to see if people get confused as to why I have this. Now, there are two things this mod has done I think are really cool and want to point out. The first one is where I got the fable number from. You can see here it says the mod API only gives the 5-hour and 7-day figures. It doesn’t actually give the fable usage figures. So, what it did is it just read the {slash} usage command, saw what endpoint that hit, which is

[03:40] undocumented, and then read the response itself, and it’s able to do that since this is a mod, so it can just send requests authenticated as my login. This means you can get a mod to do basically anything that Claude Code can. The second cool thing it did was add full backs when it can’t show images, in this case in the terminal. This is actually rendering in these pixels as two characters each, and that does mean that it scales a bit badly if I zoom in and make the font size larger, but at this scale it actually looks pretty good, and I’m sure I could send follow-up prompts to get this more resizable, or even add some custom commands so I could do that on the fly. Honestly, I was just really

[04:11] surprised at how accurate it got this recreation. One thing to be aware of, if you do ask Claude to build its own mods, it will actually do this in a temporary folder, which does get cleaned up periodically, so it will delete everything. So if you do want to save this mod or share it with other people, all you need to do is just go here and copy the folder somewhere else, or you can do I did and simply ask Claude to install this into all of my other sessions, and it just copies it into my mods folder. So now in a new session, I’m going to send another prompt for a new silly mod, and you can see here that my Minecraft hard loads up straight away, but the new mod that I want is essentially just a fake Twitch chat,

[04:42] where we have Claude Haiku read everything that Claude is doing, and then it reacts live on the side. Okay, build me my new mod where we have the fake Twitch chat, and honestly, it’s already being pretty funny. I actually closed this pane over here and didn’t know how to get it back, and apparently it’s just the {slash} back seat command, but it seemingly roasted me here, where it says bro, just {slash} back seat, it’s literally not that hard. So I’m already being roasted by the fake AI chat. I want to play around with this a bit more, so I’m just going to ask for a 3JS game and see what the chat does over here. You can see it’s saying that I’m trying to make Forza in a single HTML

[05:13] file, which is a pretty funny chat, and yes, that seems to be what a lot of people do these days with 3JS. Saying chat, is this real or did you just accept the most unhinged task ever? And what’s actually happening here is it’s reading each task and each step that Claude is doing. So when it reads a file, this chat will know about it. When it tries to run a bash command, the chat will know about it, and it’s sending this to Haiku, generating the fake chat messages, and then sending them here. The other cool thing about that is since this is a mod, it can use my subscription for the Claude Haiku calls, so I don’t need to add any API keys or anything like that, it just all works.

[05:44] Okay, so Claude has has started to do some things here, and you can see that chat reacted live to each step that we have here. You can see did it just speedrun into {slash} temp, so read it saw that. Reading PNGs now, what code is this? Chat, is this real or did Claude just speedrun? Bro, that path is cooked. What is the directory structure? Just rmrf and start over. Honestly, skill issue. Please don’t rmrf anywhere, please. I I really don’t want that. CD into the shadow realm speedrun. Bro, just read the file. What’s next? Send it to dev. No. Chat, is this real? We’re

[06:16] loading images in the terminal and pog the file exists. Now, actually do something with it. This is honestly a little bit cursed. I just stopped it because I don’t actually want a 3.js demo, but you can see chat, is this a skill issue or nah? And GG interrupted mid-work. That’s rough. So, seems like Claude haiku is mourning that I stopped Claude doing what it could. But, now I’m going to ask it to remove anything related to the 3.js demo. Yo, 3.js getting yeeted. Someone speedrun. It’s really obsessed with speedruns this chat. Chat, is this real right now? I got gifted five subs, apparently.

[06:47] Absolute spaghetti directory structure. Just rmrf that whole thing and start fresh. Bro just deleted the whole project. And then also chat, is he going to redo it or nah? This is sad. Honestly, I’m having way too much fun with these mods. I highly recommend you try them out. That you only showed you a bit of that power. If you want to see some other cool use cases, I’ll leave a few cool community repos and awesome list in the description down below. Although, do be careful when you install these things. Mods actually have the power to rewrite your prompts entirely or add to them and loads of things. So, always check what you’re installing. Do

[07:19] you have any cool use cases for Claude mods or just plain silly ones? Let me know in the comments down below. While you’re there, subscribe. And as always, see you in the next one.