> This is a page from the ElevenLabs documentation. For a complete page index, fetch https://elevenlabs.io/docs/llms.txt. For the full documentation in a single file, fetch https://elevenlabs.io/docs/llms-full.txt.

# Next.JS

यह ट्यूटोरियल आपको ऐसा वेब क्लाइंट बनाने में मदद करेगा जो ElevenLabs एजेंट के साथ इंटरैक्ट कर सके। आप रीयल-टाइम वॉइस बातचीत लागू करना सीखेंगे, जिससे यूज़र ऐसे AI एजेंट से बात कर सकेंगे जो वॉइस सिंथेसिस की मदद से सुन, समझ और स्वाभाविक रूप से जवाब दे सकता है।

## आपको क्या चाहिए

1. [इस गाइड](/docs/hi/eleven-agents/quickstart) के अनुसार बनाया गया ElevenLabs एजेंट
2. आपके लोकल सिस्टम पर `npm` इंस्टॉल होना चाहिए।
3. इस ट्यूटोरियल में हम Typescript का इस्तेमाल करेंगे, लेकिन आप चाहें तो Javascript भी इस्तेमाल कर सकते हैं।

> **Note**
>
> पूरा उदाहरण चाहिए? हमारा [GitHub पर Next.js डेमो](https://github.com/elevenlabs/examples/tree/main/agents/nextjs/quickstart) देखें।

![](/docs/_fern-img/c1bc26a84d079cebcdfe6b4eb602bd27476d5afc92419e9ddfb92b755ca8058e.webp)

## सेटअप

#### नया Next.js प्रोजेक्ट बनाएं

टर्मिनल विंडो खोलें और यह कमांड चलाएं:

```bash
npm create next-app my-conversational-agent
```

यह आपसे प्रोजेक्ट बनाने के तरीके के बारे में कुछ सवाल पूछेगा। इस ट्यूटोरियल में हम डिफ़ॉल्ट सुझावों का पालन करेंगे।

#### प्रोजेक्ट डायरेक्टरी में जाएं

```shell
cd my-conversational-agent
```

#### ElevenLabs डिपेंडेंसी इंस्टॉल करें

```shell
npm install @elevenlabs/react
```

#### सेटअप टेस्ट करें

डेवलपमेंट सर्वर शुरू करने के लिए यह कमांड चलाएं और ब्राउज़र में दिया गया URL खोलें:

```shell
npm run dev
```

![](/docs/_fern-img/537e2c5609df75b2fd15bf3a37c86da75410de053dfb0c76267a72d7b8d9914a.webp)

## ElevenLabs Agents लागू करें

#### कन्वर्सेशन कंपोनेंट बनाएं

एक नई फ़ाइल `app/components/conversation.tsx` बनाएं:

**`app/components/conversation.tsx`**

```tsx app/components/conversation.tsx
'use client';

import { useConversation } from '@elevenlabs/react';
import { useCallback } from 'react';

export function Conversation() {
  const conversation = useConversation({
    onConnect: () => console.log('Connected'),
    onDisconnect: () => console.log('Disconnected'),
    onMessage: (message) => console.log('Message:', message),
    onError: (error) => console.error('Error:', error),
  });


  const startConversation = useCallback(async () => {
    try {
      // Request microphone permission
      await navigator.mediaDevices.getUserMedia({ audio: true });

      // Start the conversation with your agent
      await conversation.startSession({
        agentId: 'YOUR_AGENT_ID', // Replace with your agent ID
        userId: 'YOUR_CUSTOMER_USER_ID', // Optional field for tracking your end user IDs
      });

    } catch (error) {
      console.error('Failed to start conversation:', error);
    }
  }, [conversation]);

  const stopConversation = useCallback(async () => {
    await conversation.endSession();
  }, [conversation]);

  return (
    <div className="flex flex-col items-center gap-4">
      <div className="flex gap-2">
        <button
          onClick={startConversation}
          disabled={conversation.status === 'connected'}
          className="px-4 py-2 bg-blue-500 text-white rounded disabled:bg-gray-300"
        >
          Start Conversation
        </button>
        <button
          onClick={stopConversation}
          disabled={conversation.status !== 'connected'}
          className="px-4 py-2 bg-red-500 text-white rounded disabled:bg-gray-300"
        >
          Stop Conversation
        </button>
      </div>

      <div className="flex flex-col items-center">
        <p>Status: {conversation.status}</p>
        <p>Agent is {conversation.isSpeaking ? 'speaking' : 'listening'}</p>
      </div>
    </div>
  );
}
```

#### मुख्य पेज अपडेट करें

`app/page.tsx` की सामग्री को इससे बदलें:

**`app/page.tsx`**

```tsx app/page.tsx
'use client';

import { ConversationProvider } from '@elevenlabs/react';
import { Conversation } from './components/conversation';

export default function Home() {
  return (
    <ConversationProvider>
      <main className="flex min-h-screen flex-col items-center justify-between p-24">
        <div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm">
          <h1 className="text-4xl font-bold mb-8 text-center">
            ElevenLabs Agents
          </h1>
          <Conversation />
        </div>
      </main>
    </ConversationProvider>
  );
}
```

#### (वैकल्पिक) साइन किए गए URL से एजेंट ऑथेंटिकेट करें

> **Note**
>
> यह ऑथेंटिकेशन चरण केवल प्राइवेट एजेंट के लिए ज़रूरी है। अगर आप पब्लिक एजेंट इस्तेमाल कर रहे हैं, तो आप
> इस सेक्शन को छोड़कर सीधे `startSession` कॉल में `agentId` इस्तेमाल कर सकते हैं।

अगर आप ऐसा प्राइवेट एजेंट इस्तेमाल कर रहे हैं जिसे ऑथेंटिकेशन चाहिए, तो आपको अपने सर्वर से
एक साइन किया गया URL जनरेट करना होगा। यह सेक्शन बताता है कि इसे कैसे सेट अप करें।

### आपको क्या चाहिए

1. ElevenLabs अकाउंट और API key। [यहां](https://elevenlabs.io/app/sign-up) साइन अप करें।

#### एनवायरनमेंट वेरिएबल बनाएं

अपने प्रोजेक्ट रूट में `.env.local` फ़ाइल बनाएं:

**`.env.local`**

```yaml .env.local
ELEVENLABS_API_KEY=your-api-key-here
NEXT_PUBLIC_AGENT_ID=your-agent-id-here
```

> **Warning**
>
> 1. संवेदनशील क्रेडेंशियल्स को गलती से वर्ज़न कंट्रोल में कमिट होने से रोकने के लिए `.env.local` को अपनी `.gitignore` फ़ाइल में ज़रूर जोड़ें।
> 2. अपनी API key को कभी भी क्लाइंट-साइड कोड में एक्सपोज़ न करें। इसे हमेशा सर्वर पर सुरक्षित रखें।

#### API रूट बनाएं

एक नई फ़ाइल `app/api/get-signed-url/route.ts` बनाएं:

**`app/api/get-signed-url/route.ts`**

```tsx app/api/get-signed-url/route.ts
import { NextResponse } from 'next/server';

export async function GET() {
  try {
    const response = await fetch(
      `https://api.elevenlabs.io/v1/convai/conversation/get-signed-url?agent_id=${process.env.NEXT_PUBLIC_AGENT_ID}`,
      {
        headers: {
          'xi-api-key': process.env.ELEVENLABS_API_KEY!,
        },
      }
    );

    if (!response.ok) {
      throw new Error('Failed to get signed URL');
    }

    const data = await response.json();
    return NextResponse.json({ signedUrl: data.signed_url });
  } catch (error) {
    return NextResponse.json(
      { error: 'Failed to generate signed URL' },
      { status: 500 }
    );
  }
}
```

#### Conversation कंपोनेंट अपडेट करें

साइन किया गया URL फ़ेच और इस्तेमाल करने के लिए अपनी `conversation.tsx` में बदलाव करें:

**`app/components/conversation.tsx`**

```tsx app/components/conversation.tsx {5-12,19,23}
// ... existing imports ...

export function Conversation() {
  // ... existing conversation setup ...
  const getSignedUrl = async (): Promise<string> => {
    const response = await fetch("/api/get-signed-url");
    if (!response.ok) {
      throw new Error(`Failed to get signed url: ${response.statusText}`);
    }
    const { signedUrl } = await response.json();
    return signedUrl;
  };

  const startConversation = useCallback(async () => {
    try {
      // Request microphone permission
      await navigator.mediaDevices.getUserMedia({ audio: true });

      const signedUrl = await getSignedUrl();

      // Start the conversation with your signed url
      await conversation.startSession({
        signedUrl,
      });

    } catch (error) {
      console.error('Failed to start conversation:', error);
    }
  }, [conversation]);

  // ... rest of the component ...
}
```

> **Warning**
>
> साइन किए गए URL थोड़े समय बाद एक्सपायर हो जाते हैं। हालांकि, एक्सपायर होने से पहले शुरू की गई सभी बातचीत बिना रुकावट जारी रहेगी। प्रोडक्शन एनवायरनमेंट में नई बातचीत शुरू करने के लिए सही एरर हैंडलिंग और URL रीफ़्रेश लॉजिक लागू करें।

## अगले चरण

अब जब आपके पास एक बेसिक इम्प्लीमेंटेशन है, तो आप:

1. वॉइस गतिविधि के लिए विज़ुअल फ़ीडबैक जोड़ सकते हैं
2. एरर हैंडलिंग और रीट्राई लॉजिक लागू कर सकते हैं
3. चैट हिस्ट्री डिस्प्ले जोड़ सकते हैं
4. अपने ब्रांड के अनुसार UI कस्टमाइज़ कर सकते हैं

> **Info**
>
> ज़्यादा उन्नत फ़ीचर्स और कस्टमाइज़ेशन विकल्पों के लिए
> [@elevenlabs/react](https://www.npmjs.com/package/@elevenlabs/react) पैकेज देखें।