단순 채팅 챗봇은 재미없다. “새 노트 만들어줘”라고 말하면 진짜로 노트가 만들어지고, “내일 미팅 추가해”라고 하면 캘린더에 일정이 잡히는 게 하고 싶었다.
Tool Calling 구현
LLM한테 사용 가능한 도구 목록을 JSON 스키마로 넘기고, LLM이 어떤 도구를 어떤 파라미터로 호출할지 결정하게 하는 방식이다. 도구가 17개 정도 되는데 — 노트 CRUD, 검색, 일정 관리, TODO, 웹 검색 등.
제일 까다로운 건 멀티스텝이다. “프로젝트 관련 노트 찾아서 요약해줘” 같은 요청은 검색 → 읽기 → 요약 순서로 도구를 여러 번 호출해야 한다. LLM한테 이전 도구 실행 결과를 컨텍스트로 다시 넘기면서 다음 도구를 고르게 하는 루프를 구현했다.
프롬프트 설계가 은근 민감한데, 도구 설명을 너무 자세히 쓰면 토큰이 터지고, 너무 짧게 쓰면 엉뚱한 도구를 고른다. 몇 번 시행착오 끝에 적당한 길이를 찾았다.
MCP (Model Context Protocol)
MCP는 외부 서버를 붙여서 AI가 쓸 수 있는 도구를 확장하는 프로토콜이다. mcp_servers.json에 서버를 등록하면 자동으로 도구 목록을 가져와서 챗봇에서 쓸 수 있게 했다. 파일시스템 접근 MCP 서버는 기본으로 내장.
솔직히 MCP까지 넣은 건 좀 과한 감이 있는데, 나중에 플러그인 시스템으로 발전시킬 수 있는 기반이라고 생각하고 넣었다.
프론트 리팩터링
이쯤 되니까 컴포넌트가 너무 뚱뚱해져서 Vue Composables로 로직을 분리했다. useGitHub, useGraph, useChatbot, useSchedule 같은 식으로. 이때 다국어 지원(한국어/영어)이랑 커스텀 단축키, 커스텀 폰트도 넣었는데 이건 세팅 UI 만드는 게 기능 구현보다 더 오래 걸렸다.