A web-based graphical interface for AI chat interactions with support for multiple AI models and powerful MCP (Model Context Protocol) integrations. Beyond standard chat capabilities, y-gui leverages MCP to connect with Gmail, Google Calendar, image generation services, and more.

Check out y-cli for a CLI version.

See how y-gui uses MCP integrations to extend AI capabilities:

• Gmail Integration - Access and manage emails directly through the chat interface
• Google Calendar Integration - Create and manage calendar events via natural language
• Image Generation - Generate images directly within your chat conversation

• 💬 Interactive chat interface with AI models
• 🤖 Support for multiple bot configurations (any base_url/api_key/model combination)
• 🔗 Comprehensive MCP (Model Context Protocol) integration system with:
  • 📧 Gmail access and management
  • 📅 Google Calendar integration for event scheduling
  • 🖼️ Image generation capabilities
  • 🧩 Expandable framework for additional MCP servers and tools
• 🔒 Secure authentication with Auth0 and Google login
• 🌓 Dark/light theme support
• 📝 All chat data stored in Cloudflare R2 for easy access and sync
• 🔄 Real-time updates with SWR
• 📱 Responsive design for all devices

y-gui consists of two main components:

1. Frontend: React application with TypeScript, Tailwind CSS, and SWR for data fetching
2. Backend: Cloudflare Workers with R2 storage

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

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

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

1. Node.js and npm
2. Cloudflare account
3. Auth0 account
4. API keys for AI providers

1. Clone the repository:

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

2. Install dependencies:

   npm install

3. Configure environment variables:

   • Configure Cloudflare Worker settings in backend/wrangler.toml
   • Change the auth0 settings in frontend/src/index.tsx and backend/src/utils/auth.ts

4. Build asset:

   npm run build

5. Deploy cloudflare worker

   npm run deploy

y-gui/
├── frontend/               # React frontend application
│   ├── src/
│   │   ├── components/     # React components
│   │   ├── contexts/       # React contexts
│   │   ├── utils/          # Utility functions
│   │   └── index.tsx       # Entry point
├── backend/                # Cloudflare Worker backend
│   ├── src/
│   │   ├── api/            # API endpoints
│   │   ├── middleware/     # Middleware
│   │   ├── repository/     # Data access
│   │   └── index.ts        # Worker entry
├── shared/                 # Shared code between frontend and backend
│   └── types/              # TypeScript type definitions
└── memory-bank/            # Project documentation

• npm run dev: Start both frontend and backend development servers
• npm run dev:frontend: Start only the frontend development server
• npm run dev:backend: Start only the backend development server
• npm run build: Build both frontend and backend
• npm run deploy: Deploy the backend to Cloudflare Workers
• npm run test: Run tests

y-gui uses Auth0 for authentication with the following features:

• Universal Login
• Google social login
• Token-based session management
• Secure API access

y-gui supports multiple bot configurations with the following properties:

• Name
• Model
• Base URL
• API Key
• Print Speed
• MCP Servers
• API Type
• Custom API Path
• Max Tokens
• Reasoning Effort

MCP (Model Context Protocol) servers can be configured with simple:

• Name: Unique identifier for the MCP server
• URL: For remotely hosted MCP services
• Token: Authentication token for secure server access

Current MCP integrations include Gmail, Google Calendar, image generation, and support for custom servers to connect with virtually any API or service.

The backend provides RESTful API endpoints for:

• Chat operations
• Bot configuration management
• MCP server configuration management
• Authentication

• Chat data is stored in Cloudflare R2
• Bot and MCP server configurations are stored in Cloudflare R2
• MCP integration data is securely managed through authorized API connections

• Frontend: React, TypeScript, Tailwind CSS, SWR, Auth0
• Backend: Cloudflare Workers, R2
• Integrations: MCP servers, OAuth2, Gmail API, Google Calendar API, Image Generation APIs
• Build Tools: Vite, Wrangler, TypeScript

For more detailed documentation, see the memory-bank directory.

Visit the deepwiki page for comprehensive project documentation and guides.

Contributions are welcome! Please feel free to submit a Pull Request.

This project is licensed under the MIT License - see the LICENSE file for details.