call-with-ai-agent์(๋) ๋ฌด์์ ํ๋์?
๐ฃ๏ธ Next.js์ ElevenLabs๋ฅผ ์ฌ์ฉํ์ฌ AI ์์ด์ ํธ์ ์ค์๊ฐ ์์ฑ ๋ํ๋ฅผ ํตํด ์ํธ์์ฉ์ ์ด๊ณ ๋ฐ์์ฑ ๋์ ์ฌ์ฉ์ ๊ฒฝํ์ ์ ๊ณตํฉ๋๋ค.
๊ฐ์
์ด ํ๋ก์ ํธ๋ Next.js ์ ํ๋ฆฌ์ผ์ด์ ์์ ElevenLabs์ ์์ฑ API๋ฅผ ํตํฉํ์ฌ ์ฌ์ฉ์๊ฐ AI ์์ด์ ํธ์ ์์ฐ์ด๋ก ์์ฑ ๋ํ๋ฅผ ๋๋ ์ ์๋๋ก ํฉ๋๋ค. ์ค์๊ฐ ํต์ ์ ์ํด WebSocket ๋๋ HTTP ์คํธ๋ฆฌ๋ฐ์ ์ฌ์ฉํ๋ฉฐ, ์ฌ์ฉ์์ ์์ฑ ์ ๋ ฅ์ ํ ์คํธ๋ก ๋ณํํ๊ณ AI์ ์๋ต์ ๋ค์ ์์ฑ์ผ๋ก ํฉ์ฑํฉ๋๋ค.
์ฃผ์ ๊ธฐ๋ฅ
- ์ค์๊ฐ ์์ฑ ๋ํ: ๋ง์ดํฌ๋ฅผ ํตํด ๋งํ๋ฉด AI๊ฐ ์ฆ์ ์๋ตํฉ๋๋ค.
- ๊ณ ํ์ง ์์ฑ ํฉ์ฑ: ElevenLabs์ ๋ค์ํ ์์ฑ ๋ชจ๋ธ์ ์ ํํ ์ ์์ต๋๋ค.
- Next.js ํตํฉ: ํ์คํ React ํ๋ ์์ํฌ๋ก ์๋ฒ ๋ฐ ํด๋ผ์ด์ธํธ ๋ก์ง์ ๊ฐํธํ๊ฒ ๊ด๋ฆฌํฉ๋๋ค.
- ์ฌ์ฉ์ ์ ์ ๊ฐ๋ฅ: ์์ฑ ์๋, ํค, ์ธ์ด ๋ฑ์ ์กฐ์ ํ ์ ์์ต๋๋ค.
์ค์น ๋ฐฉ๋ฒ
-
์ ์ฅ์๋ฅผ ํด๋ก ํฉ๋๋ค:
git clone https://github.com/SHUKLAO/call-with-ai-agent.git cd call-with-ai-agent -
์์กด์ฑ์ ์ค์นํฉ๋๋ค:
npm install # ๋๋ yarn install -
ํ๊ฒฝ ๋ณ์๋ฅผ ์ค์ ํฉ๋๋ค:
.env.localํ์ผ์ ์์ฑํ๊ณ ๋ค์ ํค๋ฅผ ์ถ๊ฐํฉ๋๋ค:ELEVENLABS_API_KEY=your_elevenlabs_api_key NEXT_PUBLIC_ELEVENLABS_VOICE_ID=your_voice_id
์ฌ์ฉ ๋ฐฉ๋ฒ
-
๊ฐ๋ฐ ์๋ฒ๋ฅผ ์์ํฉ๋๋ค:
npm run dev -
๋ธ๋ผ์ฐ์ ์์
http://localhost:3000์ผ๋ก ์ด๋ํฉ๋๋ค. -
๋ง์ดํฌ ๊ถํ์ ํ์ฉํ๊ณ "๋ํ ์์" ๋ฒํผ์ ํด๋ฆญํฉ๋๋ค.
-
๋ง์ดํฌ์ ๋๊ณ ๋งํ๋ฉด AI ์์ด์ ํธ๊ฐ ์๋ตํฉ๋๋ค.
API ์๋ํฌ์ธํธ
POST /api/voice/transcribe: ์์ฑ ํ์ผ์ ํ ์คํธ๋ก ๋ณํํฉ๋๋ค.POST /api/voice/synthesize: ํ ์คํธ๋ฅผ ์์ฑ์ผ๋ก ํฉ์ฑํฉ๋๋ค.GET /api/voice/stream: ์ค์๊ฐ ์์ฑ ์คํธ๋ฆฌ๋ฐ์ ์ํ WebSocket ์๋ํฌ์ธํธ์ ๋๋ค.
์ฃผ์ ์์กด์ฑ
- Next.js โ React ๊ธฐ๋ฐ ์น ํ๋ ์์ํฌ
- ElevenLabs โ AI ์์ฑ ํฉ์ฑ API
- WebSocket โ ์ค์๊ฐ ํต์
๋ผ์ด์ ์ค
MIT