Añade un agente de voz con IA a una app de SolidStart (2026)

Cómo añadir AnveVoice a una aplicación de SolidStart

SolidStart construye la estructura de la página en src/entry-server.tsx. Añade la etiqueta de script de AnveVoice dentro del head del componente Document de ese archivo, y todas las rutas se servirán con ella. El mismo archivo funciona para SolidStart 1.x y 2.x. Pasos comprobados con la documentación oficial el 2026-10-14.

En resumen

• Dónde va el código: La función Document en src/entry-server.tsx, dentro del elemento head
• Programación necesaria: Una línea de JSX en un archivo existente
• Límites del plan: Ninguno por parte de SolidStart. El plan Free de AnveVoice es suficiente
• Tiempo: Unos 3 minutos más una compilación

Cómo se ensambla una página de SolidStart

La estructura de proyecto de SolidStart, tal como se documenta para la versión 1, tiene tres archivos en la raíz de src: entry-client.tsx hidrata la aplicación en el navegador, entry-server.tsx gestiona las peticiones del servidor, y app.tsx es la estructura compartida por el cliente y el servidor. La referencia de entry-server muestra que la entrada del servidor construye un documento HTML completo a partir de un pequeño componente Document que recibe como props los assets, los children y los scripts. Ese componente es el único lugar donde se escribe el head de cada página, así que ahí va una etiqueta de terceros para todo el sitio. La entrada del cliente monta la aplicación en el elemento con id app (la llamada documentada es mount con StartClient sobre ese elemento). Nada en el navegador toca el head que escribió el servidor, lo que significa que tu etiqueta se renderiza una vez y se mantiene.

• 1. Copia la etiqueta de instalación — Crea un bot en app.anvevoice.app y sustituye YOUR_EMBED_ID por su ID de incrustación. &position=bottom-left y &theme=dark son opcionales. <script src="https://anvevoice.app/embed.js?embedId=YOUR_EMBED_ID" async></script>

Método 1: añade la etiqueta en entry-server.tsx

Crea un proyecto con npm init solid (la documentación enumera los equivalentes con pnpm, yarn, bun y deno) y elige la plantilla de SolidStart. La versión 2 requiere Node.js 24 o superior y compila con Vite; la versión 1 funciona con vinxi. El ejemplo de Document de las referencias de ambas versiones tiene la misma forma. La documentación también muestra una forma en la que Document es una función con nombre pasada como document={Document}. Ambas funcionan; la etiqueta va en el mismo elemento head.

• 1. Abre src/entry-server.tsx — Localiza la función Document. El archivo generado puede contener ya líneas adicionales en el head, como una metaetiqueta charset o un enlace de favicon. Conserva todo lo que haya.
• 2. Inserta la etiqueta en el head — Colócala después de {props.assets}. La etiqueta script en JSX usa los mismos atributos que en HTML. Tu head final debería parecerse al ejemplo de abajo. import { createHandler, StartServer } from "@solidjs/start/server"; export default createHandler(() => ( <StartServer document={({ assets, children, scripts }) => ( <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> {assets} <script src="https://anvevoice.app/embed.js?embedId=YOUR_EMBED_ID" async /> </head> <body> <div id="app">{children}</div> {scripts} </body> </html> )} /> ));
• 3. Ejecuta y vuelve a compilar — Usa npm run dev mientras desarrollas. Para producción, ejecuta el script de compilación definido en tu package.json y después tu script de inicio, o despliega con el preset de tu host.

Por qué no app.tsx ni una ruta

El código de app.tsx y de los archivos de ruta se renderiza dentro del div con id app, y en el cliente Solid construye esos nodos por sí mismo en lugar de analizar HTML del servidor. Los navegadores generalmente no ejecutan elementos script que llegan como marcado insertado después de cargar la página, así que una etiqueta escrita en un componente no es un lugar fiable. El Document renderizado en el servidor lo analiza el navegador como HTML normal, que es la vía segura. El paquete @solidjs/meta, que la documentación de SolidStart presenta para títulos y metaetiquetas, está documentado para Title y Meta. La página no ofrece orientación sobre etiquetas script, así que considera entry-server.tsx como el lugar compatible.

Modos de renderizado y despliegue

• La referencia de configuración de SolidStart enumera una opción ssr, por defecto true, que alterna entre renderizado en cliente y en servidor. Si la desactivas, compila la app y abre el index.html generado para confirmar que la etiqueta está presente, porque la documentación no describe esa salida.
• El prerenderizado estático y los presets de Node, edge o Cloudflare generan todas las páginas a través del mismo componente Document, así que la etiqueta se incluye dondequiera que se generen las páginas.
• La navegación entre rutas es del lado del cliente, así que el script se descarga una vez por cada carga completa de la página.
• Despliega la salida de compilación que produce tu preset y vacía cualquier caché de CDN que guarde el HTML antiguo.

Comprueba que funciona

• 1. Abre la app — Usa una ventana privada. El acceso al micrófono necesita HTTPS en un sitio desplegado; localhost funciona para desarrollo.
• 2. Busca el botón — Un botón redondo de micrófono aparece abajo a la derecha salvo que establezcas position. Haz clic y permite el micrófono.
• 3. Lee el HTML — Usa View Source (Ver código fuente) en la página. Como la etiqueta se renderiza en el servidor, anvevoice.app debería aparecer en el HTML sin procesar, no solo en el DOM en vivo.

Problemas comunes

• La etiqueta no aparece en View Source: la añadiste en un componente, no en Document. Muévela a entry-server.tsx.
• La etiqueta aparece en desarrollo pero no en la compilación desplegada: tu host sirve una copia en caché del HTML antiguo, o desplegaste desde una rama que no tiene la edición. Vuelve a desplegar y purga la caché.
• Dos botones: la etiqueta existe tanto en entry-server.tsx como en un componente sobrante. Elimina el duplicado.
• Compilación en caché por el host: vuelve a desplegar y purga el HTML del CDN después de cambiar el archivo de entrada.

Fuentes

• Documentación de SolidStart: primeros pasos y estructura del proyecto (v1) (https://docs.solidjs.com/solid-start/getting-started) — consultado el 2026-10-14
• Documentación de SolidStart: primeros pasos (v2) (https://docs.solidjs.com/solid-start/v2/getting-started) — consultado el 2026-10-14
• Documentación de SolidStart: referencia de entry-server (https://docs.solidjs.com/solid-start/reference/entrypoints/entry-server) — consultado el 2026-10-14
• Documentación de SolidStart: referencia de entry-client (https://docs.solidjs.com/solid-start/reference/entrypoints/entry-client) — consultado el 2026-10-14
• Documentación de SolidStart: head y metadatos (https://docs.solidjs.com/solid-start/building-your-application/head-and-metadata) — consultado el 2026-10-14

Relacionado

• Cómo añadir AnveVoice a una app de React
• Cómo añadir AnveVoice a una app de Qwik
• Cómo añadir AnveVoice a una aplicación de SvelteKit
• Cómo añadir AnveVoice a un sitio web HTML sencillo

Prueba AnveVoice en tu sitio

Plan gratuito: 0 US$, 50.000 tokens al mes, sin tarjeta. Obtén tu ID de inserción en el panel y pega una etiqueta.