y-gui 🚀

一个基于Web的图形界面，用于与支持多种AI模型的强大MCP（模型上下文协议）集成进行AI聊天交互。除了标准的聊天功能外，y-gui还利用MCP连接到Gmail、Google日历、图像生成服务等。

查看y-cli以获取命令行版本。

演示

MCP在行动

了解y-gui如何使用MCP集成扩展AI能力：

• Gmail集成 - 通过聊天界面直接访问和管理电子邮件
• Google日历集成 - 通过自然语言创建和管理日历事件
• 图像生成 - 在聊天对话中直接生成图像

✨ 特性

• 💬 支持与AI模型进行互动聊天界面
• 🤖 支持多种机器人配置（任何base_url/api_key/model组合）
• 🔗 完整的MCP（模型上下文协议）集成系统，包括：
  • 📧 访问和管理Gmail
  • 📅 通过Google日历集成进行事件调度
  • 🖼️ 图像生成能力
  • 🧩 扩展框架，用于额外的MCP服务器和工具
• 🔒 使用Auth0和Google登录的安全认证
• 🌓 支持深色/浅色主题
• 📝 所有聊天数据存储在Cloudflare D1中，便于访问和同步
• 🔄 实时更新，使用SWR
• 📱 响应式设计，适用于所有设备

架构

y-gui由两个主要组件组成：

1. 前端：使用TypeScript、Tailwind CSS和SWR进行数据获取的React应用程序
2. 后端：使用D1存储的Cloudflare Workers

flowchart TD
    Client[React Client] --> Worker[Cloudflare Worker]
    Worker --> D1[Cloudflare D1]
    Worker --> AI[AI Providers]

    subgraph "前端"
        Client --> Components[React Components]
        Components --> State[SWR State]
        State --> API[API Layer]
    end

    subgraph "后端"
        Worker --> Auth[Auth Middleware]
        Worker --> Storage[Storage Layer]
        Worker --> Provider[Provider Layer]
    end

⚡ 快速开始

先决条件

1. Node.js和npm
2. Cloudflare账户
3. Auth0账户
4. 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
   

🛠️ 开发

项目结构

y-gui/
├── frontend/               # React前端应用
│   ├── src/
│   │   ├── components/     # React组件
│   │   ├── contexts/       # React上下文
│   │   ├── utils/          # 工具函数
│   │   └── index.tsx       # 入口点
├── backend/                # Cloudflare Worker后端
│   ├── src/
│   │   ├── api/            # API端点
│   │   ├── middleware/     # 中间件
│   │   ├── repository/     # 数据访问
│   │   └── index.ts        # Worker入口
├── shared/                 # 前端和后端之间的共享代码
│   └── types/              # TypeScript类型定义
└── memory-bank/            # 项目文档

可用脚本

• npm run dev: 启动前端和后端开发服务器
• npm run dev:frontend: 仅启动前端开发服务器
• npm run dev:backend: 仅启动后端开发服务器
• npm run build: 构建前端和后端
• npm run deploy: 将后端部署到Cloudflare Workers
• npm run test: 运行测试

🔒 认证

y-gui使用Auth0进行认证，具有以下功能：

• 统一登录
• Google社交登录
• 基于令牌的会话管理
• 安全的API访问

🤖 机器人配置

y-gui支持具有以下属性的多个机器人配置：

• 名称
• 模型
• 基础URL
• API密钥
• 打印速度
• MCP服务器
• API类型
• 自定义API路径
• 最大标记数
• 推理努力

🔗 MCP服务器配置

MCP（模型上下文协议）服务器可以简单地配置如下：

• 名称：MCP服务器的唯一标识符
• URL：用于远程托管的MCP服务
• Token：用于安全服务器访问的身份验证令牌

当前的MCP集成包括Gmail、Google日历、图像生成，并支持自定义服务器以连接几乎任何API或服务。

🌐 API端点

后端提供RESTful API端点用于：

• 聊天操作
• 机器人配置管理
• MCP服务器配置管理
• 认证

🔄 数据存储

• 聊天数据存储在Cloudflare D1中
• 机器人和MCP服务器配置存储在Cloudflare D1中
• MCP集成数据通过授权的API连接安全地管理

🧩 使用的技术

• 前端：React、TypeScript、Tailwind CSS、SWR、Auth0
• 后端：Cloudflare Workers、D1
• 集成：MCP服务器、OAuth2、Gmail API、Google日历API、图像生成API
• 构建工具：Vite、Wrangler、TypeScript

📚 文档

更多详细的文档，请参阅memory-bank目录。

访问deepwiki页面以获取全面的项目文档和指南。

🤝 贡献

欢迎贡献！请随时提交Pull Request。

📄 许可证

此项目根据MIT许可证发布 - 详情见LICENSE文件。