y-gui: 다양한 AI 모델과 MCP 통합을 지원하는 웹 기반 AI 채팅 도구 161

y-gui란 무엇인가요?

y-gui는 ai와 채팅으로 상호작용하기 위한 웹 기반 그래픽 인터페이스로, 다양한 AI 모델과 MCP 통합을 지원합니다. MCP 프로토콜을 통해 AI의 기능을 확장하여 Gmail, Google 캘린더, 이미지 생성 서비스 등에 연결할 수 있습니다.

y-gui 기능 특징

• 대화형 채팅 인터페이스: AI 모델과 상호작용할 수 있는 채팅 인터페이스를 제공합니다.

• 다중 봇 구성 지원: 서로 다른 base_url, api_key 및 model 조합을 포함하여 다양한 봇 구성을 지원합니다.

• 포괄적인 MCP 통합 시스템:

• Gmail 접근 및 관리: 채팅 인터페이스를 통해 Gmail 이메일에 직접 접근하고 관리할 수 있습니다.

• Google 캘린더 통합: 자연어로 캘린더 이벤트를 생성하고 관리할 수 있습니다.

• 이미지 생성 기능: 채팅 대화에서 직접 이미지를 생성할 수 있습니다.

• 확장 가능한 프레임워크: 더 많은 MCP 서버와 도구를 추가하는 것을 지원합니다.

• 안전한 인증: Auth0 및 Google 로그인을 사용한 안전한 인증.

• 테마 지원: 다크 및 라이트의 두 가지 테마 지원.

• 데이터 저장: 모든 채팅 데이터는 Cloudflare R2에 저장되어 접근 및 동기화가 편리합니다.

• 실시간 업데이트: SWR을 사용하여 실시간 데이터 업데이트 구현.

• 반응형 디자인: 모든 장치에 적합한 인터페이스.

y-gui 아키텍처 설계

• 프론트엔드: 데이터 가져오기를 위해 React, TypeScript, Tailwind CSS 및 SWR을 사용합니다.

• 백엔드: Cloudflare Workers 기반으로 구축되었으며, 데이터 저장에는 R2를 사용합니다.

기술 스택

• 프론트엔드: React, TypeScript, Tailwind CSS, SWR, Auth0.

• 백엔드: Cloudflare Workers, R2.

• 통합: MCP 서버, OAuth2, Gmail API, Google Calendar API, 이미지 생성 API.

• 빌드 도구: Vite, Wrangler, TypeScript.

y-gui 설치 및 사용

전제 조건

• Node.js 및 npm 설치.

• Cloudflare 계정 보유.

• Auth0 계정 보유.

• AI 제공자의 API 키 획득.

설치 단계

1. 저장소 복제:

git clone https://github.com/luohy15/y-gui.git
cd y-gui

2. 종속성 설치:

npm install

3. 환경 변수 구성:

• backend/wrangler.toml에서 Cloudflare Worker 설정을 구성합니다.

• frontend/src/index.tsx 및 backend/src/utils/auth.ts에서 Auth0 설정을 변경합니다.

4. 자산 빌드:

npm run build

5. Cloudflare Worker 배포:

npm run deploy

Github:https://github.com/luohy15/y-gu