What is Y Gui

y-gui is a web-based graphical interface designed for AI chat interactions, supporting multiple AI models and MCP (Model Context Protocol) servers.

Use cases

Typical use cases include AI chatbots for customer service, educational tutoring systems, interactive entertainment applications, and research tools for AI model testing.

How to use

To use y-gui, clone the repository, install dependencies, configure environment variables for Cloudflare Worker and Auth0, and then build the application.

Key features

Key features include an interactive chat interface, support for multiple bot configurations, MCP client support, secure authentication, dark/light theme support, cloud storage for chat data, real-time updates, and responsive design.

Where to use

y-gui can be used in various fields such as customer support, education, entertainment, and any application requiring AI-driven chat interactions.

y-gui 🚀

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.

Demo

MCP in Action

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

✨ Features

• 💬 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 D1 for easy access and sync
• 🔄 Real-time updates with SWR
• 📱 Responsive design for all devices

Architecture

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 D1 storage

flowchart TD
    Client[React Client] --> Worker[Cloudflare Worker]
    Worker --> D1[Cloudflare D1]
    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

⚡ Quick Start

Prerequisites

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

Installation

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
   

🛠️ Development

Project Structure

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

Available Scripts

• 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

🔒 Authentication

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

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

🤖 Bot Configuration

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 Server Configuration

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.

🌐 API Endpoints

The backend provides RESTful API endpoints for:

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

🔄 Data Storage

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

🧩 Technologies Used

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

📚 Documentation

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

Visit the deepwiki page for comprehensive project documentation and guides.

🤝 Contributing

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

📄 License

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