OpenManager Vibe V4

OpenManager Vibe V4는 자연어 기반 서버 분석 및 모니터링 시스템입니다. 관리자가 쉬운 언어로 서버 상태를 질문하면 시스템이 자동으로 분석하여 결과를 제공합니다.

배포 링크

• 프론트엔드: https://openvibe3.netlify.app
• 백엔드 API: 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 엔드포인트 추가 및 최적화
  • 성능 개선 및 확장성 강화 작업

설치 및 실행

프론트엔드

cd frontend
# 정적 서버로 실행 (예: VS Code의 Live Server 또는 기타 정적 파일 서버)

백엔드 서버

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 방식을 통해 개발되었습니다.

라이센스

이 프로젝트는 내부 개발용으로 작성되었으며, 관련 라이센스는 별도로 명시하지 않았습니다.

Shared threads will appear here, showcasing real-world applications and insights from the community. Check back soon for updates!