Add a Voice AI Agent to a SolidStart App (2026)

How to add AnveVoice to a SolidStart app

SolidStart builds its page shell in src/entry-server.tsx. Add the AnveVoice script tag inside the head of the Document component there, and every route is served with it. The same file works for SolidStart 1.x and 2.x. Steps checked against the official documentation on 2026-10-14.

At a glance

• Where the code goes: The Document function in src/entry-server.tsx, inside the head element
• Coding needed: One JSX line in an existing file
• Plan limits: None from SolidStart. Free AnveVoice plan is enough
• Time: About 3 minutes plus a build

How a SolidStart page is assembled

SolidStart's project structure, as documented for version 1, has three files at the top of src: entry-client.tsx hydrates the app in the browser, entry-server.tsx handles server requests, and app.tsx is the shell shared by client and server. The entry-server reference shows that the server entry builds a full HTML document from a small Document component that receives assets, children and scripts as props. That component is the one place that writes the head of every page, so it is where a site-wide third-party tag belongs. The client entry mounts the app into the element with id app (the documented call is mount with StartClient on that element). Nothing in the browser touches the head the server wrote, which means your tag is rendered once and stays put.

• 1. Copy the install tag — Create a bot at app.anvevoice.app and replace YOUR_EMBED_ID with its embed ID. &position=bottom-left and &theme=dark are optional. Code: <script src="https://anvevoice.app/embed.js?embedId=YOUR_EMBED_ID" async></script>

Method 1: add the tag in entry-server.tsx

Scaffold a project with npm init solid (the docs list pnpm, yarn, bun and deno equivalents) and pick the SolidStart template. Version 2 requires Node.js 24 or newer and builds on Vite; version 1 runs on vinxi. The Document example in both versions' references is the same shape. The docs also show a form where Document is a named function passed as document={Document}. Either works; the tag goes in the same head element.

• 1. Open src/entry-server.tsx — Find the Document function. The generated file may already contain extra lines in the head, such as a charset meta tag or a favicon link. Keep everything that is there.
• 2. Insert the tag in the head — Place it after {props.assets}. The script tag in JSX uses the same attributes as HTML. Your finished head should look like the example below. Code: 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. Run and rebuild — Use npm run dev while developing. For production, run the build script defined in your package.json and then your start script, or deploy with the preset for your host.

Why not app.tsx or a route

Code in app.tsx and in route files renders inside the div with id app, and on the client Solid builds those nodes itself rather than parsing server HTML. Browsers generally do not execute script elements that arrive as inserted markup after the page has loaded, so a tag written in a component is not a dependable place for it. The server-rendered Document is parsed by the browser as ordinary HTML, which is the safe route. The @solidjs/meta package, which the SolidStart docs introduce for titles and meta tags, is documented for Title and Meta. The page has no guidance on script tags, so treat entry-server.tsx as the supported place.

Rendering modes and deployment

• SolidStart's configuration reference lists an ssr option, default true, that toggles client versus server rendering. If you turn it off, build the app and open the generated index.html to confirm the tag is present, because the docs do not describe that output.
• Static prerendering and Node, edge or Cloudflare presets all generate pages through the same Document component, so the tag is included wherever the pages are produced.
• Navigation between routes is client-side, so the script is fetched once per full page load.
• Deploy the build output that your preset produces and clear any CDN cache that holds old HTML.

Check that it works

• 1. Open the app — Use a private window. Microphone access needs HTTPS on a deployed site; localhost works for development.
• 2. Find the button — A round microphone button appears bottom-right unless you set position. Click it and allow the microphone.
• 3. Read the HTML — Use View Source on the page. Because the tag is rendered on the server, anvevoice.app should appear in the raw HTML, not just in the live DOM.

Common problems

• Tag missing from View Source: you added it in a component, not in the Document. Move it to entry-server.tsx.
• Tag shows in dev but not in the deployed build: your host serves a cached copy of the old HTML, or you deployed from a branch that lacks the edit. Redeploy and purge the cache.
• Two buttons: the tag exists in both entry-server.tsx and a leftover component. Remove the duplicate.
• Build cached by the host: redeploy and purge CDN HTML after changing the entry file.

Sources

• SolidStart docs: getting started and project structure (v1) (https://docs.solidjs.com/solid-start/getting-started) — checked 2026-10-14
• SolidStart docs: getting started (v2) (https://docs.solidjs.com/solid-start/v2/getting-started) — checked 2026-10-14
• SolidStart docs: entry-server reference (https://docs.solidjs.com/solid-start/reference/entrypoints/entry-server) — checked 2026-10-14
• SolidStart docs: entry-client reference (https://docs.solidjs.com/solid-start/reference/entrypoints/entry-client) — checked 2026-10-14
• SolidStart docs: head and metadata (https://docs.solidjs.com/solid-start/building-your-application/head-and-metadata) — checked 2026-10-14

Related

• How to add AnveVoice to a React app
• How to add AnveVoice to a Qwik app
• How to add AnveVoice to a SvelteKit app
• How to add AnveVoice to a plain HTML website

Try AnveVoice on your site

Free plan: $0, 50,000 tokens a month, no card. Get your embed ID in the dashboard, then paste one tag.