Alojar um artefacto do Claude num link próprio, React incluído

Qual dos dois tem

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

Uma página HTML: qualquer alojamento estático

Um alojamento estático recebe os seus ficheiros e serve-os tal como 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 primeiro uma conta e um projeto. O Netlify Drop aceita uma pasta ou um zip sem conta para começar, segundo o próprio guia do Netlify, lido a 13 de outubro de 2026.

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

Para ver uma página HTML a funcionar antes de ir para qualquer lado, cole-a no visualizador HTML: corre no seu browser, e nada é enviado até a publicar.

Um componente React: tem de ser transformado em página primeiro

Um alojamento estático serve um ficheiro .jsx tal como é, e um browser não o consegue correr. O JSX tem de ser convertido em JavaScript, cada import tem de apontar para um ficheiro real, e alguma coisa tem de 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 artefacto React mostra uma página em branco quando sai do Claude, e a solução deles é pedir primeiro ao Claude que o converta num index.html completo por si só (lida a 13 de outubro de 2026).

Há três formas de fazer este passo. As razões por trás de cada uma estão em porque é que um ficheiro React do Claude mostra uma página em branco.

1. Monte-o por si

Como faria um programador. Funciona em qualquer alojamento, e volta a montá-lo depois de cada alteração.

1. Crie um projeto React com o Vite:

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

2. Substitua src/App.jsx pelo ficheiro do Claude, e faça npm install de 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 ficheiro importa de @/components/ui/, configure também o shadcn/ui, para que esses componentes existam.
4. Corra npm run build e carregue a pasta dist que ele cria.

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

Peça-lhe que reescreva o componente como uma única página HTML que carrega o React a partir de uma CDN. Para um componente simples funciona, e o resultado vai para qualquer alojamento estático. Duas coisas a saber. Estas páginas costumam converter o JSX no browser de cada visitante com o Babel, cuja própria documentação desaconselha fazê-lo em produção. E os imports de @/components/ui/ não têm uma CDN de onde carregar, por isso o Claude tem de reescrever essas partes à mão.

3. Deixe o Solta montá-lo

O Solta prepara o componente quando o publica. Cole o ficheiro 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 seu próprio endereço. Os imports do npm são reescritos para versões fixas que o browser do visitante vai buscar ao esm.sh, por isso um pacote que o esm.sh não tem não carrega.

Se o ficheiro 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 traz um link no Solta

• Um endereço próprio em solta.site. O seu próprio domínio: 1 domínio no Plus, 10 no Pro e quantos precisar no Team.
• A escolha de quem o pode abrir: público, não listado ou privado em todos os planos; uma palavra-passe 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 alteração fica à espera como rascunho até a publicar, e o link não muda.
• Incorporar no site da sua empresa com um excerto de código, para um site público ou não listado. No plano Free, leva um pequeno selo do Solta.
• Instalá-lo num telemóvel, como uma aplicação. Como o pôr no telemóvel.

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

Se usa o Claude enquanto as pessoas o usam

Uma página que pergunta algo ao Claude quando se carrega num botão só o faz dentro do Claude. Em qualquer outro lado, essa chamada tem de ir para um modelo que paga, ou para um que cada visitante traz. Como um site chama um modelo.

A partir da conversa

Adicione o Solta ao Claude ou ao ChatGPT como conector personalizado, e pode pedir-lhe que publique o que acabou de criar. O link volta na conversa. Como ligar o Claude ou o ChatGPT.

Perguntas