Open MCP 클라이언트: 모든 MCP 서비스에 빠르게 연결할 수 있는 웹 기반 MCP 클라이언트입니다.

11.6K 00

일반 소개

열기 MCP 클라이언트는 오픈 소스 도구로, 사용자가 별도의 설치 없이도 모든 MCP 서버에 연결하여 채팅할 수 있는 웹 기반 MCP(모델 컨텍스트 프로토콜) 클라이언트를 제공한다는 점이 가장 큰 특징입니다. 또한 자체 애플리케이션에 채팅 기능을 임베드할 수 있도록 지원합니다. CopilotKit 팀이 개발한 이 솔루션은 LangChain의 LangGraph 기술을 기반으로 하는 이 프로젝트는 Vercel 플랫폼에 배포되며, 코드는 GitHub에서 호스팅되며, 2025년 3월 10일에 마지막으로 업데이트되었습니다. 이 도구는 빠른 테스트 서버든 사용자 지정 AI 상호 작용 개발이든, 특히 편리한 환경을 원하는 사용자와 개발자에게 간단하고 유용합니다.

기능 목록

웹 기반 MCP 클라이언트를 제공하여 모든 MCP 서버에 직접 연결하고 실시간으로 채팅할 수 있습니다.
설치가 필요하지 않으며 브라우저를 통해 웹 버전의 기능을 사용할 수 있습니다.
채팅 기능을 사용자의 애플리케이션에 통합할 수 있도록 지원합니다.
LangGraph 기술을 사용하여 서버 도구에 연결되는 지능형 에이전트를 구축하세요.
오픈 소스 코드는 GitHub에서 호스팅되며 보기 및 수정을 지원합니다.
프런트엔드는 CopilotKit을 기반으로 하여 인터페이스와 상태가 동기화되도록 합니다.

도움말 사용

Open MCP 클라이언트를 시작하는 방법

웹 기반 MCP 클라이언트를 빠르게 경험하거나 로컬에 배포하여 애플리케이션에 통합하는 두 가지 방법으로 Open MCP 클라이언트를 사용할 수 있습니다. 다음은 시작하는 데 도움이 되는 자세한 단계입니다.

1. 웹 기반 MCP 클라이언트 사용

웹 버전은 Open MCP 클라이언트의 핵심 기능으로, 별도의 설치 없이 MCP 서버에 빠르게 연결할 수 있습니다.

1단계: 웹 버전 방문
브라우저를 열고 주소를 입력합니다:open-mcp-client.vercel.app. 이것은 Vercel의 CopilotKit 팀이 배포한 공식 웹 버전의 MCP 클라이언트로, 바로 사용할 수 있습니다.
2단계: MCP 서버 URL 얻기
유효한 MCP 서버 URL이 필요합니다. 구성 및 기타 플랫폼에서 다운로드할 수 있습니다. Composio 웹사이트에 로그인하여 MCP 서버를 생성하거나 선택한 다음 해당 서버의 URL을 복사합니다(일반적으로 다음과 같은 형식). https://example.com/mcp).
3단계: 서버에 연결
웹 버전의 인터페이스에서 URL 입력 상자(일반적으로 페이지의 눈에 잘 띄는 위치에 있음)를 찾아 복사한 MCP 서버의 URL을 붙여넣고 '연결' 버튼을 클릭하면 시스템에서 연결을 시도합니다. 연결에 성공하면 몇 초 내에 채팅 화면이 로드됩니다.
4단계: 채팅 시작하기
연결되면 입력 상자에 "오늘 날씨가 어때요?" 또는 "코드 작성 도와주세요"와 같은 메시지를 입력하고 전송합니다. 또는 "코드 작성해줘"와 같은 메시지를 입력한 다음 전송합니다. 서버가 실시간으로 응답하고 인터페이스에 대화 내용이 표시되며 조작이 간단하고 직관적입니다.

2. 로컬 배포 및 통합

로컬에서 실행하거나 프로젝트에 기능을 통합해야 하는 경우 아래의 개발 단계를 따르세요.

1단계: GitHub 리포지토리 복제하기
터미널에서 다음 명령을 실행하여 프로젝트를 로컬로 다운로드합니다:

git clone https://github.com/CopilotKit/open-mcp-client.git

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

cd open-mcp-client

2단계: 루트 디렉터리 환경 변수 구성하기
프로젝트 루트 디렉터리에서 .env 문서화:

touch .env

파일을 열고 다음을 추가합니다(실제 API 키로 대체):

LANGSMITH_API_KEY=lsv2_...

이 키는 랭스미스 서비스에 연결하는 데 사용되며 랭스미스 웹사이트에서 등록하여 얻을 수 있습니다.

3단계: 상담원 환경 변수 구성
로 이동 agent 폴더:

cd agent
touch .env

존재 agent/.env 파일이 추가됩니다:

OPENAI_API_KEY=sk-...
LANGSMITH_API_KEY=lsv2_...

OPENAI_API_KEY는 OpenAI 웹사이트에서 가져와서 LangGraph 에이전트 기능을 지원하는 데 사용됩니다.

4단계: 종속성 설치
루트 디렉토리로 돌아가서 실행합니다:

npm install

또는 pnpm(권장)을 사용하세요:

pnpm install

CopilotKit 및 LangGraph와 같은 종속 요소를 설치합니다. Node.js가 로컬에 설치되어 있는지 확인합니다(버전 18 이상 권장).

5단계: 개발 모드 활성화
프로젝트는 프론트엔드(/app) 및 에이전트(/agent) 두 부분으로 구성된 경우 두 개의 별도 터미널에서 실행하는 것이 좋습니다:
터미널 1(프런트 엔드):
```
pnpm run dev-frontend
```
터미널 2(상담원):
```
pnpm run dev-agent
```

를 클릭하거나 하나의 명령으로 둘 다 시작하세요:

pnpm run dev

시작 후 http://localhost:3000로컬 인터페이스를 볼 수 있습니다.

6단계: 연결 및 채팅 테스트
웹 버전과 동일한 방법으로 로컬 인터페이스에 MCP 서버 URL을 입력하고 연결을 클릭합니다. 연결에 성공하면 메시지를 입력하여 채팅 기능을 테스트할 수 있습니다.
7단계: 애플리케이션에 통합
프런트엔드 코드는 /app 폴더에서 CopilotKit 관리 인터페이스 및 상태 동기화를 사용합니다. 상담원 코드는 /agent 폴더를 생성하여 LangGraph를 기반으로 서버에 연결합니다. 이 코드를 재사용하거나 GitHub의 README.md를 참조하여 연동을 수정할 수 있습니다.

주요 기능의 세부 작동

웹 기반 MCP 클라이언트
웹 버전은 URL을 입력하기만 하면 연결할 수 있는 최고의 기능입니다. 연결에 실패하면 URL이 올바른지 또는 서버가 온라인 상태인지 확인하세요. 인터페이스는 원활한 작동을 위해 CopilotKit에 의해 구동됩니다.
실시간 채팅
채팅 인터페이스는 웹 버전과 로컬 버전 모두에서 실시간 입력 및 답장 표시를 지원합니다. 메시지를 보낸 후 LangGraph 에이전트가 요청을 처리하고 서버 도구를 호출하면 결과가 자동으로 표시됩니다.
디버깅 및 사용자 지정
로컬 런타임, 로그 및 네트워크 요청을 볼 수 있는 브라우저 개발자 도구(F12)를 사용할 수 있습니다. 코드 오픈 소스, 수정 가능 /app 프런트 엔드 스타일에서 조정하거나 /agent 프록시 로직은