---
name: audentic
description: Add an existing published Audentic voice agent to a React or HTML website. Use when a user asks a coding agent to install the Audentic widget in a website repository.
---

# Add an Audentic voice agent to a website

Work with the website's framework and conventions. Get the Audentic agent ID and application origin from the user or project. If the agent is still a draft, integrate it and tell its owner to test and publish it in Audentic before the external site can connect. Report the site's exact origin for the owner's allowed website list, including a port for localhost.

For React, install `@audentic/react` and render `SessionControl` with `agentId`. In a Next.js App Router project, render it from a Client Component:

```tsx
"use client";
import { SessionControl } from "@audentic/react";

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

The hosted API defaults to `https://www.audentic.org/api`. For another deployment, pass `apiBaseUrl="https://YOUR_AUDENTIC_DOMAIN/api"`.

For a non-React site, place the builder's generated snippet where the widget should appear. Its shape is:

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

Run the site's normal build or typecheck, then check the widget on the allowed origin with a real microphone. Voice requires HTTPS or localhost, browser microphone permission, and WebRTC support. Keep OpenAI credentials out of website code. Audentic does not yet offer a supported CLI, MCP server, or public management credential; do not attempt to manage agents with visitor session tokens or browser Origin headers.