https://github.com/Streen9/react-mcp

React MCP(모델 컨텍스트 프로토콜)

Claude AI가 Model Context Protocol을 통해 React 애플리케이션과 상호작용할 수 있도록 하는 강력한 서버 구현입니다.

샘플 사용

• Claude의 마크다운 편집기/뷰어
• 클로드의 API 테스터

개요

React MCP는 Claude AI와 React 생태계 사이에 브리지를 제공하여 Claude가 다음을 수행할 수 있도록 합니다.

• 새로운 React 애플리케이션 만들기
• React 개발 서버 실행
• 파일 및 디렉토리 관리
• npm 패키지 설치
• 터미널 명령 실행
• 장기 실행 프로세스를 추적하고 관리합니다.

이 서버는 모델 컨텍스트 프로토콜을 구현하여 클로드가 개발 환경에서 실제 작업을 수행할 수 있는 기능을 제공합니다.

특징

• React 프로젝트 관리
  • 선택적 템플릿을 사용하여 새로운 React 애플리케이션 만들기
  • 개발 서버 실행
  • 종속성 관리
• 파일 작업
  • 파일 읽기 및 쓰기
  • React 구성 요소 및 구성 편집
• 프로세스 관리
  • 장기 실행 프로세스 시작 및 모니터링
  • 실시간으로 프로세스 출력 추적
  • 필요할 때 프로세스 종료
• 명령 실행
  • 임의의 터미널 명령 실행
  • npm 패키지 설치
  • 개발 작업 실행
• 종합 로깅
  • 자세한 JSON 및 텍스트 로그
  • 타임스탬프를 사용한 프로세스 추적
  • 실행 내역

설치

1. 이 저장소를 복제하세요
2. 종속성 설치:

지엑스피1

용법

claude_desktop_config 에 다음을 추가하세요:

서버는 stdio 전송에서 실행되므로 Desktop Claude APP와 함께 모델 컨텍스트 프로토콜 도구로 사용할 수 있습니다.

사용 가능한 도구

create-react-app

새로운 React 애플리케이션을 만듭니다.

매개변수:

• name (필수): React 앱의 이름
• template (선택 사항): 사용할 템플릿(예: typescript, cra-template-pwa)
• directory (선택 사항): 앱을 생성할 기본 디렉토리(기본값은 홈 디렉토리)

run-react-app

개발 모드에서 React 애플리케이션을 실행합니다.

매개변수:

• projectPath (필수): React 프로젝트 폴더 경로

run-command

터미널 명령을 실행합니다.

매개변수:

• command (필수): 실행할 명령
• directory (선택 사항): 명령을 실행할 디렉토리(기본값은 현재 디렉토리)

get-process-output

실행 중이거나 완료된 프로세스의 출력을 가져옵니다.

매개변수:

• processId (필수): 출력을 가져올 프로세스의 ID

stop-process

실행 중인 프로세스를 중지합니다.

매개변수:

• processId (필수): 중지할 프로세스의 ID

list-processes

실행 중인 모든 프로세스를 나열합니다.

edit-file

파일을 생성하거나 편집합니다.

매개변수:

• filePath (필수): 편집할 파일의 경로
• content (필수): 파일에 쓸 내용

read-file

파일의 내용을 읽습니다.

매개변수:

• filePath (필수): 읽을 파일의 경로

install-package

프로젝트에 npm 패키지를 설치합니다.

매개변수:

• packageName (필수): 설치할 패키지의 이름(버전 포함 가능)
• directory (선택 사항): 프로젝트의 디렉토리(기본값은 현재 디렉토리)
• dev (선택 사항): 개발 종속성으로 설치할지 여부

check-installation-status

패키지 설치 프로세스의 상태를 확인합니다.

매개변수:

• processId (필수): 확인할 설치 프로세스의 ID

벌채 반출

서버는 logs 디렉토리에 자세한 로그를 보관합니다.

• react-mcp-logs.json : 구조화된 JSON 로그
• react-mcp-logs.txt : 사람이 읽을 수 있는 텍스트 로그

건축학

서버는 다음과 같은 주요 구성 요소를 사용합니다.

• 모델 컨텍스트 프로토콜 SDK : Claude AI와의 통신을 위해
• StdioServerTransport : 표준 입출력을 통한 I/O용
• Zod : 스키마 검증 및 유형 안전성을 위해
• 자식 프로세스 : 외부 프로세스 생성 및 관리용

특허

MIT

작가

@스트린9

기여하다

기여를 환영합니다! 풀 리퀘스트를 제출해 주세요.