Alojar un artefacto de Claude en su propio enlace, con React incluido

Cuál de los dos tienes

• HTML, si el código empieza con <!DOCTYPE html> o <html>. Ya es una página completa.
• React, si empieza con líneas import y tiene export default function. Es un componente, no una página. En Claude, la ventana del artefacto pone la página a su alrededor, el propio React, los estilos de Tailwind y las bibliotecas que importa.
• El canvas de ChatGPT hace los mismos dos tipos, y a cada uno le aplica lo mismo. Publicar un canvas de ChatGPT en un enlace.

Una página HTML: cualquier alojamiento estático

Un alojamiento estático toma tus archivos y los sirve tal como son, en una dirección https. GitHub Pages, Cloudflare Pages, Netlify y tiiny.host funcionan así, y Solta también. Algunos piden primero una cuenta y un proyecto. Netlify Drop acepta una carpeta o un zip sin cuenta para empezar, según la propia guía de Netlify, leída el 13 de octubre de 2026.

Si la página carga otros archivos, como imágenes, una hoja de estilos o un CSV, sube la carpeta y no solo la página, para que las rutas que tiene sigan apuntando a algo.

Para ver una página HTML funcionando antes de que vaya a ningún lado, pégala en el visor HTML: corre en tu navegador, y no se envía a ningún lado hasta que la publiques.

Un componente React: tiene que volverse página antes

Un alojamiento estático sirve un archivo .jsx tal como es, y un navegador no lo puede ejecutar. El JSX tiene que convertirse en JavaScript, cada import tiene que apuntar a un archivo real, y algo tiene que montar el componente en una página. Sin eso, lo que aparece es una página en blanco. La propia página de tiiny.host dice lo mismo: un artefacto React muestra una página en blanco en cuanto sale de Claude, y su solución es pedirle a Claude que lo convierta antes en un index.html completo en sí mismo (leída el 13 de octubre de 2026).

Hay tres maneras de hacer ese paso. Las razones detrás de cada una están en por qué un archivo React de Claude muestra una página en blanco.

1. Ármalo tú mismo

Como lo haría un desarrollador. Funciona en cualquier alojamiento, y vuelves a armarlo después de cada cambio.

1. Crea un proyecto React con Vite:

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

2. Reemplaza src/App.jsx con el archivo de Claude, y ejecuta npm install para cada paquete que importa, como recharts o lucide-react.
3. Agrega Tailwind con su plugin para Vite, @tailwindcss/vite. Si el archivo importa de @/components/ui/, configura también shadcn/ui, para que esos componentes existan.
4. Ejecuta npm run build y sube la carpeta dist que genera.

2. Pídele a Claude un solo archivo HTML

Pídele que reescriba el componente como una sola página HTML que carga React desde una CDN. Para un componente simple funciona, y el resultado va en cualquier alojamiento estático. Dos cosas que debes saber. Estas páginas suelen convertir el JSX en el navegador de cada visitante con Babel, cuya propia documentación desaconseja hacerlo en producción. Y los imports de @/components/ui/ no tienen una CDN de donde cargar, así que Claude tiene que reescribir esas partes a mano.

3. Deja que Solta lo arme

Solta prepara el componente cuando lo publicas. Pega el archivo que escribió Claude, y se empaqueta con React, Tailwind y los componentes de shadcn/ui que importa, se monta en una página y se sirve en su propia dirección. Los imports de npm se reescriben a versiones fijas que el navegador del visitante descarga de esm.sh, así que un paquete que esm.sh no tiene no se carga.

Si el archivo no tiene export default y no se monta solo, Solta te lo dice en vez de publicar una página en blanco. Si el componente da un error mientras se dibuja, la página muestra el error.

Lo que trae un enlace en Solta

• Una dirección propia en solta.site. Tu propio dominio: 1 dominio en Plus, 10 en Pro y todos los que necesites en Team.
• Elegir quién puede abrirlo: público, no listado o privado en todos los planes; una contraseña en todos los planes; personas con nombre, que verifican su correo una vez, en los planes Pro y Team; solo tu espacio de trabajo, en el plan Team. Quién puede abrir un sitio.
• Versiones. Un cambio espera como borrador hasta que lo publicas, y el enlace no se mueve.
• Insertarlo en tu web con un solo código, si es un sitio público o no listado. En el plan Free, lleva un pequeño sello de Solta.
• Instalarlo en un celular, como una app. Cómo ponerlo en tu celular.

Los límites: un archivo de hasta 10 MB, y una carpeta o un zip de hasta 50 MB en Free, 100 MB en Plus y 250 MB en Pro y Team. Solo archivos estáticos: nada tuyo corre en un servidor. Lo que no funciona.

Si usa Claude mientras la gente lo usa

Una página que le pregunta algo a Claude cuando alguien presiona un botón solo lo hace dentro de Claude. En cualquier otro lugar, esa llamada tiene que ir a un modelo que pagas tú, o a uno que trae cada visitante. Cómo un sitio llama a un modelo.

Desde el chat

Agrega Solta a Claude o a ChatGPT como conector personalizado, y puedes pedirle que publique lo que acaba de hacer. El enlace vuelve en la conversación. Cómo conectar Claude o ChatGPT.

Preguntas