당신이 요청하지 않았지만 사용자는 원할 AI 어시스턴트
요약
MCP(Model Context Protocol) 서버를 활용하여 기존 인프라를 재사용하면서 브라우저 UI에 AI 어시스턴트를 통합하는 아키텍처를 제안합니다. 별도의 RAG 파이프라인 구축 없이 기존 MCP 서버를 AI 백엔드로 활용하는 효율적인 개발 방식을 다룹니다.
핵심 포인트
- MCP 서버를 AI 백엔드로 활용하여 데이터 액세스 및 쿼리 생성 처리
- 새로운 API 개발 없이 기존 프로토콜을 활용한 클라이언트 중심의 확장
- 기능 플래깅(Feature Flagging)을 통한 AI 도입 리스크 및 비용 관리
- 브라우저 UI와 MCP 서버를 연결하는 경량화된 아키텍처 설계
당신이 요청하지 않았지만 사용자는 원할 AI 어시스턴트
MCP 서버를 출시할 때의 문제는 이렇습니다. 서버를 구축하고, 문서화하고, 다음 단계로 넘어갑니다. 그러다 누군가 "내 데이터와 채팅할 수 있나요?"라고 묻는 순간, 갑자기 6개월짜리 프로젝트를 마주하게 됩니다.
Plane에는 이미 plane-mcp-server가 있습니다. 이 서버는 Model Context Protocol (MCP)을 통해 이슈(issues), 사이클(cycles), 프로젝트(projects) 등 모든 것을 노출합니다. Claude Desktop은 이를 쿼리할 수 있고, Cursor도 사용할 수 있습니다. 하지만 당신의 사용자들은요? 그들은 브라우저에 있습니다. 그들은 MCP에 관심이 없습니다. 그들은 텍스트 박스를 원합니다.
그래서 다음과 같은 제안을 합니다: 자체 MCP 서버를 통해 Plane과 통신하는, 기능 플래그(feature-flagged)가 적용되고 기본적으로 비활성화된 AI 어시스턴트.
재작성하는 것이 아닙니다. 새로운 API를 만드는 것도 아닙니다. 동일한 프로토콜을 사용하되, 클라이언트만 다르게 하는 것입니다.
아키텍처 (The Architecture)
Browser UI → AI Assistant Component → Next.js API Route
↓
plane-mcp-server (localhost or container)
...
MCP 서버는 이미 인증(authentication), 쿼리 생성(query construction), 데이터 액세스(data access)를 처리하고 있습니다. AI 어시스턴트는 단지 동일한 인터페이스를 사용하는 새로운 소비자(consumer)일 뿐입니다.
// app/api/ai/chat/route.ts
import { Client } from "@modelcontextprotocol/sdk/client/index.js";
import { StdioClientTransport } from "@modelcontextprotocol/sdk/client/stdio.js";
...
그게 전부입니다. MCP 서버가 당신의 AI 백엔드(backend)가 됩니다. 별도의 벡터 스토어(vector store)도, 커스텀 RAG 파이프라인(RAG pipeline)도 필요 없습니다. 그저 당신이 이미 보유하고 있는 프로토콜만 있으면 됩니다.
기능 플래깅 (Feature Flagging)
이 기능은 기본적으로 꺼져 있습니다. 왜일까요? AI는 비용이 발생하며, 모든 사람이 그것을 원하는 것은 아니기 때문입니다.
// lib/features.ts
export const FEATURES = {
AI_ASSISTANT: process.env.NEXT_PUBLIC_ENABLE_AI_ASSISTANT === "true",
...
// components/Sidebar.tsx
import { FEATURES } from "@/lib/features";
...
환경 변수 하나. 토글 하나. 리스크는 제로입니다.
UI
세 가지 컴포넌트. 그게 전부입니다.
// components/AIAssistant.tsx
"use client";
...
MCP 서버가 힘든 작업(heavy lifting)을 처리합니다. 당신의 UI는 단지 파이프(pipe) 역할을 할 뿐입니다.
지금 바로 할 수 있는 것들
plane-mcp-server가 list_issues, get_cycle, search_projects와 같은 도구(tools)를 노출함에 따라, AI는 다음과 같은 질문에 답할 수 있습니다:
- "현재 스프린트(sprint)에서 우선순위가 높은 모든 버그를 보여줘"
- "PLANE-1234 이슈의 상태는 어때?"
- "기한이 지난 작업이 있는 프로젝트는 무엇인가요?"
학습(training)도, 미세 조정(fine-tuning)도 필요 없습니다. MCP 서버가 자연어(natural language)를 기존 데이터에 대한 구조화된 쿼리(structured queries)로 변환합니다.
당신이 하지 않아도 되는 것들
- 벡터 데이터베이스(vector database)를 구축하지 않습니다. MCP 서버는 Postgres에 직접 쿼리합니다.
- 모델을 학습시키지 않습니다. 당신은 MCP 서버를 통해 GPT-4o 또는 Claude를 사용하고 있습니다.
- 인증(auth)을 다시 작성하지 않습니다. MCP 서버가 API 키와 권한을 처리합니다.
- 새로운 인프라를 배포하지 않습니다. 이는 Plane과 함께 컨테이너(container) 내에서 실행됩니다.
주의 사항
이것은 즉시 프로덕션(production)에 적용 가능한 마법이 아닙니다. 다음과 같은 문제가 발생할 수 있습니다:
지연 시간(Latency). stdio를 통한 MCP는 요청당 하나의 서브프로세스(subprocess)를 의미합니다. 프로덕션 환경에서는 MCP 서버가 지속적인 HTTP 서비스로 실행되기를 원할 것입니다.
비용(Cost). 모든 쿼리는 LLM에 도달합니다. 캐싱(caching)이 없다면, 바쁜 팀은 토큰(tokens)을 빠르게 소진할 수 있습니다. 간단한 캐시를 추가하세요:
const cache = new Map<string, string>();
export async function POST(req: Request) {
...
보안(Security). MCP 서버는 모든 것에 접근할 수 있습니다. 당신의 AI 어시스턴트가 오직 조회(query)만 수행하고, 절대 변경(mutate)하지 않도록 하세요. 또는 파괴적인 작업(destructive operations)에 대해서는 확인 대화 상자를 추가하세요.
핵심(The Hook)
당신은 이미 어려운 부분을 만들어 두었습니다. plane-mcp-server는 당신의 리포지토리(repo)에 있지만, 당신의 UI에서는 사용되지 않고 있는 완전히 기능적인 AI 백엔드(backend)입니다.
AI 어시스턴트 제안은 새로운 것을 만드는 것에 관한 것이 아닙니다. 당신이 이미 가지고 있는 것을 사용자가 실제로 작업하는 곳인 브라우저(browser)에 연결하는 것에 관한 것입니다.
기능 플래그(Feature flag)를 적용하세요. 비활성화된 상태로 출시하세요. 파워 유저들이 선택적으로 참여(opt in)하게 하세요.
당신의 MCP 서버는 이미 당신의 데이터와 대화하고 있습니다. 이제 당신의 UI가 귀를 기울일 차례입니다.
AI 에이전트(agents)를 디버깅하는 것이 마치 매트릭스(The Matrix)를 읽는 것처럼 느껴져서는 안 됩니다.
우리 커뮤니티에서 신뢰할 수 있는 자율 워크플로우(autonomous workflows)를 구축하고 있는 다른 엔지니어들과 함께하세요: TracePilot Discord
AI 자동 생성 콘텐츠
본 콘텐츠는 Dev.to AI tag의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기