audentic

Add an AI voice agent to a Lovable app

You can add an audentic voice agent to a Lovable app by installing @audentic/react, rendering SessionControl, and publishing the agent with your website's exact origin allowed. Lovable builds the website; audentic manages the agent's instructions, knowledge, voice, and conversations. Visitors start a conversation from the widget and grant microphone access in their browser.

This guide uses the standard React package. Browse the integration guides for other builders and coding tools.

Prepare your agent and project

You need an editable Lovable project using React 18.2 or React 19, an audentic account, and an agent ID. In audentic, configure an agent, add your business knowledge, save it, and test a real conversation. Keep its ID ready for the website change.

Ask Lovable which framework the project uses before choosing a file location. New Lovable projects use TanStack Start; older projects may use React and Vite. Keep the project's existing routing and rendering conventions. Lovable documents this difference in its TanStack Start guide.

For example, a home repair business could add a voice assistant to its service page. Supply the agent with service areas, opening hours, the kinds of repairs offered, and how estimates work. A visitor can ask whether their area is covered and describe their problem. If you enable Take a message for your team, the agent can prepare a request that the visitor reviews and confirms for your Inbox. Your team still follows up and schedules the work.

Install and place the React component

Ask Lovable to add the public @audentic/react npm package in the project chat. Lovable handles dependency installation; you do not need a terminal inside its editor. See its npm package instructions.

For a local checkout using npm, the equivalent command is:

npm install @audentic/react

Create a component following the project's directory conventions:

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

export function VoiceAssistant() {
  return <SessionControl agentId="YOUR_AGENT_ID" showTranscript />;
}

Replace YOUR_AGENT_ID, then render VoiceAssistant on the service page beside a short invitation such as “Ask about repairs in your area.” The package includes its own widget styles and defaults to https://www.audentic.org/api. For server-rendered projects, have Lovable keep browser API access inside the browser lifecycle and check the production build for rendering errors. See the React reference for props and alternate audentic hosts.

Copy this prompt into Lovable

Replace the agent ID, page, and business description before sending:

Add my existing audentic voice agent to this Lovable project.
Agent ID: YOUR_AGENT_ID
Page: our home repair services page
Purpose: help visitors understand our service area and estimate process.

Inspect the project's framework, React version, routing, and package manager.
Add the public @audentic/react package using the existing dependency workflow.
Create a VoiceAssistant component importing SessionControl from
"@audentic/react" and render it with my agentId and showTranscript.
Place it after the service overview with the heading
"Ask about repairs in your area" and keep the layout usable on mobile.
Keep browser API access out of server rendering. Use the package's styles.
Use the default hosted audentic API; this embed needs no provider API key.
Keep agent instructions, knowledge, and voice settings in audentic.
Run the project's build and inspect the changed page.
Report the exact live website origin and any separate preview origin
that I need to add under Test & publish in audentic.
Tell me which microphone checks require a real browser after publishing.
Reference: https://www.audentic.org/docs/developers/react

Publish and allow the actual website origin

Use Lovable's Publish dialog to publish the site, or Publish changes to deploy an update. Its standard address ends in lovable.app. Copy the actual live address from the completed publish flow. Follow Lovable's publishing guide if the live version does not include your change.

In audentic's Test & publish, add that site's origin under Website addresses, then select Publish agent. For https://repair-team.lovable.app/services, enter https://repair-team.lovable.app. Paths and wildcards are not accepted.

When you connect a custom domain in Lovable, add its origin separately. https://example.com and https://www.example.com are different origins; authorize each address that actually serves the widget. A preview address also needs its own entry when you test there. Follow the website publication guide for the full origin rules.

Check audio and visitor requests

If the widget displays but cannot connect, check publication, the agent ID, and the exact origin first. Voice needs HTTPS or localhost and microphone permission. A builder preview may run inside an iframe: its parent must permit allow="microphone; autoplay". If you cannot change that parent, test the published page in a normal browser tab. Check the website guide for restrictive Content Security Policy settings.

  • Open the live service page while signed out of audentic and confirm the widget loads without starting the microphone.
  • Start a call, allow microphone access, ask a known question, interrupt, mute, and end it. Check that the browser's microphone indicator turns off.
  • Repeat on mobile and test denied microphone access.
  • If message collection is enabled, confirm a request as the visitor and review it in Inbox. Review the ended call in Conversations.

Sources: Lovable npm packages, project frameworks, publishing, and custom domains.

Updated · Written by the audentic team