Build multimodal agents with ElevenAgents. Our SDKs provide seamless integration with popular JavaScript/TypeScript frameworks, enabling you to create multimodal AI agents.
npm install @elevenlabs/reactimport { useConversation } from "@elevenlabs/react";
const conversation = useConversation({
agentId: "your-agent-id",
});
// Start conversation
conversation.startSession();The ElevenAgents SDKs provide a unified interface for integrating multimodal AI agents into your applications.
| Package | Description | Version | Links |
|---|---|---|---|
@elevenlabs/client |
Core TypeScript/JavaScript client | README • Docs | |
@elevenlabs/react |
React hooks and components for web applications | README • Docs | |
@elevenlabs/react-native |
React Native SDK for cross-platform applications | README • Docs | |
@elevenlabs/convai-widget-core |
Core widget library for embedding Agents | Docs | |
@elevenlabs/convai-widget-embed |
Pre-bundled embeddable widget | Docs |
The core TypeScript/JavaScript client provides the foundation for all ElevenLabs agent integrations.
- Real-time Communication: WebRTC-based audio streaming for low-latency agent interactions
- Event-driven Architecture: Comprehensive event system for agent session lifecycle management
- Client Tools: Support for custom client-side tools and functions
- Flexible Authentication: Support for both public and private agent configurations
- Audio Controls: Fine-grained control over audio input/output devices
npm install @elevenlabs/clientReact hooks and components for building multimodal agents with React/Next.js
npm install @elevenlabs/reactReact Native SDK for building cross-platform mobile agents
npm install @elevenlabs/react-native
# Install peer dependencies
npm install @livekit/react-native @livekit/react-native-webrtc livekit-clientAdd the following to your Info.plist:
<key>NSMicrophoneUsageDescription</key>
<string>This app needs access to your microphone for voice agent interactions.</string>Add the following permissions to your AndroidManifest.xml:
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.INTERNET" />The ElevenAgents Widgets provide an easy way to embed AI agents into any website as a web component.
Learn how to embed the widget into your website here.
Client tools allow your agent to trigger actions in your application, for example in React:
import { useConversation } from "@elevenlabs/react";
const conversation = useConversation({
agentId: "your-agent-id",
});
// Start conversation
conversation.startSession({
clientTools: {
logMessage: async ({ message }) => {
console.log(message);
},
},
});Explore our example applications to see the SDKs in action:
For detailed documentation, visit:
This project uses Turbo and pnpm to manage dependencies.
# Install pnpm globally
npm install -g pnpm
# Install dependencies
pnpm install
# Build all packages
pnpm run build
# Run tests
pnpm run test
# Start development mode
pnpm run dev
# If the change needs a note in the changelog / release nodes, create a changeset
pnpm run changesetpnpm run create --name=my-new-packageWe're using Changesets to coordinate changelog entries and release notes and as such, there's no more need to create per-package tags when preparing a release.
Simply, merge the latest "Version Packages" PR opened by the Changesets action.
See the Changesets documentation for answers to common questions.
This project is licensed under the MIT License - see the LICENSE file for details.
Engineered by ElevenLabs
