بناء تطبيق ذكاء اصطناعي محادثي مع Next.js

npm create next-app my-conversational-agent

cd my-conversational-agent

npm install @11labs/react

npm run dev

'use client';
 
import { useConversation } from '@11labs/react';
import { useCallback, useState } from 'react';
 
export function Conversation() {
  const [transcript, setTranscript] = useState<string[]>([]);
 
  const conversation = useConversation({
    onConnect: () => console.log('متصل'),
    onDisconnect: () => console.log('غير متصل'),
    onMessage: (message) => {
      setTranscript((prev) => [...prev, `الذكاء الاصطناعي: ${message.message}`]);
    },
    onError: (error) => console.error('خطأ في المحادثة:', error),
  });
 
  const startConversation = useCallback(async () => {
    try {
      await navigator.mediaDevices.getUserMedia({ audio: true });
      await conversation.startSession({
        agentId: process.env.NEXT_PUBLIC_ELEVENLABS_AGENT_ID!,
      });
    } catch (error) {
      console.error('فشل بدء المحادثة:', error);
    }
  }, [conversation]);
 
  const stopConversation = useCallback(async () => {
    await conversation.endSession();
  }, [conversation]);
 
  return (
    <div className="flex flex-col items-center gap-6 p-6">
      <h2 className="text-2xl font-bold">محادثة صوتية في الوقت الفعلي</h2>
 
      <div className="flex gap-4">
        <button
          onClick={startConversation}
          disabled={conversation.status === 'connected'}
          className="px-6 py-3 bg-green-500 text-white rounded-lg disabled:bg-gray-300"
        >
          بدء المحادثة
        </button>
        <button
          onClick={stopConversation}
          disabled={conversation.status !== 'connected'}
          className="px-6 py-3 bg-red-500 text-white rounded-lg disabled:bg-gray-300"
        >
          إنهاء المحادثة
        </button>
      </div>
 
      <div className="text-center">
        <p className="text-lg">
          الحالة: <span className="font-semibold">{conversation.status}</span>
        </p>
        <p className="text-sm text-gray-600">
          {conversation.isSpeaking ? 'الذكاء الاصطناعي يتحدث...' : 'جاري الاستماع...'}
        </p>
      </div>
 
      <div className="w-full max-w-md h-64 overflow-y-auto border rounded p-4">
        {transcript.map((line, idx) => (
          <p key={idx} className="mb-2">{line}</p>
        ))}
      </div>
    </div>
  );
}

import { Conversation } from '@/components/Conversation';
 
export default function Home() {
  return (
    <main className="min-h-screen flex items-center justify-center">
      <Conversation />
    </main>
  );
}

NEXT_PUBLIC_ELEVENLABS_AGENT_ID=your_agent_id_here