Integrated MCP Server

local-only server

The server can only run on the client’s local machine because it depends on local resources.

Integrations

  • Used as the backend server technology for the MCP server, providing HTTP and SSE (Server-Sent Events) capabilities

  • Detected as a global tool to provide documentation through the MCP server

  • Detected as a global tool and used to discover package scripts to provide documentation through the MCP server

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

개발 설정

  1. 종속성 설치:
pnpm install
  1. 개발 시작:
# Start webpack in watch mode pnpm run dev # Or build for production pnpm run build
  1. 확장 프로그램을 실행합니다.
  • VSCode에서 F5를 눌러 디버깅을 시작하세요.
  • 확장 프로그램은 MCP 서버와 WebView 패널을 모두 시작합니다.

용법

  1. 명령 팔레트를 엽니다(Cmd/Ctrl + Shift + P)
  2. "MCP 도구"를 입력하고 명령을 선택하세요.
  3. WebView 패널이 열리고 사용 가능한 도구가 표시됩니다.
  4. 설명서를 보려면 도구를 선택하세요

기술적 세부 사항

도구 발견

  • 패키지 스크립트
    • npm/yarn/pnpm 스크립트를 자동으로 감지합니다.
    • 스크립트 소스와 작업 디렉토리를 표시합니다.
    • 모노레포 작업공간을 지원합니다
    • 스크립트 존재 여부를 확인합니다.
  • 바이너리 도구
    • node_modules/.bin에서 도구를 찾습니다.
    • 글로벌 도구(git, npm, yarn, pnpm)를 감지합니다.
    • 도구 존재 여부와 권한을 검증합니다.
    • 경로 해결을 처리합니다

문서 검색

  • 도움말 명령(-h, --help)을 실행합니다.
  • 버전 정보를 가져옵니다
  • 명령 실행 오류를 처리합니다
  • 도구 이름과 인수를 검증합니다.
  • 적절한 시간 초과를 구현합니다

SSE 커뮤니케이션

  • 실시간 도구 검색 업데이트
  • 안전한 출처 검증
  • 연결 관리 및 정리
  • 오류 처리 및 보고
  • 자동 재연결 지원
  • 이벤트 기반 스트리밍
  • 양방향 메시지 전달

보안 기능

  • 도구 이름 검증
  • 명령 주입 방지
  • SSE 연결에 대한 원점 검증
  • 적절한 오류 처리 및 보고
  • 리소스 정리
  • 연결 상태 관리

테스트

확장에는 다음과 같은 포괄적인 테스트가 포함됩니다.

  • 서버 기능에 대한 통합 테스트
  • VS 코드 확장 테스트
  • 도구 발견 테스트
  • 보안 검증 테스트
  • SSE 커뮤니케이션 테스트

특허

아이에스씨

-
security - not tested
F
license - not found
-
quality - not tested

Express와 SSE를 사용하여 안전하고 동적인 콘텐츠 스트리밍을 구현하고, VSCode 확장 프로그램 내의 명령줄 도구에 대한 실시간 도구 검색 및 문서 검색을 용이하게 합니다.

  1. Core Features
    1. Architecture
      1. 1. VS Code Extension (Backend)
      2. 2. MCP Server (Middle Layer)
      3. 3. WebView Panel (Frontend)
    2. Project Structure
      1. Development Setup
        1. Usage
          1. Technical Details
            1. Tool Discovery
            2. Documentation Retrieval
            3. SSE Communication
            4. Security Features
          2. Testing
            1. License
              ID: 2r8d1xr71e