일반 소개
mcp-ui는 개발자 machaojin1917939763이 만든 오픈 소스 프로젝트로, MCP(모델 컨텍스트 프로토콜) 프로토콜을 기반으로 구축되었으며 웹과 데스크톱 환경을 모두 지원하는 스마트 채팅 애플리케이션입니다. 인류학 mcp-ui는 AI 모델이 외부 도구와 서비스를 호출할 수 있도록 하는 개방형 프로토콜로, OpenAI와 Anthropic의 API를 통합하고 깔끔하고 현대적인 채팅 인터페이스를 제공합니다. 사용자는 이를 사용하여 AI와 대화하고 브라우저 및 파일 조작과 같은 기능을 호출할 수 있습니다. Vue.js와 Electron으로 구축된 이 프로젝트는 크로스 플랫폼 배포를 지원하며 개발자나 AI 애호가에게 적합합니다.

기능 목록
- 마크다운 및 코드 강조 표시를 지원하는 깔끔하고 현대적인 채팅 인터페이스를 제공합니다.
- 지원 MCP 프로토콜을 통해 AI는 브라우저 자동화 및 파일 조작과 같은 외부 도구를 호출할 수 있습니다.
- 사용자가 선택할 수 있는 모델을 통해 OpenAI 및 Anthropic의 API와 호환됩니다.
- API 키, 기본 URL 및 모델 옵션을 포함한 사용자 지정 구성을 허용합니다.
- 사용자 지정 도구를 추가하여 기능을 확장할 수 있도록 지원합니다.
- 데스크톱 버전의 앱을 사용할 수 있으며 Windows, Mac, Linux와 호환됩니다.
- 로컬 운영을 지원하기 위해 MCP 백엔드 서비스를 통합합니다.
도움말 사용
mcp-ui는 사용자가 소스 코드를 통해 배포해야 하는 오픈 소스 채팅 도구입니다. 다음은 빠르게 시작하는 데 도움이 되는 자세한 설치 및 사용 가이드입니다.
설치 프로세스
- 환경 준비하기
시작하기 전에 컴퓨터가 다음 요구 사항을 충족하는지 확인하세요:Node.js
(버전 16.0.0 이상).npm
(버전 8.0.0 이상).- Git(코드 다운로드용).
- 최신 브라우저(예: 크롬, 파이어폭스, 사파리, 엣지 최신 버전).
- 데스크톱 지원 시스템: Windows 10+, macOS 10.15+ 또는 Ubuntu 20.04+.
환경이 실행할 준비가 되었는지 확인합니다:
node -v npm -v git --version
- 소스 코드 다운로드
터미널에 다음 명령을 입력하여 로컬에 코드를 복제합니다:git clone https://github.com/machaojin1917939763/mcp-ui.git
그런 다음 프로젝트 디렉토리로 이동합니다:
cd mcp-ui
- 종속성 설치
프로젝트 디렉토리에서 실행합니다:npm install
이 과정은 몇 분 정도 소요될 수 있으며, Vue.js, Electron 등 필요한 구성 요소를 설치합니다.
- 환경 변수 구성
샘플 구성 파일을 복사하여 편집합니다:cp .env.example .env
텍스트 편집기로 열기
.env
를 클릭하고 다음을 입력합니다:VITE_API_KEY=your_api_key_here # 你的 OpenAI 或 Anthropic API 密钥 VITE_MODEL_PROVIDER=openai # 或 anthropic MCP_SERVER_PORT=3001 # MCP 服务端口,默认 3001
파일을 저장하고 닫습니다.
- 애플리케이션 실행
- 웹 버전::
터미널에서 프런트엔드를 실행합니다:npm run dev
다른 터미널에서 MCP 백엔드를 실행합니다:
npm run mcp:server
브라우저에서 http://localhost:5173 을 엽니다(포트는 다를 수 있습니다. 터미널 프롬프트 참조).
- 데스크톱 버전::
다음 명령을 실행하여 전자 개발 모드를 시작합니다:npm run electron:dev
데스크톱 애플리케이션 창이 자동으로 팝업됩니다.
- 웹 버전::
- 프로덕션 버전 빌드(선택 사항)
- 웹 버전:
npm run build
생성된 파일은
dist
폴더를 생성하여 정적 서버에 배포할 수 있습니다. - 데스크톱 버전:
npm run electron:build # 构建所有平台 npm run electron:buildwin # Windows npm run electron:buildmac # macOS npm run electron:buildlinux # Linux
빌드 결과는
dist_electron
폴더.
- 웹 버전:
주요 기능
구성 모델
- 앱을 열고 오른쪽 상단 모서리에 있는 설정 아이콘(⚙️)을 클릭합니다.
- 설정 패널에서 선택합니다:
- 모델 공급자(OpenAI 또는 Anthropic).
- API 키를 입력합니다(OpenAI 또는 Anthropic 공식 웹사이트에서 받습니다).
- API 기본 URL을 설정합니다(선택 사항, 기본값은 괜찮습니다).
- 특정 모델(예: GPT-4 또는 클로드)을 선택합니다.
- 저장을 클릭하여 구성을 적용합니다.
채팅 기능 사용하기
- 하단의 입력란에 질문이나 명령을 입력합니다.
- Enter 키를 누르거나 보내기 버튼을 클릭하면 AI가 응답합니다.
- 마크다운 서식이 지원되며 코드가 강조 표시됩니다.
- 예: "오늘 베이징 날씨 확인 도와줘"라고 입력하면 AI가 날씨 도구를 호출하여 결과를 반환합니다.
MCP 도구 호출
- mcp-ui에는 다음 도구가 내장되어 있습니다:
- 브라우저 자동화: "Google 검색 xAI 열기"를 입력하면 AI가 브라우저 실행을 제어합니다.
- 날씨: "상하이 날씨는 어때요"를 입력하면 실시간 데이터를 반환합니다.
- 뉴스 검색: '최근 기술 뉴스'를 입력하면 최신 콘텐츠를 확인할 수 있습니다.
- 파일 작업(데스크톱 버전): "데스크톱/test.txt 읽기"를 입력하면 AI가 파일 내용을 반환합니다.
- 추가 작업이 필요하지 않으며 채팅창에서 직접 요청하기만 하면 됩니다.
주요 기능 작동
데스크톱 경험
- 데스크톱 버전은 일렉트론을 통해 구현되며 설치 후 브라우저 없이 실행할 수 있습니다.
- 데스크톱 버전에서는 로컬 파일 시스템에 직접 액세스하여 파일을 더 쉽게 조작할 수 있습니다.
- 조작 방법은 웹 버전과 동일하며, 실행 후 인터페이스가 자동으로 로드됩니다.
사용자 지정 도구
- 컴파일러
mcp_server.js
를 클릭하고 새로운 도구를 추가합니다. - 예: 계산 도구 추가하기
const tools = [ { name: "calculator", description: "简单计算器", parameters: { type: "object", properties: { expression: { type: "string", description: "计算表达式,如 2+3" } }, required: ["expression"] } } ];
- MCP 서비스를 다시 시작(
npm run mcp:server
), 채팅에서 사용할 수 있습니다.
주의
- API 키는 유출을 방지하기 위해 적절하게 보관해야 합니다.
- 시작에 실패하면 포트(기본적으로 5173 및 3001)가 사용 중이 아닌지 확인하세요.
- 데스크톱 빌드는 충분한 시스템 리소스를 확보하기 위해 더 많은 디스크 공간이 필요할 수 있습니다.
이러한 단계를 통해 mcp-ui를 쉽게 배포하고 사용하여 AI와 상호 작용하고 외부 도구를 호출할 수 있습니다.
애플리케이션 시나리오
- 개인 비서
mcp-ui를 사용하여 날씨를 확인하고, 뉴스를 검색하고, 파일을 관리하여 일상 업무의 효율성을 향상하세요. - 개발자 테스트
개발자는 이를 사용하여 MCP 프로토콜과 AI 모델을 테스트하고 도구 호출의 효과를 빠르게 검증할 수 있습니다. - 교육 학습
학생이나 연구자는 직관적이고 이해하기 쉬운 인터페이스를 통해 mcp-ui를 통해 AI가 외부 서비스와 상호 작용하는 방식을 학습할 수 있습니다.
QA
- MCP-UI는 어떤 모델을 지원하나요?
OpenAI 및 Anthropic의 모든 API 호환 모델이 지원되며, 사용자는 설정에서 특정 모델을 선택할 수 있습니다. - 데스크톱 버전과 웹 버전의 차이점은 무엇인가요?
데스크톱 버전은 브라우저가 필요하지 않고 로컬 파일 작업을 지원하며, 웹 버전은 더 가볍고 온라인 사용에 적합합니다. - 새 도구를 추가하려면 어떻게 하나요?
수정mcp_server.js
를 클릭하고 도구 이름과 매개변수를 정의한 다음 서비스를 다시 시작하면 적용됩니다.
© 저작권 정책
文章版权归 AI 공유 서클 所有,未经允许请勿转载。
관련 문서
댓글 없음...