Algolia를 사용해 ‘마음 읽기’ 지원 포털을 만든 방법

Source: Dev.to

Overview

LiveAssist AI는 전통적인 지원 티켓 양식을 지능적이고 사전적인 어시스턴트로 변환합니다. 사용자가 티켓을 제출하고 답변을 기다리는 대신, 시스템은 사용자가 입력하는 동안 그들의 필요를 예측합니다.

Nano‑Agents

사이드바는 네 개의 특화된 Nano‑Agent를 병렬로 실행합니다:

Example Interaction

User types: “I want to return my ORD‑12345”

Instant results:

• Category dropdown auto‑selects “Returns & Refunds”
• Order‑tracking widget appears with live status
• “Refund Policy” article surfaces with a “Start a Return” action button

사용자는 티켓을 제출할 필요가 없습니다—문제가 해결됩니다!

Demo & Source

• Live Demo:
• GitHub Repo:

Knowledge Base Index

나는 여섯 개의 지원 기사로 구성된 지식 베이스를 인덱싱했습니다. 각 레코드는 다음 구조를 따릅니다 (JSON, 구문 강조):

{
  "objectID": "2",
  "title": "Refund Policy",
  "content": "We offer a 30‑day money‑back guarantee...",
  "category": "Returns",
  "tags": ["refund", "return", "money back"],
  "smartAction": {
    "type": "link",
    "url": "/returns/start",
    "label": "Start a Return"
  }
}

smartAction 필드는 핵심입니다: 검색 결과를 단순 텍스트가 아닌 실행 가능한 UI 컴포넌트로 변환합니다.

Proactive Retrieval Flow

전통적인 지원 양식은 반응형입니다: 사용자 제출 → 에이전트 검색 → 에이전트 답변.
LiveAssist AI는 이를 뒤집어 검색을 사전적이고 지속적으로 만듭니다:

User keystroke
   ↓ (debounce 300 ms)
Algolia search → Render results
   ↓
Entity extraction (Order IDs)
   ↓
Sentiment analysis (frustration keywords)
   ↓
Intent classification (auto‑routing)

각 레이어는 사용자의 추가 작업 없이 지능을 추가합니다. 검색 쿼리 자체가 “프롬프트” 역할을 하며, 다음과 같이 설계됩니다:

• 필드 연결: query = subject + " " + description (전체 컨텍스트 포착)
• 다중 속성 매칭: Algolia가 title, content, tags 전역을 검색

Performance & User Perception

• Instant feedback: 3개의 결과 제한으로 사이드바가 집중되고 과부하되지 않음.
• Latency: Algolia는 일관되게 10–50 ms에 결과를 제공; 사용자는 100 ms 이하의 응답을 “즉시”로 인식합니다.
• Experience: 로딩 스피너 없이, 대기 시간 없이—시스템이 “마음을 읽는” 듯한 부드러운 흐름.

Metrics

티켓이 제출되기 전에 솔루션을 제공함으로써 지원량은 감소하고 사용자 만족도는 상승합니다—이는 Algolia의 빠른 검색 덕분에 가능해졌습니다.

Technical Stack

• Frontend: React + Vite
• Search: Algolia (algoliasearch)
• Styling: Vanilla CSS with Glassmorphism design
• Architecture: Multi‑agent pattern with reactive state
• Built with ☕ and Algolia