Y Gui
- other
A web-based graphical interface for AI chat interactions with support for multiple AI models and MCP (Model Context Protocol) servers.
About
What is Y Gui?
Y Gui is a web-based graphical interface for AI chat interactions that supports multiple AI models and MCP (Model Context Protocol) servers. It runs on any modern browser and is built with a React frontend and a Cloudflare Workers backend, designed for developers and power users who want a customizable, self-hosted AI chat environment.
How to use Y Gui?
Clone the repository, install dependencies with npm install, configure environment variables (Auth0 and Cloudflare Worker settings in .env and wrangler.toml), then start the development server with npm run dev. To connect MCP servers, configure them via the UI with a name, command, arguments, environment variables, URL, and token. Multiple bot configurations (base URL, API key, model) can also be set up directly in the interface.
Key features of Y Gui
- 💬 Interactive chat interface with AI models
- 🤖 Support for multiple bot configurations (any base URL, API key, model)
- 🔗 MCP client support with multiple server configurations
- 🔒 Secure authentication via Auth0 and Google login
- 🌓 Dark/light theme support
- 🔄 Real-time updates with SWR
Use cases of Y Gui
- Chat with multiple AI models (e.g., OpenAI, local LLMs) from a single web UI.
- Equip AI assistants with external tools and data via MCP servers.
- Deploy a self-hosted, authenticated chat platform for teams or personal use.
- Access chat history across devices with cloud storage (Cloudflare KV/R2).
- Manage multiple bot configurations and MCP servers through a visual interface.
FAQ from Y Gui
What AI models does Y Gui support?
Y Gui works with any AI model accessible via an API, by configuring a base URL, API key, and model name. This includes OpenAI-compatible providers and self-hosted models.
How does authentication work?
Authentication uses Auth0 with universal login and Google social login, providing token-based session management for secure API access.
What is MCP server support and how do I configure it?
MCP servers allow the AI to use external tools and context. You configure them in the UI with a name, command, arguments, environment variables, URL, and token. Multiple servers can be active simultaneously.
Where is my chat data stored?
Chat data is stored in Cloudflare KV, with backups in Cloudflare R2. Bot and MCP server configurations are also stored in R2. All data is synced for access from any device.
Is Y Gui free and open source?
Y Gui is licensed under the MIT License. The software itself is free, but you need your own Cloudflare account (for Workers, KV, R2) and Auth0 account, which may incur costs depending on usage.
Details
- Author
- luohy15
- Category
- other
- Repository
- luohy15/y-gui
y-gui 🚀
A web-based graphical interface for AI chat interactions with support for multiple AI models and MCP (Model Context Protocol) servers.✨ Features
- 💬 Interactive chat interface with AI models - 🤖 Support for multiple bot configurations (any base_url/api_key/model combination) - 🔗 MCP (Model Context Protocol) client support with multiple server configurations - 🔒 Secure authentication with Auth0 and Google login - 🌓 Dark/light theme support - 📝 All chat data stored in Cloudflare KV/R2 for easy access and sync - 🔄 Real-time updates with SWR - 📱 Responsive design for all devicesDemo
chat historyArchitecture
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 KV and R2 storage ``mermaid
flowchart TD
Client[React Client] --> Worker[Cloudflare Worker]
Worker --> KV[Cloudflare KV]
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
`
⚡ 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:
`bash
git clone https://github.com/yourusername/y-gui.git
cd y-gui
`
2. Install dependencies:
`bash
npm install
`
3. Configure environment variables:
- Create a .env file in the frontend directory with Auth0 configuration
- Configure Cloudflare Worker settings in wrangler.toml
4. Start the development server:
`bash
npm run dev
`
🛠️ 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
