audentic

Add an AI voice agent to a v0 app

You can add an audentic voice agent to a v0 app with the @audentic/react package and its SessionControl component. Configure and publish the agent in audentic, add the deployed website's exact origin, then publish the website change from v0. Visitors can ask questions aloud while the widget displays the conversation and any enabled on-screen steps.

The integration guides also cover Lovable, React, and coding assistants.

Before you start

Have an editable v0 project using React 18.2 or React 19, an audentic account, and your agent ID. Configure the agent, save its instructions and knowledge, and test it in audentic. You need the actual production website address before visitors can connect from that site.

For example, a pottery studio could use a v0-built class page and an audentic assistant to explain beginner sessions, class duration, accessibility information, and the published booking process. Put those facts in the agent's knowledge. The assistant can help a visitor compare classes; your existing booking page handles the reservation. If message collection is enabled, visitors can review and confirm a question for your team in audentic's Inbox.

Ask v0 to inspect the project's framework. This example uses a Next.js App Router Client Component. In another React setup, follow its conventions. v0 also supports existing repositories through Git Import.

Add the package and a Client Component

Have v0 install @audentic/react using the project's current package manager. In a local npm checkout, use:

npm install @audentic/react

For a Next.js project, create a component such as components/voice-assistant.tsx:

"use client";

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

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

Replace YOUR_AGENT_ID and import VoiceAssistant into the class page. Keep its layout, headings, and booking links. The client boundary lets the widget handle interactive browser behavior.

The package includes its own widget styles and defaults to https://www.audentic.org/api. A provider API key is not needed in the v0 website for this embed. Agent instructions, voice, model, tools, and conversation limits remain configured in audentic. See the React reference for options such as onStatusChange and alternate audentic hosts.

Copy this implementation prompt into v0

Replace the ID and page description with your own:

Add my existing audentic voice agent to this v0 project.
Agent ID: YOUR_AGENT_ID
Page: our pottery classes page
Purpose: help visitors compare beginner classes and understand booking.

Inspect the framework, React version, package manager, and component layout.
Install the public @audentic/react package with the existing package manager.
Create a VoiceAssistant component that imports SessionControl from
"@audentic/react" and renders it with my agentId and showTranscript.
For Next.js App Router, put "use client" before the component's imports.
Place the component after the class introduction with the heading
"Ask about our pottery classes". Keep booking links and mobile layout intact.
Use the package's included styles and default hosted audentic API.
This embed needs no provider API key in the website.
Keep agent configuration in audentic; wire up the existing published agent.
Run the project's build and inspect the changed page.
Report the production origin, custom-domain origin, and any preview origin
I need to add under Website addresses in audentic's Test & publish.
List the real microphone checks I should run on the deployed website.
Reference: https://www.audentic.org/docs/developers/react

For a broader implementation brief, use the coding-agent guide.

Deploy from v0 and publish the agent

In v0, select Publish in the chat header. Review the project setup, website visibility, and selected domain, then select Publish to start the production deployment. After deployment, open the live URL. Later code changes reach production through Publish Changes. Follow the official v0 deployment instructions for the current publishing controls.

In audentic, open Test & publish, add the production origin under Website addresses, and select Publish agent. For a live page at https://clay-studio.vercel.app/classes, allow https://clay-studio.vercel.app. The origin includes the scheme and hostname, plus a port when present; it excludes the path. Paths and wildcards are not accepted.

v0's custom-domain settings are available through Publish → Customize Domain or Project menu → Settings → Domains. Add the custom domain's origin in audentic after it is configured. Authorize https://example.com and https://www.example.com separately if both serve the widget. A changing deployment preview address is a separate origin too; allowing the production host does not allow every preview. See Publish to a website for the full rules.

Verify outside the editor preview

Voice requires HTTPS or localhost, a compatible browser, and microphone permission. If a preview is framed, its parent iframe needs allow="microphone; autoplay". Open the deployed page in a normal browser tab when the editor preview cannot grant microphone access. If connection fails there, check the allowed origin, published agent, ID, browser permission, and any restrictive Content Security Policy.

  • Visit the deployed class page while signed out of audentic. Confirm the widget appears without opening the microphone.
  • Start a conversation, ask about a known class, interrupt the answer, mute, and end. Verify the microphone indicator stops.
  • Test a narrow mobile screen and denied microphone permission.
  • Ask about an unavailable class and check that the response follows your saved guidance.
  • If messages are enabled, confirm a visitor request and review Inbox. Review the completed transcript in Conversations.

Sources: v0 Git Import, deployment workflow, and custom domains.

Updated · Written by the audentic team