[mcp-directory] mcp 서버 관리 화면 오픈소스 버전 소개 및 개선해보기

 

아래와 같이 요즘 mcp server 가 유행이 되면서 관리를 하는 페이지가 인기입니다.

여기다가 회사에서 작업하는 것을 올리기는 부담스럽고, https 로 해야하니 따로 구축하고 싶다는 생각이 들었습니다.

그리고 사내에서 쓴다는 생각으로 사내에서 접근 가능한 것만 따로 관리하고 싶었습니다.

https://smithery.ai/

https://www.claudemcp.com/ko/docs/dev-sse-mcp

 

 

그렇게 생각만하다가 우연히 찾은 것이 아래 깃헙 소스입니다.

mcp directory 라는 깃헙에서 이러한 것을 찾게 되었습니다

물론 이 디렉토리를 만드는 것 자체는 기능상 구현하기에는 크게 어려운 기능이 없어서 금방 할 수 있겠지만, 열심히 만들어 주신 것이 있으니 활용해보고 싶었습니다.

https://github.com/chatmcp/mcp-directory

 

그래서 코드를 받아서 실행했는데, 아쉽게도 서버를 등록하는 기능이 없었습니다.

그러다가 구조를 확인해보니 db를 통해 서버 등록을 하는 거였고, 그 부분에 대해서 server를 등록하거나 한번에 삭제하거나 다운로드 하는 기능을 만들었습니다.

아직 스타가 900대라 많지 않고, 지금이라 많이 복잡하지 않아서 넣는 것에 있어서 작업이 크게 어렵지 않았습니다.

MCP Directory란?

MCP Directory는 서버 구성 정보를 관리하고 조직화하는 웹 애플리케이션입니다. 이 프로젝트는 여러 서버의 구성 정보를 등록하고, 조회하며, 효율적으로 관리할 수 있는 플랫폼을 제공합니다. Next.js와 Supabase를 기반으로 구축되어 있으며, 사용자 친화적인 인터페이스를 통해 서버 정보를 쉽게 관리할 수 있습니다.

 

주요 기능:

• 서버 정보 등록 및 관리

• 서버 구성 정보 검색 및 조회

• 카테고리별 서버 분류

• JSON 형식의 서버 구성 정보 지원

내가 기여한 부분

1. 서버 관리 기능 개선

MCP Directory에 다음과 같은 서버 관리 기능을 추가하여 시스템을 개선했습니다:

1.1 헤더에 서버 관리 버튼 추가

• 상단 내비게이션 바에 "서버 관리" 버튼을 추가하여 사용자가 쉽게 서버 관리 모달에 접근할 수 있도록 했습니다.

• 이 버튼을 통해 서버 일괄 관리 기능에 바로 접근할 수 있습니다.

1.2 서버 관리 모달 구현

• 서버 목록 조회: 등록된 모든 서버를 테이블 형식으로 조회할 수 있습니다.

• 체크박스 선택 기능: 개별 서버 또는 전체 서버를 선택할 수 있습니다.

• 서버 삭제 기능: 선택한 서버를 안전하게 삭제할 수 있습니다(비밀번호 보호).

• 서버 정보 다운로드: 모든 서버 정보를 JSON 형식으로 다운로드할 수 있습니다.

• 서버 정보 업로드: JSON 파일을 통해 여러 서버를 한 번에 등록할 수 있습니다.

1.3 서버 관리 API 엔드포인트 구현

• /api/servers/list: 등록된 모든's 서버 정보를 조회하는 API

• /api/servers/export: 서버 정보를 JSON 형식으로 내보내는 API

• /api/servers/import: JSON 파일에서 서버 정보를 가져오는 API

• /api/servers/delete: 선택한 서버를 삭제하는 API (비밀번호 인증 필요)

2. 보안 기능 강화

• 서버 삭제 작업에 비밀번호 인증 기능을 추가하여 권한이 없는 사용자의 데이터 삭제를 방지했습니다.

• 환경 변수를 통한 비밀번호 관리로 보안을 강화했습니다.

3. 오류 처리 및 사용자 경험 개선

• 하이드레이션 오류 수정: 날짜 표시 부분을 수정하여 서버와 클라이언트 간 렌더링 불일치 문제를 해결했습니다.

• 서버 구성 테이블 없는 경우의 오류 처리: SQL 스키마 누락 시에도 애플리케이션이 정상적으로 작동하도록 예외 처리를 추가했습니다.

• 사용자 피드백 개선: toast 알림을 통해 작업 성공/실패 상태를 즉각적으로 알려주는 기능을 구현했습니다.

4. 코드 품질 및 유지보수성 향상

• 불필요한 기능 제거: 사용하지 않는 DB 등록 관련 코드를 제거하여 코드 베이스를 간소화했습니다.

• 코드 모듈화: 각 기능을 별도의 컴포넌트와 API 엔드포인트로 분리하여 유지보수성을 향상시켰습니다.

• 에러 핸들링: 각 API 엔드포인트에 적절한 에러 핸들링과 로깅을 추가했습니다.

기술 스택

• 프론트엔드: Next.js, React, Tailwind CSS, Headless UI

• 백엔드: Next.js API 라우트

• 데이터베이스: Supabase (PostgreSQL)

• 상태 관리: React Hooks(useState, useEffect, useCallback)

• UI 컴포넌트: React Icons, React Hot Toast

결론

이번 프로젝트를 통해 MCP Directory의 서버 관리 기능을 크게 개선했습니다.

사용자가 여러 서버를 효율적으로 관리할 수 있는 인터페이스를 제공하고, JSON 형식의 데이터 교환을 지원함으로써 시스템의 유연성을 높였습니다.

또한 보안 기능을 강화하고 사용자 경험을 개선하여 더 안정적이고 사용하기 쉬운 플랫폼으로 발전시켰습니다.

이 프로젝트는 Next.js와 Supabase를 활용한 웹 애플리케이션 개발 경험을 쌓는 좋은 기회였으며, 실제 사용자의 요구사항을 반영한 기능 개발과 문제 해결 과정을 통해 많은 것을 배울 수 있었습니다.

 

MCP 서버를 자체 실행해주는 것은 아지만 이걸 가지고 사내에 한번 도입하여, 서빙하고 있는 MCP  Server를 관리하는 체계를 만들면 좋을 것 같습니다.

---

변경된 화면

전체 화면

서버 등록 부분과 관리 부분