> For the complete documentation index, see [llms.txt](https://docs.decentraland.org/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.decentraland.org/creator/content-creator-pt/scenes-sdk7/primeiros-passos/vibe-coding.md). # Vibe Coding com IA Construa scenes do Decentraland com assistentes de IA usando o Creator Hub e o official Decentraland SDK Skills (npx skills add decentraland/sdk-skills). Construa scenes do Decentraland descrevendo o que você quer. Um assistente de IA cuida do código SDK7, da arquitetura ECS e da estrutura do projeto para você. Seja você um criador de primeira viagem ou um desenvolvedor experiente, o "vibe coding" assistido por IA permite ir de uma ideia a uma scene em execução em minutos, em vez de horas. {% hint style="info" %} **💡 Dica**: Você não precisa saber TypeScript para começar. Assistentes de IA podem gerar código de scene funcional a partir de descrições em linguagem natural. {% endhint %} ## O que é Vibe Coding? Vibe coding significa construir scenes tendo uma conversa com um assistente de IA, em vez de escrever cada linha de código manualmente. Você descreve o que quer — "uma taberna medieval com portas clicáveis e música de fundo" — e a IA escreve código SDK7 correto e pronto para deploy. Essa abordagem funciona em qualquer nível de habilidade: * **Iniciantes e não desenvolvedores** — Vá do zero a uma scene funcional sem escrever código manualmente. * **Desenvolvedores experientes** — Pule o boilerplate. Deixe a IA cuidar da sincronização multiplayer, da estrutura da UI e da configuração de deploy enquanto você se concentra nas decisões criativas. * **Equipes e estúdios** — Prototipe conceitos de scene rapidamente antes de comprometer recursos completos de desenvolvimento. ## Use o Assistente de IA no Creator Hub A maneira mais rápida de começar é o recurso integrado do Creator Hub [Assistente de IA](/creator/content-creator-pt/scene-editor/estender-com-codigo/ai-assistant.md). Ele vê sua scene aberta, edita entities, components, smart items e código para você, e pode executar o preview para verificar seu próprio trabalho. Ele instala automaticamente as skills abaixo no seu projeto, então não há nada para configurar além de fazer login em uma CLI de programação. É um recurso experimental, desativado por padrão. ## Combine um editor de código com IA Use um editor de código com IA de uso geral como [Cursor](https://www.cursor.com/) ou VS Code com GitHub Copilot ou Claude AI. Decentraland fornece uma pasta de contexto para que essas ferramentas entendam o SDK. 1. Abra o Creator Hub e crie ou abra uma scene. 2. Clique no **< > CODE** botão para abrir seu editor de código. 3. Use o assistente de IA integrado ao editor (chat do Cursor, Copilot etc.) para gerar ou modificar código. ## Instale Skills para qualquer agente de IA Skills são conjuntos de instruções prontos que ensinam seu agente de IA a trabalhar com o Decentraland SDK. Cada skill cobre um tópico específico, como criar scenes, adicionar modelos 3D ou configurar multiplayer, então a IA já conhece os padrões, APIs e restrições corretos sem que você precise explicá-los. Instalar skills significa menos erros e melhores resultados desde o primeiro prompt. ```bash # Escolha quais skills do Decentraland instalar em um seletor interativo npx skills add decentraland/sdk-skills # Ou instale todas as skills do Decentraland npx skills add decentraland/sdk-skills --all # Ou escolha skills específicas npx skills add decentraland/sdk-skills --skill create-scene # Instale globalmente (disponível em todos os projetos) npx skills add decentraland/sdk-skills -g ``` Isso copia os arquivos de skill para a configuração do seu agente, para que ele conheça os padrões e as restrições do Decentraland. ## Atualizando Skills Novas skills são adicionadas ao longo do tempo, e as existentes são aprimoradas. Para obter as versões mais recentes, execute novamente o comando de instalação com `--all`: ```bash # Atualize cada skill instalada e baixe quaisquer novas npx skills add decentraland/sdk-skills --all ``` Executar `add` novamente busca o repositório, atualizando as skills que você já tem e instalando as que foram adicionadas desde a sua primeira instalação. Se você instalou skills globalmente, adicione `-g` a este comando também. {% hint style="warning" %} **📔 Nota**: Não use `npx skills update` para isso. Ele apenas atualiza as skills já instaladas na sua máquina, então quaisquer skills adicionadas ao repositório após sua última instalação são ignoradas silenciosamente. Sempre use `npx skills add decentraland/sdk-skills --all` em vez disso. {% endhint %} ## Skills de IA disponíveis Ao instalar skills no seu agente, as seguintes capacidades ficam disponíveis: | Skill | O que faz | | ---------------------- | -------------------------------------------------------------------------------- | | `sdk-scenes` | Ponto de entrada com diretrizes do agente e índice de todas as skills por tópico | | `create-scene` | Estruture um novo projeto de scene SDK7 do zero | | `migrate-sdk6-to-sdk7` | Porte uma scene legada do SDK6 para o SDK7 | | `add-3d-models` | Adicione modelos 3D (`.glb`/`.gltf`) com posicionamento, escala, colliders | | `add-interactivity` | Eventos de pointer, triggers, raycasts | | `build-ui` | UI de espaço de tela 2D com React-ECS — HUDs, menus, diálogos | | `animations-tweens` | Animações de modelos GLTF com Animator, tweens do SDK | | `multiplayer-sync` | Multiplayer ponto a ponto usando rede CRDT | | `authoritative-server` | Servidor Headless Multiplayer para scenes validadas por servidor (BETA) | | `audio-video` | Efeitos sonoros, música, streaming de áudio e players de vídeo | | `audio-analysis` | Dados em tempo real de amplitude e frequência para scenes reativas a áudio | | `deploy-scene` | Fazer deploy de scenes para Genesis City (baseado em LAND) | | `deploy-worlds` | Fazer deploy de scenes para Worlds (espaços 3D pessoais) | | `optimize-scene` | Otimização de desempenho, limites da scene, boas práticas | | `camera-control` | Detecção do modo de câmera, câmera cinematográfica, câmeras virtuais | | `composites` | Referência do formato de arquivo Composite para conteúdo estático da scene | | `lighting-environment` | Iluminação dinâmica, sombras, skybox, fog, configurações de ambiente | | `particle-system` | Efeitos de partículas — fogo, fumaça, faíscas, neve, fogos de artifício | | `npcs` | Personagens não jogadores — biblioteca do NPC Toolkit e abordagens manuais | | `player-avatar` | Posição do player, perfil, personalização do avatar, attachments | | `player-physics` | Forças físicas — impulsos, knockback, forças contínuas | | `nft-blockchain` | Exibição de NFT e interações com blockchain/cripto | | `advanced-rendering` | Billboard, TextShape, materiais PBR, materiais de vídeo | | `advanced-input` | Polling de input em nível de sistema e controle de movimento do player | | `scene-runtime` | APIs de runtime transversais — trabalho assíncrono, HTTP, mensagens | | `script-components` | Classes de component de script para o Creator Hub | | `game-design` | Padrões de game design, limites da scene, orçamentos de desempenho | | `unity-explorer-mcp` | Controle um Explorer em execução para testar e verificar uma scene in-world | Observação: algumas dessas skills envolvem buscar modelos 3D ou outros assets em catálogos gratuitos de assets. O agente de IA deve sempre obter confirmação do usuário antes de baixar quaisquer novos assets para um projeto de scene. ## Deixe a IA ver sua scene no mundo Normalmente a IA escreve o código e *você* executa o preview, olha para ele e informa o que está errado. O cliente desktop da Decentraland pode fechar esse ciclo: ele vem com um opcional **servidor MCP** que permite a um agente de IA ver e controlar o Explorer em execução diretamente. O agente tira suas próprias capturas de tela, lê a saída do console da scene, anda com o player pelo ambiente, clica em objects e verifica se a scene realmente faz o que foi solicitado para construir — depois corrige o que encontra e olha novamente. Isso transforma o vibe coding de "descrever, esperar, revisar" em um loop que o agente pode executar quase todo sozinho. {% hint style="info" %} **💡 Dica**: Instale o `unity-explorer-mcp` skill antes de tentar isso. Ele ensina ao agente todo o fluxo de trabalho — como iniciar o client, como enquadrar screenshots úteis, como cruzar o que ele vê com o estado real da scene e como se recuperar quando a scene para de carregar. ```bash npx skills add decentraland/sdk-skills --skill unity-explorer-mcp ``` {% endhint %} ### O que você precisa * Os **Cliente desktop da Decentraland** instalado (o mesmo que o Creator Hub inicia para previews). * Um agente de IA que consiga se conectar a servidores MCP via HTTP — Claude Code, Cursor, Cline, VS Code com uma extensão compatível com MCP e outros. * Um SDK atualizado na sua scene: execute `npm i @dcl/sdk@latest` se a `--mcp` for rejeitada como uma opção desconhecida. ### # 1. Inicie a scene com o servidor MCP ativado Da pasta da sua scene: ```bash npm run start -- --mcp ``` Isso faz o que `npm run start` sempre faz — serve sua scene em `http://127.0.0.1:8000` e faz hot-reload dela sempre que você salva um arquivo — e também inicia o cliente desktop com o servidor MCP escutando em `http://127.0.0.1:8123/unity-explorer-mcp`. Faça login quando o client abrir. O agente só pode começar a trabalhar depois que você passar pela tela de login e o mundo tiver carregado. ### # 2. Conecte seu agente de IA ao servidor Em **Claude Code**, registre-o uma vez: ```bash claude mcp add --transport http --scope user explorer http://127.0.0.1:8123/unity-explorer-mcp ``` Em **qualquer outro client MCP**, adicione o servidor da forma documentada por esse client, usando estes detalhes: | Configuração | Valor | | ------------ | -------------------------------------------------------------------------------------------------------- | | Transporte | Streamable HTTP (não stdio — não há comando para executar, o servidor vive dentro do client em execução) | | URL | `http://127.0.0.1:8123/unity-explorer-mcp` | | Autenticação | Nenhuma | | Nome | `explorer` | Muitos clients usam um arquivo de configuração JSON para isso (`.cursor/mcp.json`, `mcp.json`, e semelhantes — consulte a documentação do seu client para os nomes exatos das chaves): ```json { "mcpServers": { "explorer": { "type": "http", "url": "http://127.0.0.1:8123/unity-explorer-mcp" } } } ``` Reinicie ou recarregue seu client de IA depois de registrar o servidor, para que ele carregue a conexão. Se o agente disser que as ferramentas do Explorer não estão disponíveis, a causa usual é que o client não estava em execução quando o agente iniciou — reconecte o servidor (no Claude Code, execute `/mcp`) com o Explorer aberto. {% hint style="info" %} **Isso é seguro?** O servidor só é executado enquanto você inicia o client com `--mcp`, só aceita conexões da sua própria máquina (`127.0.0.1`), e rejeita solicitações vindas de páginas da web. Nada é exposto à internet, e isso fica completamente desativado em uma inicialização normal do client. {% endhint %} ### # 3. Peça o que você quer e deixe-o verificar Com o servidor conectado, peça trabalhos da maneira como normalmente faria — a diferença é que o agente agora pode verificar seus próprios resultados: > "Adicione um baú do tesouro no centro da parcel que abra quando clicado e depois caminhe até ele e clique para confirmar que a tampa anima." > "A placa de neon está muito fraca. Tire uma captura de tela, ajuste a intensidade emissiva e me mostre um antes/depois." > "Algo está errado com o elevador. Suba na plataforma, observe os logs e me diga por que ele não se move." Nos bastidores, o agente pode: * **Veja** — tirar capturas de tela, ler a `console.log` da scene e os erros, verificar se a scene carregou ou travou, listar as entities da scene e inspecionar seus components, e ler a posição do player e da câmera. * **Controlar** — mover e teleportar o player, andar em uma direção através de colisões reais, apontar a câmera, colocar uma câmera livre para uma tomada específica, alternar os modos de câmera, clicar em objects da scene, enviar mensagens de chat e `/commands`, disparar emotes e recarregar a scene. * **Medir** — ler contagens ao vivo do conteúdo da scene (triangles, entities, textures, materials e mais) em relação aos limites da Decentraland, classificar quais modelos 3D contribuem mais para essa carga a partir de qualquer ponto de vista e amostrar a taxa de quadros real que o player experimenta em qualquer lugar. ### Use isso para otimizar sua scene Como o agente pode medir assim como ver, você pode entregar diretamente a ele trabalho de desempenho. Ele pode verificar sua scene em relação aos [limitações da cena](/creator/content-creator-pt/scenes-sdk7/otimizacao/scene-limitations.md), identificar quais modelos 3D são os mais pesados, medir a taxa de quadros em pontos específicos e, o mais importante, medir novamente depois de fazer mudanças para provar que elas ajudaram: > "Verifique se minha scene está dentro dos limites de conteúdo da Decentraland e me diga qual orçamento está mais próximo do limite." > "A scene parece travar perto da fonte. Fique ali, meça a taxa de quadros e me diga quais modelos custam mais a partir desse ponto." > "Otimize a scene: descubra o que está derrubando a taxa de quadros, corrija e me mostre medições antes e depois." Para melhores resultados, instale o `optimize-scene` skill junto com `unity-explorer-mcp`, para que o agente também conheça as melhores práticas de otimização da Decentraland. Veja [Otimização de Desempenho](/creator/content-creator-pt/scenes-sdk7/otimizacao/performance-optimization.md#optimize-with-ai) para saber mais sobre esse fluxo de trabalho, inclusive como combiná-lo com o servidor MCP do Blender para automatizar correções nos próprios modelos 3D. ### Dicas * **Peça provas, não alegações.** "Verifique com uma captura de tela" ou "confirme nos logs" é o que faz esse fluxo de trabalho valer a pena. Um bom agente cruza os dois: pixels podem parecer certos enquanto o estado subjacente está quebrado, e o contrário também. * **Capturas de tela custam tokens.** Cada captura de tela que o agente analisa consome parte do seu contexto. Se você quiser uma análise visual longa — uma animação ao longo do tempo, um tour por muitos pontos — peça para ele capturar frames em arquivos e ler apenas os que importam. O `unity-explorer-mcp` skill vem com um script que faz exatamente isso. * **Salve uma vez, não cinco vezes seguidas.** Salvamentos rápidos sucessivos podem fazer o client carregar um bundle parcialmente escrito e derrubar a scene por completo, o que exige reiniciar o client para recuperar. Peça ao agente que agrupe suas edições em um único salvamento. * **Mantenha o client aberto.** Se você o fechar, a conexão cai e o agente perde os olhos. Reiniciá-lo com o mesmo comando o traz de volta. * **Teleports se comportam de maneira diferente no desenvolvimento local da scene.** Mover-se entre parcels com `/goto` é proibido ali, então o agente deve reposicionar o player dentro da scene em vez de teleportar. ## Dicas para Prompting Eficaz Obter os melhores resultados da IA depende de fornecer prompts claros e específicos. Aqui estão algumas dicas: ### Seja específico sobre o que você quer Em vez de: > "Torne minha scene melhor" Tente: > "Adicione uma porta na posição (8, 0, 8) que se abre com uma animação de rotação quando clicada, e reproduz um efeito sonoro de rangido" ### Faça referência a itens existentes > "Faça o botão vermelho na mesa acionar o elevador para subir" ### Peça uma coisa de cada vez Divida pedidos complexos em etapas: 1. "Adicione uma UI de placar no canto superior direito" 2. "Adicione um contador que aumenta quando o player clica no alvo" 3. "Exiba o valor do contador no placar" ### Itere e refine Depois de cada mudança: 1. Faça o preview da scene (clique **Preview** no Creator Hub, ou `npm run start` na linha de comando) 2. Verifique o que funciona e o que não funciona 3. Diga à IA o que ajustar: "Mova o NPC 2 metros para a esquerda e faça-o ficar de frente para o player" ### Exemplos de prompts Para ser executado em um clone limpo de [sdk7-scene-template](https://github.com/decentraland/sdk7-scene-template/). #### Exemplo de prompt 1 ``` Quero que você descarte o código atual da scene e faça um jogo de labirinto simples e pequeno, em 1 parcel, as paredes podem ser cubos e devem ter colisão. O jogo deve começar quando o player realmente entrar no labirinto no ponto A e terminar quando ele sair no ponto B (a única saída do labirinto). Quero que você adicione 3 portas diferentes no labirinto, que precisam ser interagidas com o input de ponteiro para abri-las e passar. Você deve verificar que o player realmente consegue jogar e vencer ``` #### Exemplo de prompt 2 ``` Quero que você descarte o código atual da scene e construa um jogo de plataforma simples. Você tem que verificar que o jogo pode ser vencido antes de considerá-lo concluído. ``` ## Com o que a IA Pode Ajudar * Estruturar novas scenes a partir de uma descrição * Adicionar e posicionar modelos 3D * Escrever manipuladores de clique e interatividade * Construir UI (HUDs, menus, diálogos) * Configurar a sincronização do multiplayer * Configurar o Multiplayer Server para anti-cheat * Adicionar áudio, vídeo e streaming * Criar animações e tweens * Otimizar o desempenho da scene * Preparar scenes para deploy * Depurar problemas em código existente * Testar e verificar visualmente uma scene em um Explorer em execução (veja [Deixe a IA ver sua scene no mundo](#let-the-ai-see-your-scene-in-world)) ## Limitações Embora as ferramentas de IA sejam poderosas, tenha isto em mente: * **Sempre faça o preview** — o código gerado por IA pode não ficar exatamente como você espera. Execute um preview para verificar. * **Os limites da scene ainda se aplicam** — a IA não pode contornar os [limitações da cena](/creator/content-creator-pt/scenes-sdk7/otimizacao/scene-limitations.md) (contagem de triangles, tamanhos de arquivo, limites de parcels). * **Lógica de jogo complexa** — para mecânicas de jogo intrincadas, talvez você precise orientar a IA passo a passo ou refinar a saída manualmente. * **Modelos 3D personalizados** — a IA pode referenciar assets gratuitos existentes ou carregar modelos que você fornecer, mas não pode criar modelos 3D do zero (a menos que você use outras ferramentas como o servidor MCP oficial do Blender ao mesmo tempo). ## Próximos passos * [Início rápido do SDK](/creator/content-creator-pt/scenes-sdk7/primeiros-passos/sdk-101.md) — aprenda os fundamentos do SDK7 * [Combine com código](/creator/content-creator-pt/scene-editor/estender-com-codigo/overview.md) — misture edição visual com código * [Multiplayer Server](/creator/content-creator-pt/scenes-sdk7/networking/authoritative-servers.md) — multiplayer com autoridade do servidor * [Exemplos de scene](https://studios.decentraland.org/resources?sdk_version=SDK7) — navegue por scenes de exemplo para se inspirar * [Recursos úteis](/creator/content-creator-pt/scenes-sdk7/primeiros-passos/useful-resources.md) — mais ferramentas de IA, bibliotecas de assets e add-ons para acelerar seu fluxo de trabalho --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.decentraland.org/creator/content-creator-pt/scenes-sdk7/primeiros-passos/vibe-coding.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.