Audentic / Docs
Open studio

Add an agent to a website

Publish an agent in Audentic and add your website's exact origin in Test & publish before installing the widget. The widget requests a connection from Audentic; the OpenAI API key stays on the Audentic server.

React

Install the package in your website project:

npm install @audentic/react

Render SessionControl with your published agent ID. In a Next.js App Router project, put it in a Client Component:

"use client";

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

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

The package supports React 18.2 and React 19. It includes its own widget styling; the host app does not need Tailwind or an Audentic stylesheet. The default API URL is https://www.audentic.org/api. If you run a different Audentic deployment, pass its API URL, including /api:

<SessionControl
  agentId="YOUR_AGENT_ID"
  apiBaseUrl="https://YOUR_AUDENTIC_DOMAIN/api"
  showTranscript
/>

Optional props include widgetConfiguration for presentation overrides, showTranscript to open captions initially, onStatusChange for connection status, and onTranscriptChange for transcript items. Model choice, instructions, business knowledge, tools, and session limits are configured in Audentic rather than browser props.

Any website

Use the script and custom element generated in Test & publish. For an Audentic instance at https://www.audentic.org, the snippet is:

<script src="https://www.audentic.org/embed.js" defer></script>
<audentic-embed
  agent-id="YOUR_AGENT_ID"
  api-base-url="https://www.audentic.org/api"
></audentic-embed>

Place the snippet where visitors should see the assistant. For a different Audentic deployment, replace both Audentic URLs with that deployment's origin. The script registers a audentic-embed custom element, bundles its own React runtime, and isolates the widget in a shadow root. The element also accepts show-transcript and a JSON widget-configuration attribute.

Browser requirements and checks

  • The agent must be published and the website's exact origin must be in its allowed website list. Include the port for local development, such as http://localhost:4000.
  • Voice requires HTTPS or localhost, a WebRTC-capable browser, and microphone permission.
  • An iframe needs allow="microphone; autoplay" on the parent iframe element.
  • A restrictive Content Security Policy must permit the Audentic script, the Audentic API in connect-src, the Audentic host in frame-src for custom interactive views, and the widget's inline styles.
  • Test a real microphone conversation on the deployed website. The builder preview tests the saved agent but does not check the external site's permissions or origin.

The browser fetches the public agent configuration, then sends a microphone SDP offer to /api/voice/session. Audentic authorizes the origin, connects the visitor to the selected voice model, and returns a signed session token for the widget's server-backed tools and transcript finalization. There is no OpenAI key in the browser.