Telnyx AI Assistant를 활용한 웹 챗봇 구축
요약
Telnyx AI Assistant API를 사용하여 웹 기반 챗봇을 구축하는 방법을 소개합니다. Flask 서버와 API를 활용해 어시스턴트의 지침과 UI를 분리하여 관리하는 효율적인 개발 워크플로우를 제공합니다.
핵심 포인트
- Telnyx Portal에서 어시스턴트 지침을 관리하고 UI는 별도로 구현 가능
- Flask 서버를 통해 API 키를 안전하게 보호하며 메시지 송수신
- 복잡한 통화 제어 없이 어시스턴트 생명주기에 집중할 수 있는 구조
- 대화 생성, 메시지 전송, 응답 렌더링의 핵심 흐름 구현
대부분의 AI 어시스턴트 데모는 곧바로 음성(Voice)으로 넘어갑니다. 음성도 훌륭하지만, 웹 채팅(Web chat)은 시작하기에 가장 깔끔한 장소인 경우가 많습니다.
핵심 아이디어를 빠르게 증명할 수 있습니다. Portal에서 어시스턴트를 설정하고, API를 통해 사용자 메시지를 보내며, 응답을 자체 인터페이스에 렌더링(Render)하면 됩니다.
이를 위한 Telnyx 코드 예제는 다음과 같습니다:
https://github.com/team-telnyx/telnyx-code-examples/tree/main/chat-with-ai-assistant-python
아이디어 (The Idea)
어시스턴트는 Telnyx에 존재하고, UI는 귀하의 앱에 존재합니다.
이러한 분리는 유용합니다. 제품 팀은 Telnyx Mission Control Portal에서 어시스턴트 지침(Instructions)을 조정할 수 있는 반면, 개발자는 프론트엔드(Frontend), 인증(Authentication), 라우팅(Routing), 스타일링(Styling), 로깅(Logging) 및 제품 특화 동작에 대해 완전한 제어권을 유지할 수 있습니다.
이번 데모를 위해 저는 어시스턴트를 Telnyx 챗봇(Chatbot)으로 사용했습니다. 이 챗봇은 Telnyx가 무엇을 하는지, Frankenstack이 무엇인지, 그리고 AI 어시스턴트가 프로그래머블 커뮤니케이션(Programmable communications)에 어떻게 부합하는지와 같은 질문에 답변합니다.
흐름 (The Flow)
이 앱은 브라우저 UI를 갖춘 작은 Flask 서버입니다.
페이지가 로드되면 백엔드(Backend)에서 Telnyx 대화(Conversation)를 생성합니다. 사용자가 메시지를 보내면 백엔드는 해당 메시지를 Assistant Chat API로 전송합니다. 어시스턴트 응답은 텍스트로 돌아오며 UI는 이를 채팅창에 렌더링합니다.
중요한 점은 API 키가 서버에 머문다는 것입니다. 브라우저는 Flask 앱과만 통신합니다.
이 데모가 효과적인 이유
이 프로젝트는 전화번호 설정, 웹훅 터널(Webhook tunnel), 통화 제어 상태 머신(Call-control state machine)이 필요 없기 때문에 좋은 첫 번째 AI 어시스턴트 프로젝트가 됩니다. 여러분은 어시스턴트 생명주기(Lifecycle)에 집중할 수 있습니다:
대화 생성 (create conversation)
메시지 전송 (send message)
응답 렌더링 (render response)
...
이를 통해 Portal에서 관리되는 어시스턴트와 가공되지 않은 모델 완성(Raw model completion) 사이의 차이점을 더 쉽게 설명할 수 있습니다. 어시스턴트는 설정(Configuration), 지침(Instructions), 대화 문맥(Conversation context) 및 제품 수준의 설정을 가지고 있습니다. 귀하의 앱은 단지 그 어시스턴트가 어디에 어떻게 나타날지를 결정할 뿐입니다.
실행하기 (Running It)
git clone https://github.com/team-telnyx/telnyx-code-examples.git
cd telnyx-code-examples/chat-with-ai-assistant-python
cp .env.example .env
...
환경 변수 (Environment):
TELNYX_API_KEY=your_telnyx_api_key
AI_ASSISTANT_ID=your_ai_assistant_id
PORT=5000
로컬 앱을 열고 다음과 같이 질문해 보세요:
What is Telnyx?
그 다음 다음과 같이 질문해 보세요:
What is a Frankenstack?
이 두 질문은 데모를 쉽게 이해할 수 있게 해줍니다. Telnyx는 통합된 통신 및 AI 플랫폼이며, Frankenstack은 팀이 전화(telephony), 음성-텍스트 변환 (Speech-to-Text), 거대언어모델 (LLMs), 텍스트-음성 변환 (Text-to-Speech), 메시징, 분석 (analytics), 그리고 워크플로 (workflows)를 위해 서로 다른 벤더들을 짜깁기했을 때 발생하는 상태를 의미합니다.
다음에 추가하고 싶은 것 (What I Would Add Next)
실제 제품을 만든다면, 사용자 계정, 지속적인 대화 기록 (persistent conversation history), 분석 (analytics), 속도 제한 (rate limits), 그리고 상담원 또는 지원 워크플로로의 전환 경로 (handoff path)를 추가하겠습니다. 만약 동일한 어시스턴트가 음성이나 메시징 서비스도 구동한다면, 어시스턴트의 핵심 지침 (core instructions)은 일관되게 유지하고 각 채널이 자체적인 사용자 경험 (UX)을 처리하도록 하겠습니다.
이 패턴의 멋진 점은 이것입니다: 하나의 어시스턴트가 여러 사용자 경험을 구동할 수 있으며, 앱이 그 경험이 어떻게 느껴질지를 결정한다는 것입니다.
리소스 (Resources)
- 코드 예제: https://github.com/team-telnyx/telnyx-code-examples/tree/main/chat-with-ai-assistant-python
- Telnyx AI Assistants: https://telnyx.com/ai-assistants
- Telnyx 개발자 문서: https://developers.telnyx.com/docs/overview
AI 자동 생성 콘텐츠
본 콘텐츠는 Dev.to AI tag의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기