Chief of Staff이 Notion MCP를 통해 VS Code 내에서 대화형 대시보드를 렌더링하고 AI가 직접 Notion 데이터를 읽고 수정하는 기능 구현

Context

솔로 창업자가 매일 아침 15분간 5개 데이터베이스를 수동으로 확인하여 작업의 우선순위를 파악해야 했으며, 기존 AI+Notion 솔루션은 텍스트 요약만 제공하고 사용자가 직접 Notion으로 이동하여 변경 사항을 적용해야 했다.

Technical Solution

• Notion MCP 프로토콜을 통해 단일 인터페이스로 전체 Notion 워크스페이스 읽기/쓰기 지원: 데이터베이스를 동적으로 발견하며 하드코딩된 ID 불필요
• React 컴포넌트 카탈로그(FocusCard, TaskList, TaskRow, GoalProgress, InsightBadge, AgentAction, SectionHeader)를 정의하여 AI가 실제 Notion 데이터로 대화형 UI 생성
• 생성된 UI를 자체 포함된 HTML 문자열로 컴파일하여 VS Code Copilot Chat 또는 Claude의 iframe 내에 렌더링
• 8개의 MCP 도구 구현: chief_of_staff_briefing(대시보드 렌더링), get_notion_briefing_data(워크스페이스 읽기), complete_notion_task(작업 완료), create_notion_tasks(작업 생성), reschedule_overdue_tasks(기한 변경), write_weekly_review(주간 리뷰 작성), break_down_goal(목표 분해), get_completed_tasks(완료 작업 조회)
• AgentAction 컴포넌트 클릭 이벤트를 AI에서 수신하여 적절한 MCP 도구로 라우팅하는 폐쇄형 에이전트 루프 구현

Key Takeaway

MCP 프로토콜을 활용하면 AI 에이전트가 특정 플랫폼의 API를 일관된 도구 설명만으로 제어할 수 있으며, 생성형 UI를 채팅 환경에 직접 렌더링하면 사용자가 별도의 웹 페이지나 외부 도구 없이 대화 내에서 데이터를 시각화하고 즉시 실행할 수 있다.