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 패널
상태 표시줄 통합
명령 팔레트 지원
작업 공간 경로 감지
Related MCP server: DeepSeek MCP Server
건축학
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 tools3. 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개발 설정
종속성 설치:
pnpm install개발 시작:
# 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 커뮤니케이션 테스트
특허
아이에스씨