audentic

Add an AI voice agent to a Bolt website

Add an Audentic voice agent to a Bolt.new website by installing @audentic/react, rendering SessionControl, and allowing the published website's exact origin in Audentic. Bolt builds and hosts the website; you create, configure, and publish the voice agent in Audentic. Visitors can then ask questions aloud without leaving your page.

Before you start

You need a Bolt web project and a published Audentic agent. Follow the quickstart to create the agent, review its business facts, and test a conversation. In Test & publish, add each hosting origin under Website addresses and select Publish agent.

An origin is the protocol and hostname, plus a port when present: https://your-project.bolt.host is an origin; a URL ending in /contact is a page address. Add your actual Bolt hosting address and custom domain separately. https://example.com and https://www.example.com are separate origins. Paths and wildcards are not accepted.

Copy the agent ID from Audentic. This ID is public and belongs in the website code. Audentic handles the voice connection on its server; your Bolt project does not need an OpenAI API key for this widget.

Give Bolt this integration prompt

Replace the placeholders before pasting this into your existing project's chat:

Add my published Audentic voice agent to this Bolt web project.
Agent ID: YOUR_AGENT_ID
Published website origin: https://YOUR_PROJECT.bolt.host

Inspect the current framework and use its existing conventions. For React,
install @audentic/react and create a VoiceAssistant component that renders
SessionControl with my agent ID, apiBaseUrl="https://www.audentic.org/api",
and showTranscript. Place it in the contact section with a short invitation
to ask about our services. If this is a Next.js App Router project, put the
widget in a component with "use client". Keep the rest of the page intact.
Use Audentic's existing widget; do not create a second voice connection.
Run the project's build and fix integration errors. List the exact origins
I must add in Audentic, and the microphone checks to run after publishing.

Bolt can make the website code change. Complete the agent's instructions, knowledge, allowed origins, and publication in Audentic yourself. For a broader handoff, see integrating with coding agents.

Check the React implementation

The package supports React 18.2 and React 19 and includes its own styling. Install it in the website project:

npm install @audentic/react

Create a component and render it once on the page:

"use client";

import { SessionControl } from "@audentic/react";

export function VoiceAssistant() {
  return (
    <SessionControl
      agentId="YOUR_AGENT_ID"
      apiBaseUrl="https://www.audentic.org/api"
      showTranscript
    />
  );
}

The client directive is needed for a Next.js App Router client boundary; it is harmless in a client-rendered React app. Configure the agent's voice, business answers, and tools in Audentic. See the React integration guide for optional props. For a site without React, use the floating script in Publish to a website.

Publish with Bolt and connect a domain

In Bolt, select Publish at the top right, then Publish in the publish menu. After deployment finishes, open the resulting .bolt.host address. Later code changes require the Update action in that menu. Follow Bolt's publishing guide for its current hosting and access settings.

For an existing custom domain on an eligible paid plan, publish first. Open the gear menu, All project settings, then Domains & Hosting. Select Connect a domain you own, enter the domain, and choose Verify and add domain. Follow the DNS records Bolt displays at your registrar, including any ownership verification it requests. Check the domain's status and HTTPS before using it. These steps follow Bolt's domain connection guide.

Add the final HTTPS custom-domain origin in Audentic too. Publishing or changing DNS in Bolt does not update the agent's website list.

Troubleshoot preview and microphone access

Bolt's development preview and published site can have different origins. Inspect the app's own URL rather than adding https://bolt.new. If preview voice is blocked by iframe permissions, test the deployed HTTPS site in a normal browser tab. When you control a parent iframe, it needs allow="microphone; autoplay"; changing the child app cannot grant that permission.

An origin error calls for checking the published agent and exact website address. A microphone error calls for browser permission, HTTPS, and iframe checks. If the widget fails to load, review the build output and browser console; Bolt's preview troubleshooting explains where to find them.

Example and launch checklist

A landscaping website can invite visitors to ask about service areas and maintenance packages. Put those facts in agent knowledge, and explain how to request a quote. With Take a message enabled, a visitor can confirm an enquiry for your Inbox; your team follows up to arrange the appointment.

  • Open the live address while signed out of Audentic; check the contact section on mobile.
  • Allow microphone access, speak, interrupt, and verify that captions match the conversation.
  • Deny microphone access once and confirm the visitor can recover through browser permissions.
  • End the call and confirm the browser's microphone indicator stops.
  • Repeat on the custom domain and review the saved conversation.

Browse the integration guides for other builders.

Official platform references: Bolt publishing, custom domains, and preview troubleshooting.

Updated · Written by the audentic team