OpenManager Vibe V4 MCP Server

# OpenManager Vibe V4 OpenManager Vibe V4는 자연어 기반 서버 분석 및 모니터링 시스템입니다. 관리자가 쉬운 언어로 서버 상태를 질문하면 시스템이 자동으로 분석하여 결과를 제공합니다. ## 배포 링크 - **프론트엔드**: [https://openvibe3.netlify.app](https://openvibe3.netlify.app) - **백엔드 API**: [https://openmanager-vibe-v4.onrender.com](https://openmanager-vibe-v4.onrender.com) ## 프로젝트 구조 ``` . ├── frontend/ # 프론트엔드 코드 │ ├── css/ # 스타일시트 파일들 │ ├── public/ # 정적 자원 파일들 │ ├── index.html # 메인 랜딩 페이지 │ ├── server_dashboard.html # 서버 모니터링 대시보드 │ ├── server_detail.html # 서버 상세 정보 페이지 │ ├── agent.js # 에이전트 스크립트 │ ├── ai_processor.js # 자연어 처리 엔진 │ ├── data_processor.js # 데이터 처리 로직 │ ├── dummy_data_generator.js # 더미 데이터 생성기 │ ├── fixed_dummy_data.js # 고정 더미 데이터 │ ├── summary.js # 데이터 요약 및 보고서 생성 │ └── config.js # 설정 파일 │ └── mcp-lite-server/ # 백엔드 서버 ├── context/ # 컨텍스트 문서 보관 ├── server.js # 백엔드 서버 코드 └── package.json # 백엔드 의존성 정의 ``` ## MCP 연동 흐름 프론트엔드와 MCP Lite 서버는 다음과 같이 연동됩니다: 1. **프론트엔드**: 사용자가 자연어로 서버 상태에 관해 질문 입력 2. **API 호출**: 프론트엔드가 질문과 컨텍스트 정보를 MCP 서버의 `/query` 엔드포인트로 전송 3. **백엔드 처리**: MCP 서버가 질문을 컨텍스트 파일과 매칭하여 적절한 응답 생성 4. **결과 표시**: 응답이 프론트엔드로 전달되어 사용자에게 시각적으로 표시 **시연 환경에서는**: - 프론트엔드에서 대부분의 로직이 실행되며 가상 데이터 사용 - MCP 서버는 보조적인 역할로 단순한 자연어 처리 기능만 제공 - 실제 환경에서는 MCP 서버가 실제 모니터링 데이터와 고급 LLM을 연동하는 구조로 확장 가능 ## 주요 기능 - **자연어 기반 질의**: 관리자가 일상 언어로 서버 상태 및 문제점을 질문 - **자동 분석**: 시스템이 질문을 분석하여 관련 서버 목록 및 문제 원인 제공 - **직관적 대시보드**: 서버 상태 및 성능 지표를 시각적으로 표시 - **상세 보고서**: 문제 원인과 해결책이 포함된 분석 보고서 생성 - **데이터 필터링**: 시간, 서버 유형, 위치별 필터링 기능 ## 기술 스택 ### 프론트엔드 - HTML5/CSS3/JavaScript (바닐라) - 부트스트랩 UI 프레임워크 - Chart.js (데이터 시각화) - Font Awesome/Bootstrap Icons (아이콘) ### 백엔드 - Node.js - Express.js - 파일 기반 컨텍스트 관리 시스템 ## 🏗 시스템 구조: 대규모 AI 에이전트 vs 본 프로젝트 (MCP 기반) ### 🧠 실제 LLM 기반 AI 에이전트 구조 - **데이터 흐름:** 실시간 모니터링 로그 → 수집기(Kafka/Fluentd 등) → 분석 엔진 - **자연어 처리:** - LLM API (OpenAI, Claude 등) 연동 - Python/Java 기반 백엔드 - 고도화된 쿼리 해석 및 문맥 이해 기능 포함 - **분석 엔진:** - InfluxDB, Elasticsearch 등 시계열/검색엔진과 연동 - 이벤트 기반 패턴 분석, 알람 트리거링 - **UI 통합:** - 대시보드 완전 통합 - 대화형 인터페이스 + 사용 기록 학습 ### ⚙️ 본 프로젝트 (경량화 MCP 기반 데모 시스템) - **프론트엔드:** 순수 HTML/JS로 구축, Netlify에 배포 - **MCP 서버:** Node.js 기반 문서 검색 서버, Render에 배포 - **문서 기반 질의응답:** context 폴더 내 `.txt` 문서로 응답 패턴 관리 - **데이터 분석:** 브라우저에서 직접 필터링 및 보고서 생성 - **장점:** - LLM 없이도 AI처럼 작동 (저비용/고효율) - 문서만 추가하면 응답 확장 가능 - 도입과 유지비용 낮음 - **한계:** - 질문 해석 능력이 제한적 (문맥 이해 X) - 대용량 실시간 분석에는 부적합 --- ## 🤖 개발 방식 (Vibe Coding 기반) 본 프로젝트는 GPT 기반 도구에 프롬프트를 입력하고, Cursor를 통해 **AI 코딩 지시** 방식으로 개발되었습니다. ### 개발 단계별 흐름 #### 1단계: 초기 기획 및 기능 정의 (GPT 사용) - 프로젝트 구조 제안 - MCP 서버의 역할, context 기반 응답 방식 정의 - 기술 스택 및 UI 기본 방향 설정 #### 2단계: 기능 구현 및 프론트 연동 (Cursor 사용) - 프론트 JS 코드 구성 - MCP 요청 fetch 처리 - 마크다운 응답 렌더링 #### 3단계: 고도화 및 문서 패턴 대응 (Cursor + GPT 협업) - context 다중 문서 대응 구조 확장 - 자동 보고서 템플릿 설계 - 장애 유형별 대응 문서 설계 및 분기 처리 --- ## 📐 개발 가이드라인 ### ✅ UI 및 디자인 - `index.html`과 UI 스타일은 현재 상태를 유지 (90% 이상 보존 권장) - 사용자 경험 흐름을 해치지 않는 범위 내에서만 변경 허용 ### ✅ MCP 백엔드 - 서버 기능 확장 및 context 구조 추가는 자유롭게 개선 가능 - context 문서 구조는 텍스트 기반 `.txt` 또는 `.md`를 따름 - API 확장 시 RESTful 구조 권장 ## 개발 가이드라인 프로젝트 작업 시 다음 가이드라인을 준수하십시오: ### UI 및 디자인 관련 (Commit ad03d5f 기준) - **인덱스 파일 및 사용자 인터페이스**: 현재 UI/UX 디자인은 철저히 보존해야 합니다. - `index.html` 및 외부로 표현되는 사용자 인터페이스 구성요소는 현재 스타일을 90% 이상 유지해야 합니다. - 부득이한 경우가 아니면 프론트엔드 디자인을 수정하지 마십시오. ### 백엔드 개발 - **백엔드 기능 개선**: 서버 측 기능 개선 및 확장은 자유롭게 진행 가능합니다. - 데이터 처리 로직 개선 - API 엔드포인트 추가 및 최적화 - 성능 개선 및 확장성 강화 작업 ## 설치 및 실행 ### 프론트엔드 ```bash cd frontend # 정적 서버로 실행 (예: VS Code의 Live Server 또는 기타 정적 파일 서버) ``` ### 백엔드 서버 ```bash cd mcp-lite-server npm install node server.js ``` ## 배포 환경 - **프론트엔드**: Netlify (https://openvibe3.netlify.app) - **백엔드**: Render.com (https://openmanager-vibe-v4.onrender.com) ## 향후 개발 계획 1. **AI 통합**: 실제 자연어 처리 LLM 연동 2. **실시간 데이터**: 실제 서버 모니터링 시스템(Prometheus, Zabbix 등)과 연동 3. **시각화 확장**: 데이터 분석 그래프 및 차트 다양화 4. **알림 시스템**: 장애 발생 시 자동 알림 및 보고서 전송 ## 개발자 정보 본 프로젝트는 Claude, GPT, Gemini 등 다양한 AI 모델 기반의 Vibe Coding 방식을 통해 개발되었습니다. ## 라이센스 이 프로젝트는 내부 개발용으로 작성되었으며, 관련 라이센스는 별도로 명시하지 않았습니다.