Hospedar um artefato do Claude num link próprio, React incluído

Qual dos dois você tem

• HTML, se o código começa com <!DOCTYPE html> ou <html>. Ele já é uma página inteira.
• React, se começa com linhas import e tem export default function. É um componente, não uma página. No Claude, a janela do artefato fornece a página em volta dele, o próprio React, os estilos do Tailwind e as bibliotecas que ele importa.
• O canvas do ChatGPT faz os mesmos dois tipos, e vale o mesmo para cada um. Publicar um canvas do ChatGPT num link.

Uma página HTML: qualquer hospedagem estática

Uma hospedagem estática pega os seus arquivos e serve do jeito que eles são, num endereço https. O GitHub Pages, o Cloudflare Pages, o Netlify e o tiiny.host funcionam assim, e o Solta também. Alguns pedem uma conta e um projeto antes. O Netlify Drop aceita uma pasta ou um zip sem conta para começar, segundo o próprio guia do Netlify, lido em 13 de outubro de 2026.

Se a página carrega outros arquivos, como imagens, uma folha de estilos ou um CSV, envie a pasta, e não a página sozinha, para que os caminhos dentro dela continuem apontando para alguma coisa.

Para ver uma página HTML funcionando antes de ela ir para qualquer lugar, cole no visualizador HTML: ele roda no seu navegador, e nada é enviado até você publicar.

Um componente React: ele precisa virar página antes

Uma hospedagem estática serve um arquivo .jsx do jeito que ele é, e um navegador não consegue rodá-lo. O JSX precisa ser convertido em JavaScript, cada import precisa apontar para um arquivo de verdade, e alguma coisa precisa montar o componente numa página. Sem isso, o que aparece é uma página em branco. A própria página do tiiny.host diz o mesmo: um artefato React mostra uma página em branco quando sai do Claude, e a correção deles é pedir ao Claude que o converta antes num index.html completo em si (lida em 13 de outubro de 2026).

Há três maneiras de fazer essa etapa. Os motivos por trás de cada uma estão em por que um arquivo React do Claude mostra uma página em branco.

1. Monte você mesmo

Do jeito que um desenvolvedor faria. Funciona em qualquer hospedagem, e você monta de novo depois de cada mudança.

1. Crie um projeto React com o Vite:

   npm create vite@latest my-page -- --template react
   cd my-page && npm install

2. Troque src/App.jsx pelo arquivo do Claude, e rode npm install para cada pacote que ele importa, como recharts ou lucide-react.
3. Adicione o Tailwind com o plugin dele para o Vite, @tailwindcss/vite. Se o arquivo importa de @/components/ui/, configure também o shadcn/ui, para que esses componentes existam.
4. Rode npm run build e envie a pasta dist que ele cria.

2. Peça ao Claude um único arquivo HTML

Peça que ele reescreva o componente como uma única página HTML que carrega o React de uma CDN. Para um componente simples isso funciona, e o resultado vai para qualquer hospedagem estática. Duas coisas para saber. Essas páginas normalmente convertem o JSX no navegador de cada visitante com o Babel, cuja própria documentação desaconselha fazer isso em produção. E os imports de @/components/ui/ não têm CDN de onde carregar, então o Claude precisa reescrever essas partes à mão.

3. Deixe o Solta montar

O Solta prepara o componente quando você publica. Cole o arquivo que o Claude escreveu, e ele é empacotado com o React, o Tailwind e os componentes shadcn/ui que importa, montado numa página e servido no próprio endereço. Os imports do npm são reescritos para versões fixas que o navegador do visitante busca no esm.sh, então um pacote que o esm.sh não tem não carrega.

Se o arquivo não tem export default e não se monta sozinho, o Solta avisa, em vez de publicar uma página em branco. Se o componente dá erro enquanto é desenhado, a página mostra o erro.

O que um link no Solta traz

• Um endereço próprio em solta.site. Seu próprio domínio: 1 domínio no Plus, 10 no Pro e quantos você precisar no Team.
• A escolha de quem pode abrir: público, não listado ou privado em todos os planos; uma senha em todos os planos; pessoas com nome, que confirmam o e-mail uma vez, nos planos Pro e Team; só o seu espaço de trabalho, no plano Team. Quem pode abrir um site.
• Versões. Uma mudança espera como rascunho até você publicar, e o link não muda.
• Incorporar no site da sua empresa com um trecho de código, para um site público ou não listado. No plano Free, ele leva um pequeno selo do Solta.
• Instalar no celular, como um app. Como colocar no celular.

Os limites: um arquivo de até 10 MB, e uma pasta ou zip de até 50 MB no Free, 100 MB no Plus e 250 MB no Pro e no Team. Só arquivos estáticos: nada seu roda num servidor. O que não funciona.

Se ele usa o Claude enquanto as pessoas usam

Uma página que pergunta algo ao Claude quando alguém aperta um botão só faz isso dentro do Claude. Em qualquer outro lugar, essa chamada precisa ir para um modelo que você paga, ou um que cada visitante traz. Como um site chama um modelo.

De dentro da conversa

Adicione o Solta ao Claude ou ao ChatGPT como conector personalizado, e você pode pedir para publicar o que ele acabou de fazer. O link volta na conversa. Como conectar o Claude ou o ChatGPT.

Perguntas