mcp-ui: MCP 프로토콜 기반의 깔끔한 AI 채팅 인터페이스

12.8K 00

일반 소개

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를 클릭하고 도구 이름과 매개변수를 정의한 다음 서비스를 다시 시작하면 적용됩니다.