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

최신 AI 리소스4 개월 전에 게시 됨 AI 공유 서클
2.3K 00

일반 소개

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

mcp-ui:基于MCP协议的简洁AI聊天界面

 

기능 목록

  • 마크다운 및 코드 강조 표시를 지원하는 깔끔하고 현대적인 채팅 인터페이스를 제공합니다.
  • 지원 MCP 프로토콜을 통해 AI는 브라우저 자동화 및 파일 조작과 같은 외부 도구를 호출할 수 있습니다.
  • 사용자가 선택할 수 있는 모델을 통해 OpenAI 및 Anthropic의 API와 호환됩니다.
  • API 키, 기본 URL 및 모델 옵션을 포함한 사용자 지정 구성을 허용합니다.
  • 사용자 지정 도구를 추가하여 기능을 확장할 수 있도록 지원합니다.
  • 데스크톱 버전의 앱을 사용할 수 있으며 Windows, Mac, Linux와 호환됩니다.
  • 로컬 운영을 지원하기 위해 MCP 백엔드 서비스를 통합합니다.

 

도움말 사용

mcp-ui는 사용자가 소스 코드를 통해 배포해야 하는 오픈 소스 채팅 도구입니다. 다음은 빠르게 시작하는 데 도움이 되는 자세한 설치 및 사용 가이드입니다.

설치 프로세스

  1. 환경 준비하기
    시작하기 전에 컴퓨터가 다음 요구 사항을 충족하는지 확인하세요:

    • Node.js(버전 16.0.0 이상).
    • npm(버전 8.0.0 이상).
    • Git(코드 다운로드용).
    • 최신 브라우저(예: 크롬, 파이어폭스, 사파리, 엣지 최신 버전).
    • 데스크톱 지원 시스템: Windows 10+, macOS 10.15+ 또는 Ubuntu 20.04+.
      환경이 실행할 준비가 되었는지 확인합니다:
    node -v
    npm -v
    git --version
  1. 소스 코드 다운로드
    터미널에 다음 명령을 입력하여 로컬에 코드를 복제합니다:

    git clone https://github.com/machaojin1917939763/mcp-ui.git
    

    그런 다음 프로젝트 디렉토리로 이동합니다:

    cd mcp-ui
    
  2. 종속성 설치
    프로젝트 디렉토리에서 실행합니다:

    npm install
    

    이 과정은 몇 분 정도 소요될 수 있으며, Vue.js, Electron 등 필요한 구성 요소를 설치합니다.

  3. 환경 변수 구성
    샘플 구성 파일을 복사하여 편집합니다:

    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
    

    파일을 저장하고 닫습니다.

  4. 애플리케이션 실행
    • 웹 버전::
      터미널에서 프런트엔드를 실행합니다:

      npm run dev
      

      다른 터미널에서 MCP 백엔드를 실행합니다:

      npm run mcp:server
      

      브라우저에서 http://localhost:5173 을 엽니다(포트는 다를 수 있습니다. 터미널 프롬프트 참조).

    • 데스크톱 버전::
      다음 명령을 실행하여 전자 개발 모드를 시작합니다:

      npm run electron:dev
      

      데스크톱 애플리케이션 창이 자동으로 팝업됩니다.

  5. 프로덕션 버전 빌드(선택 사항)
    • 웹 버전:
      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와 상호 작용하고 외부 도구를 호출할 수 있습니다.

 

애플리케이션 시나리오

  1. 개인 비서
    mcp-ui를 사용하여 날씨를 확인하고, 뉴스를 검색하고, 파일을 관리하여 일상 업무의 효율성을 향상하세요.
  2. 개발자 테스트
    개발자는 이를 사용하여 MCP 프로토콜과 AI 모델을 테스트하고 도구 호출의 효과를 빠르게 검증할 수 있습니다.
  3. 교육 학습
    학생이나 연구자는 직관적이고 이해하기 쉬운 인터페이스를 통해 mcp-ui를 통해 AI가 외부 서비스와 상호 작용하는 방식을 학습할 수 있습니다.

 

QA

  1. MCP-UI는 어떤 모델을 지원하나요?
    OpenAI 및 Anthropic의 모든 API 호환 모델이 지원되며, 사용자는 설정에서 특정 모델을 선택할 수 있습니다.
  2. 데스크톱 버전과 웹 버전의 차이점은 무엇인가요?
    데스크톱 버전은 브라우저가 필요하지 않고 로컬 파일 작업을 지원하며, 웹 버전은 더 가볍고 온라인 사용에 적합합니다.
  3. 새 도구를 추가하려면 어떻게 하나요?
    수정 mcp_server.js를 클릭하고 도구 이름과 매개변수를 정의한 다음 서비스를 다시 시작하면 적용됩니다.
© 저작권 정책

관련 문서

댓글 없음

댓글에 참여하려면 로그인해야 합니다!
지금 로그인
없음
댓글 없음...