Fully customise Your Agent with the React SDK – useConversation Hook Tutorial

Описание: Go beyond the widget with a fully customised React integration. This video introduces the ElevenLabs React SDK and demonstrates how to install the @elevenlabs/react package, import the useConversation hook and start a session. The React hook manages connection and audio usage for your agent. You’ll see how to handle microphone access, set up WebRTC with benefits like packet‑loss management and echo cancellation, and insert your agent ID to initiate conversations.

New to conversational AI Agents? Get started here:
Build your first agent →    • Build Your First Conversational Voice Agen...  
Twilio telephony integration →    • Connect Your Voice Agent to Twilio – Telep...  
Embed the widget on your site →    • Embed Your ElevenLabs Voice Agent Anywhere...  

Chapters:
00:00 – Introduction: why developers use the React SDK.
00:20 – Overview of the SDK & useConversation: a React hook for managing connection and audio.
00:40 – Installing the library: using npm/yarn/pnpm.
01:00 – Initialising a conversation: importing the hook and calling useConversation().
01:20 – WebRTC & microphone access: enabling audio and explaining benefits.
01:45 – Providing your agent ID: copying the ID from the dashboard and inserting it.
02:20 – Testing the “Talk to us” button: starting a session and speaking with the agent.
03:00 – Recap & next steps: further customization, callback handlers and security considerations.

Watch the rest of the series:
Add server tools & webhooks →    • Add Real‑Time Data to Your Agent – Server ...  
Security & authentication →    • Secure Your Agents: Allowlists & Signed UR...