MCP 도구 설명서
명령줄 도구 설명서를 검색하고 표시하기 위한 통합 MCP 서버와 UI 패널을 제공하는 VSCode/Cursor 확장 프로그램입니다. 이 확장 프로그램은 작업 공간에서 도구를 자동으로 감지하여 WebView 패널을 통해 해당 설명서를 제공합니다.
핵심 기능
- 🔄 내장 MCP 서버
- Express + SSE 서버(포트 54321-54421)
- 안전한 출처 검증
- 자동 포트 선택
- 연결 관리 및 정리
- 실시간 이벤트 스트리밍
- 🔍 도구 발견
- 패키지 스크립트(npm, yarn, pnpm)
- 로컬 바이너리(node_modules/.bin)
- 글로벌 도구(git, npm, yarn, pnpm)
- 모노레포 작업 공간 지원
- 📚 문서 검색
- 도움말 명령 실행(-h, --help)
- 버전 정보 가져오기
- 보안 명령 검증
- 오류 처리
- 💻 VS 코드 통합
- React 기반 WebView 패널
- 상태 표시줄 통합
- 명령 팔레트 지원
- 작업 공간 경로 감지
건축학
1. VS Code 확장 프로그램(백엔드)
지엑스피1
2. MCP 서버(중간 계층)
MCP Server (src/server/*)
├── SSE Event Stream
│ ├── Real-time tool discovery updates
│ ├── Documentation streaming
│ └── Connection state management
│
└── Tool Discovery System
├── path-scanner.ts
│ └── Finds tools in workspace (bin/, node_modules/.bin)
└── package-scanner.ts
└── Scans package.json for available tools
3. WebView 패널(프런트엔드)
React WebView (src/panel/*)
├── UI Components
│ └── Shows available tools and their docs
│
└── SSE Client
├── Requests available tools
└── Streams tool documentation
프로젝트 구조
my-tools-mcp/
├── src/ # Source code
│ ├── extension.ts # Extension entry point
│ ├── env.ts # Environment configuration
│ ├── server/ # Built-in MCP server
│ │ ├── index.ts # Server setup and SSE handling
│ │ └── controllers/ # Tool discovery and execution
│ │ ├── docs/ # Documentation controllers
│ │ ├── path-scanner.ts # Tool discovery
│ │ └── package-scanner.ts # Package.json scanning
│ ├── panel/ # WebView UI (React)
│ │ ├── index.tsx # WebView entry point
│ │ ├── App.tsx # Main React component
│ │ └── components/ # UI components
│ ├── types/ # Shared TypeScript types
│ └── lib/ # Shared utilities
├── dist/ # Compiled output
└── src/__tests__/ # Test files
개발 설정
- 종속성 설치:
- 개발 시작:
# Start webpack in watch mode
pnpm run dev
# Or build for production
pnpm run build
- 확장 프로그램을 실행합니다.
- VSCode에서 F5를 눌러 디버깅을 시작하세요.
- 확장 프로그램은 MCP 서버와 WebView 패널을 모두 시작합니다.
용법
- 명령 팔레트를 엽니다(Cmd/Ctrl + Shift + P)
- "MCP 도구"를 입력하고 명령을 선택하세요.
- WebView 패널이 열리고 사용 가능한 도구가 표시됩니다.
- 설명서를 보려면 도구를 선택하세요
기술적 세부 사항
도구 발견
- 패키지 스크립트
- npm/yarn/pnpm 스크립트를 자동으로 감지합니다.
- 스크립트 소스와 작업 디렉토리를 표시합니다.
- 모노레포 작업공간을 지원합니다
- 스크립트 존재 여부를 확인합니다.
- 바이너리 도구
- node_modules/.bin에서 도구를 찾습니다.
- 글로벌 도구(git, npm, yarn, pnpm)를 감지합니다.
- 도구 존재 여부와 권한을 검증합니다.
- 경로 해결을 처리합니다
문서 검색
- 도움말 명령(-h, --help)을 실행합니다.
- 버전 정보를 가져옵니다
- 명령 실행 오류를 처리합니다
- 도구 이름과 인수를 검증합니다.
- 적절한 시간 초과를 구현합니다
SSE 커뮤니케이션
- 실시간 도구 검색 업데이트
- 안전한 출처 검증
- 연결 관리 및 정리
- 오류 처리 및 보고
- 자동 재연결 지원
- 이벤트 기반 스트리밍
- 양방향 메시지 전달
보안 기능
- 도구 이름 검증
- 명령 주입 방지
- SSE 연결에 대한 원점 검증
- 적절한 오류 처리 및 보고
- 리소스 정리
- 연결 상태 관리
테스트
확장에는 다음과 같은 포괄적인 테스트가 포함됩니다.
- 서버 기능에 대한 통합 테스트
- VS 코드 확장 테스트
- 도구 발견 테스트
- 보안 검증 테스트
- SSE 커뮤니케이션 테스트
특허
아이에스씨