AI의 기억 시각화: Tauri와 React를 사용하여 에이전트 로그를 위한 로컬 지식 그래프(Knowledge Graph) 구축하기

AI 에이전트(AI agents)가 더욱 발전함에 따라, 이들은 단순히 질문에 답하는 것을 넘어 우리의 로컬 머신에서 작업을 수행하고, 파일을 분석하며, 다단계 계획(multi-step plans)을 실행하고 있습니다.

하지만 이는 거대한 문제를 야기합니다: 우리는 어떻게 그들의 사고 과정을 디버깅(debug)할 수 있을까요? 에이전트가 실패하거나 환각(hallucinate)을 일으킬 때, 5,000줄에 달하는 JSON 트랜스크립트(transcript) 로그를 읽는 것은 악몽과 같습니다.

이를 해결하기 위해, 저는 AI 에이전트 로그(특히 Gemini 로그)를 파싱(parse)하여 대화형 지식 그래프(Knowledge Graphs)와 타임라인(Timelines)으로 변환하는 오픈 소스 로컬 우선(local-first) 메모리 시각화 도구인 Cortex를 구축했습니다.

Tauri, React, 그리고 Rust를 사용하여 이를 어떻게 구축했는지 그 내부 구조를 살펴보겠습니다.

아키텍처: 왜 로컬 우선(Local-First)인가?

AI 에이전트 로그에는 종종 매우 민감한 데이터가 포함되어 있습니다. 만약 에이전트가 사용자의 로컬 파일 시스템을 인덱싱하거나, 코드베이스를 읽거나, 터미널 명령을 실행하고 있다면, 해당 트랜스크립트 로그를 클라우드 기반 시각화 도구에 안전하게 업로드할 수 없습니다.

따라서 이 도구는 전적으로 사용자의 머신에서 실행되어야 했습니다. 저는 아키텍처를 위해 Tauri v2를 선택했습니다:

• Rust 백엔드(Backend): 번개처럼 빠른 로컬 파일 시스템 스캔 및 데이터 처리를 위해.
• React + TypeScript 프론트엔드(Frontend): 복잡하고 대화형인 그래프를 렌더링하기 위해.
• Tauri IPC: 전통적인 웹 서버 없이 로컬 로그를 UI로 안전하게 연결하기 위해.

1단계: Rust를 이용한 파일 시스템 스캔

첫 번째 기술적 과제는 로그를 자동으로 찾는 것입니다. Gemini 및 기타 에이전트들은 일반적으로 숨겨진 앱 데이터 디렉토리(예: ~/.gemini/)에 대화 기록을 저장합니다.

사용자가 수동으로 JSON 파일을 업로드하게 만드는 대신, Rust 백엔드는 시작 시 하드 드라이브를 능동적으로 스캔합니다.

// Tauri 커맨드의 단순화된 예시
#[tauri::command]
fn get_gemini_conversations() -> Result<Vec<Conversation>, String> {
...

이 커맨드는 프론트엔드에 노출되며, 앱이 로드되는 즉시 대화 배열을 가져옵니다.

2단계: 트랜스크립트를 지식 그래프로 파싱하기

프론트엔드가 가공되지 않은 트랜스크립트 (transcript) 문자열을 받으면, 우리는 이 텍스트를 구조화된 관계형 데이터 (relational data)로 변환해야 합니다.

React 앱 내부에서 커스텀 파서 (custom parser)가 트랜스크립트를 읽고 다음 항목들을 추출합니다:

• 노드 (Nodes): 주요 결정, 도구 실행 (tool executions), 또는 인사이트 (insights).
• 엣지 (Edges): 생각 (thought), 도구 호출 (tool call), 그리고 그 결과로 나타난 결과물 사이의 관계.
• 타임라인 이벤트 (Timeline Events): 동작의 연대기적 순서.

// App.tsx 내부
useEffect(() => {
  if (selectedConvId) {
...

3단계: AI의 사고 과정 시각화하기

데이터가 구조화되면, 우리는 두 가지 주요 뷰 (view)를 렌더링합니다:

1. 메모리 그래프 (The Memory Graph): 노드들의 시각적 웹 (예: "사용자 요청" -> "웹 검색" -> "요약"). 이를 통해 AI가 정보를 어떻게 클러스터링 (clustering)했는지 즉시 확인할 수 있습니다.
2. 타임라인 (The Timeline): 연대기적인 단계별 분석. 만약 에이전트가 루프 (loop)에 빠졌다면, 타임라인을 통해 이를 명확하게 알 수 있습니다.

이 앱은 Tauri로 구축되었기 때문에, React 프론트엔드는 OS의 네이티브 웹뷰 (webview) 엔진을 사용하여 이러한 복잡한 시각화 자료를 렌더링합니다. 덕분에 수천 개의 노드가 있더라도 매우 빠르고 민첩하게(snappy) 유지되며, Electron 앱이 사용하는 RAM의 아주 적은 부분만을 소비합니다.

미래: 벡터 데이터베이스 (Vector Databases)

현재 Cortex는 로컬 로그를 직접 파싱합니다. 로드맵 상의 다음 큰 단계는 로컬 벡터 데이터베이스 (Vector Database)를 통합하여, 모든 과거 에이전트 메모리에 대해 시맨틱 검색 (semantic searching)을 가능하게 하는 것입니다. 시각화 도구에 다음과 같이 질문하는 모습을 상상해 보세요: "에이전트가 내 Webpack 설정을 수정했던 시점의 그래프를 보여줘."

확인해 보세요!

AI 에이전트를 구축하고 있거나, 지식 그래프 (Knowledge Graphs)에 관심이 있거나, 혹은 멋진 Tauri 앱이 작동하는 모습을 보고 싶다면, 여기서 소스 코드를 확인할 수 있습니다:

⭐ GitHub에서 Cortex 보기

여러분의 피드백을 듣고 싶으며, 기여 (contributions)는 언제나 환영합니다!