Interactive AI Chat Interface with MCP Server Support

Overview

A web-based graphical interface for AI chat interactions with support for multiple AI models and MCP (Model Context Protocol) servers. This project provides an interactive chat interface, secure authentication, and real-time updates, making it a versatile tool for AI-driven conversations.

Features

• 💬 Interactive chat interface with AI models
• 🤖 Support for multiple bot configurations
• 🔗 MCP client support with multiple server configurations
• 🔒 Secure authentication with Auth0 and Google login
• 🌓 Dark/light theme support
• 📝 Chat data stored in Cloudflare KV/R2
• 🔄 Real-time updates with SWR
• 📱 Responsive design for all devices

Demo

Chat History Example

Architecture

The project 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.

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:
   shell git clone https://github.com/luohy15/y-gui.git cd y-gui
2. Install dependencies:
   shell npm install
3. Configure environment variables:
4. Configure Cloudflare Worker settings in backend/wrangler.toml
5. Change the Auth0 settings in frontend/src/index.tsx and backend/src/utils/auth.ts
6. Build assets:
   shell npm run build
7. Deploy Cloudflare Worker:
   shell 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 servers can be configured with:
- Name
- Command
- Arguments
- Environment Variables
- URL
- Token

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 KV
• Backup data is stored in Cloudflare R2
• Bot and MCP server configurations are stored in Cloudflare R2

Technologies Used

• Frontend: React, TypeScript, Tailwind CSS, SWR, Auth0
• Backend: Cloudflare Workers, KV, R2
• Build Tools: Vite, Wrangler, TypeScript

Documentation

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

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.