Bem-vindo ao
Tutorial Completo
Tudo que voce precisa saber pra usar cada ferramenta. Clique no menu ☰ pra navegar!
O que tem aqui
💬 Chatbots
novAI, novAI V2, groqAI e miniAI. Como colocar a chave e conversar.
🏗 Builders
HTML Builder, Bot Builder, Site Builder, AI Builder V3 e Kimi Builder.
🔑 Chaves de API
Onde pegar cada chave gratuitamente: Anthropic, Groq, Google e OpenAI.
🐙 GitHub Pages
Como hospedar tudo online de graca com link permanente.
💡Dica: Nunca abra os arquivos direto pelo explorador - use Netlify ou GitHub Pages pra as APIs funcionarem!
🔑 Chaves de API
Anthropic · novAI
Credito inicial de $5
1
Acessa
2
Cria conta → API Keys → Create Key
Comeca com sk-ant-...
Groq · groqAI, novAI V2, Kimi Builder
100% gratis
1
Acessa
2
Loga com Google → API Keys → Create
Comeca com gsk_...
Google AI Studio · AI Builder V3
Gratis - 500 req/dia
1
Acessa
2
Loga com Google → Get API key → Create
Comeca com AIza...
OpenAI · miniAI
Minimo $5 de credito
1
Acessa
2
Cria conta → API Keys → Create
Comeca com sk-...
🔒Suas chaves ficam salvas so no seu dispositivo. Nao vao pra nenhum servidor nosso.
✦ novAI
✦Usa a API do Claude (Anthropic). Interface roxa escura.
1
Abre o novAI no hub
2
Cola sua chave da Anthropic
Chave comeca com sk-ant-...
3
Clica em Entrar
Chave fica salva. Da proxima vez nao precisa digitar!
4
Converse
Enter envia, Shift+Enter pula linha.
5
Historico
Botao verde no canto superior esquerdo mostra conversas salvas.
⚠Precisa de credito na Anthropic. Tem custo por tokens.
🔸 novAI V2
🔸Interface igual ao novAI mas usa o Kimi K2 via Groq - mais rapido e gratis!
1
Abre o novAI V2 no hub
2
Cola sua chave do Groq
Comeca com gsk_... Gratis em console.groq.com
3
Barra de tokens
Mostra tokens usados no minuto. Quando encher aparece contagem regressiva laranja.
4
Historico
Botao verde no canto superior esquerdo.
⚡ groqAI
⚡Usa o Llama 3.1 8B via Groq - o mais rapido. Interface laranja. 100% gratis!
1
Abre o groqAI no hub
2
Cola sua chave do Groq
Comeca com gsk_...
3
Converse!
Respostas em menos de 1 segundo. Overlay laranja quando bate no limite de tokens.
🟢 miniAI
🟢Usa o GPT-4o Mini da OpenAI. Interface verde.
1
Abre o miniAI no hub
2
Cola sua chave da OpenAI
Comeca com sk-...
3
Converse
Boa qualidade, um pouco mais lento que o Groq.
⚠Precisa de credito minimo de $5 na OpenAI.
</> HTML Builder Classic
💡Editor com syntax highlight (CodeMirror), previa ao vivo e blocos prontos. Sem chave de API!
O que cada cor significa
Azul
Tags HTML - <div> <p> <h1>
Roxo
Atributos - class= style= href=
Verde
Valores de atributos
Laranja
Propriedades CSS
Amarelo
Valores CSS
Cinza
Comentarios HTML
1
Abre o HTML Builder no hub
Sem chave. Funciona na hora!
2
Use os blocos do painel esquerdo
Cada botao insere o elemento no cursor. Previa atualiza em tempo real!
3
Painel de info embaixo
Mostra O que e, Exemplo e Dica pro de cada bloco.
4
Baixar ou Abrir
Baixar salva o .html. Abrir abre numa nova aba.
💡Precisa estar online pra o CodeMirror carregar.
🤖 Bot Builder
🚀O tutorial do Bot Builder ganhou um guia proprio e completo — por ser muito extenso, ficaria apertado aqui!
O que voce vai encontrar la
📍 Anatomia do bot
Onde fica cada parte do codigo — sem precisar entender tudo.
🧠 Personalidade
Como escrever o system prompt com exemplos prontos pra copiar.
🔭 Trocar a API
Groq, Gemini, Claude, OpenRouter — codigo pronto pra cada uma.
🎨 Cores e design
Temas prontos, como trocar o nome, o emoji e os chipinhos.
🚨 Erros comuns
O que fazer quando o bot nao responde ou da erro.
🌐 Hospedar
Netlify em 2 minutos ou GitHub Pages permanente e gratis.
🤖
Abrir Tutorial Completo de Bots
Guia completo do zero — explicado pra qualquer pessoa
→
🧰 Site Builder Visual
🧰Builder visual sem digitar codigo. Clica em blocos, preenche formularios, previa em tempo real!
1
Abre o Site Builder no hub
Sem chave. Funciona offline!
2
Clique nos blocos
Navbar, Hero, Titulo, Paragrafo, Botao, Card, Imagem, Footer.
3
Preencha o formulario
Cada bloco tem um formulario simples pra preencher.
4
Veja a previa e baixe
🌿 AI Site Builder V3
🌿Voce descreve e o Gemini 2.0 Flash constroi tudo. Precisa da chave do Google AI Studio.
1
Pegue a chave do Gemini
aistudio.google.com → Get API key. Comeca com AIza...
2
Abre o builder e cola a chave
3
Descreva seu site com detalhes
Exemplo: "Site pra barbearia BarberKing, tema escuro dourado, lista de servicos e botao WhatsApp"
4
Veja na previa, baixe e hospede!
💡Quanto mais detalhes no pedido, melhor o resultado!
🌿 Kimi Builder
🌿Igual ao AI Builder V3 mas usa o Kimi K2 via Groq - ultra rapido e gratis!
1
Pegue a chave do Groq
console.groq.com → API Keys. Comeca com gsk_...
2
Abre o Kimi Builder e cola a chave
3
Descreva seu site
Nome + cores + secoes. O Kimi K2 gera HTML bonito!
4
Baixe e hospede!
⚡O mais rapido de todos os builders!
🐙 GitHub Pages
🐙Gratuito, permanente e com link profissional!
1
Cria conta no GitHub
github.com → Sign up
2
Cria repositorio com nome especial
Nome DEVE ser seuusername.github.io - isso ativa o Pages!
3
Renomeia hub.html para index.html
O Pages abre o index.html automaticamente.
4
Sobe todos os arquivos
Add file → Upload files → arrasta todos os .html.
5
Ativa o Pages
Settings → Pages → Branch: main → Save. Em 2 minutos fica online!
6
Seu link permanente
seuusername.github.io 🎉
⚠Todos os arquivos .html precisam estar no mesmo repositorio!