토큰 단위 스트리밍
channelData.streamType과 streamSequence를 해석해 같은 streamId의 청크를 하나의 말풍선으로 누적합니다.
대화가 실시간으로
흐르는 AI 경험
Microsoft Copilot Studio 에이전트를 Direct Line 라이브스트리밍 규약으로 연결한 커스텀 캔버스입니다.
informative → streaming → final 단계가 하나의 말풍선에서 자연스럽게 이어집니다.
What's inside
템플릿 한 벌로 끝나는
프로덕션 채팅 UI
빌드 도구도, 번들러도, 외부 CDN도 필요 없습니다. 정적 파일 + 함수 하나면 됩니다.
지역 엔드포인트 자동 탐색
regionalchannelsettings로 에이전트가 배포된 지역의 Direct Line URL을 조회합니다. 하드코딩하지 않습니다.
토큰 엔드포인트 은닉
Cloudflare Pages Function이 토큰을 대신 발급받아 전달합니다. 브라우저 번들에 비밀 URL이 남지 않습니다.
마크다운 · 인용 · 빠른 응답
표, 코드블록, 링크 렌더링과 schema.org 인용 각주, suggestedActions 버튼을 기본 지원합니다.
자동 재연결 · 토큰 갱신
지수 백오프 재연결, watermark 기반 복구, 15분 주기 토큰 리프레시가 내장되어 있습니다.
활동 인스펙터
수신되는 모든 스트림 이벤트를 색상별 로그로 확인해 에이전트 동작을 바로 디버깅할 수 있습니다.
Livestreaming protocol
세 단계로 이어지는 응답
Copilot Studio는 부분 응답을 typing 활동으로 먼저 보내고, 마지막에 완성된 message로 마무리합니다.
informative
“문서를 찾고 있어요…” 같은 진행 상황. 점선 배지로 표시되고 본문이 오면 사라집니다.
streaming
겹치는 부분 텍스트가 streamSequence 순서로 도착합니다. 역전된 프레임은 버립니다.
final
완성 텍스트 + 인용 + 빠른 응답. 커서가 사라지고 복사 버튼이 붙습니다.
{ "type": "typing", "channelData": { "streamType": "informative", "streamId": "…|0001", "streamSequence": 1 } }
{ "type": "typing", "channelData": { "streamType": "streaming", "streamId": "…|0001", "streamSequence": 2 }, "text": "안녕하" }
{ "type": "typing", "channelData": { "streamType": "streaming", "streamId": "…|0001", "streamSequence": 3 }, "text": "안녕하세요, 무엇을" }
{ "type": "message", "channelData": { "streamType": "final", "streamId": "…|0001" }, "text": "안녕하세요, 무엇을 도와드릴까요?" }Cloudflare free tier
3분 배포
Pages 무료 플랜 + Functions 무료 한도(하루 10만 요청) 안에서 동작합니다.
토큰 엔드포인트 복사
Copilot Studio → 설정 → 채널 → 모바일 앱 → 토큰 엔드포인트 URL.
Pages 프로젝트 생성
빌드 명령 없음, 출력 디렉터리 public. 저장소를 연결하거나 wrangler pages deploy public.
환경변수 등록
COPILOT_TOKEN_ENDPOINT 를 Secret 으로 추가하면 /api/token 이 활성화됩니다.
대화 시작
/chat.html 접속 → 상태 배지가 “연결됨”이 되면 완료.