### Install ElevenAgents React SDK

Source: https://www.npmjs.com/package/%40elevenlabs/react/v/1.1.1?activeTab=readme

Command to install the package via npm.

```bash
npm install @elevenlabs/react
```

--------------------------------

### Install via shorthand

Source: https://www.npmjs.com/package/%40elevenlabs/react/v/1.1.1?activeTab=readme

Alternative command to install the package using the npm shorthand.

```bash
npm i @elevenlabs/react
```

--------------------------------

### Install package via npm

Source: https://www.npmjs.com/package/%40elevenlabs/react-native/v/1.1.1?activeTab=readme

Standard command to install the package into your project.

```bash
npm i @elevenlabs/react-native
```

--------------------------------

### Install Specific Version

Source: https://www.npmjs.com/package/%40elevenlabs/react-native/v/1.1.0?activeTab=dependencies

Install version 1.1.0 of the @elevenlabs/react-native package.

```bash
npm i @elevenlabs/react-native@1.1.0
```

--------------------------------

### Initialize ElevenAgents Conversation

Source: https://www.npmjs.com/package/%40elevenlabs/react/v/1.1.1?activeTab=readme

Setup the ConversationProvider and use controls to manage agent sessions.

```javascript
import {
  ConversationProvider,
  useConversationControls,
  useConversationStatus,
} from "@elevenlabs/react";

function App() {
  return (
    {/* replace with your agent's ID */}
    <ConversationProvider agentId="agent_7101k5zvyjhmfg983brhmhkd98n6">
      <Conversation />
    </ConversationProvider>
  );
}

function Conversation() {
  const { startSession, endSession } = useConversationControls();
  const { status } = useConversationStatus();

  return (
    <div>
      <p>Status: {status}</p>
      <button
        onClick={() =>
          startSession({
            onConnect: ({ conversationId }) =>
              console.log("Connected:", conversationId),
            onError: (message) => console.error("Error:", message),
          })
        }
      >
        Start
      </button>
      <button onClick={() => endSession()}>End</button>
    </div>
  );
}
```

--------------------------------

### Install @elevenlabs/react-native SDK

Source: https://www.npmjs.com/package/%40elevenlabs/react-native/v/1.1.0?activeTab=versions

Install the SDK and its LiveKit peer dependencies for native WebRTC modules. This SDK requires Expo development builds; Expo Go is not supported.

```bash
npm install @elevenlabs/react-native @livekit/react-native @livekit/react-native-webrtc
```

--------------------------------

### React Native Conversation Quick Start

Source: https://www.npmjs.com/package/%40elevenlabs/react-native/v/1.1.0?activeTab=dependencies

Set up a conversation interface in React Native using ConversationProvider and hooks for controls and status. Replace the placeholder agent ID with your actual agent ID.

```javascript
import {
  ConversationProvider,
  useConversationControls,
  useConversationStatus,
} from "@elevenlabs/react-native";

function App() {
  return (
    {/* replace with your agent's ID */}
    <ConversationProvider agentId="agent_7101k5zvyjhmfg983brhmhkd98n6">
      <Conversation />
    </ConversationProvider>
  );
}

function Conversation() {
  const { startSession, endSession } = useConversationControls();
  const { status } = useConversationStatus();

  return (
    <>
      <Text>Status: {status}</Text>
      <Button
        title="Start"
        onPress={() =>
          startSession({
            onConnect: ({ conversationId }) =>
              console.log("Connected:", conversationId),
            onError: (message) => console.error("Error:", message),
          })
        }
      />
      <Button title="End" onPress={() => endSession()} />
    </>
  );
}

```

--------------------------------

### Initialize ConversationProvider

Source: https://www.npmjs.com/package/%40elevenlabs/react-native/v/1.1.0?activeTab=versions

Wrap your application with ConversationProvider, providing your agent's ID. This sets up the context for conversation controls and status.

```javascript
import {
  ConversationProvider,
  useConversationControls,
  useConversationStatus,
} from "@elevenlabs/react-native";

function App() {
  return (
    {/* replace with your agent's ID */}
    <ConversationProvider agentId="agent_7101k5zvyjhmfg983brhmhkd98n6">
      <Conversation />
    </ConversationProvider>
  );
}

function Conversation() {
  const { startSession, endSession } = useConversationControls();
  const { status } = useConversationStatus();

  return (
    <>
      <Text>Status: {status}</Text>
      <Button
        title="Start"
        onPress={() =>
          startSession({
            onConnect: ({ conversationId }) =>
              console.log("Connected:", conversationId),
            onError: (message) => console.error("Error:", message),
          })
        }
      />
      <Button title="End" onPress={() => endSession()} />
    </>
  );
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.