y-gui 是什么？

y-gui 是一個基于Web的用來與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