DVERSE / CONVERSATIONAL SYSTEM
AI Agent.
한 줄의 질문이 대화형 인터페이스가 되기까지.
동작 원리 시뮬레이션
입력메시지 · 위젯 액션
전송HTTP · SSE
출력텍스트 · 위젯 · 도구
01 / FOLLOW THE PROCESS
한 단계씩, 연결해서 이해하기
UI, 런타임, BFF, 백엔드와 스트림을 연결합니다. 텍스트 응답과 위젯 액션이 화면으로 돌아오는 경로를 살펴보세요.
텍스트 응답단계 탐색
01 / 06
STEP 01
React UI
메시지 입력
입력창이 사용자 메시지를 런타임에 전달합니다. 화면은 입력·대기·응답 상태를 표현합니다.
단계별 예시
1const message = input.trim();
2if (!message) return;
3runtime.send(message);
- 들어오는 것
- 사용자 메시지
- 나오는 것
- 전송할 메시지
EXAMPLE / 06 STEPS
메시지가 전송되고 응답 이벤트가 화면에 쌓이는 과정입니다. 모션이 꺼져 있어도 노드와 단계 버튼으로 탐색할 수 있습니다.
STATE AT THIS STEP
대화 화면에 도착한 것
USER
이 시스템은 어떻게 동작하나요?
ASSISTANT
응답을 준비하고 있습니다.
KEEP EXPLORING
흐름 다음에는, 각자의 역할.
같은 과정 안에서도 각 구성 요소가 책임지는 일은 다릅니다.