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 → https://youtu.be/fnivYSh0Cqk Twilio telephony integration → https://youtu.be/1_ebl-acp6M Embed the widget on your site → https://youtu.be/XweA70b45Ws 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 → https://youtu.be/pB33QxKN8P8 Security & authentication → https://youtu.be/8hZ4IWL7iqw