wxapp

# SSE WeChat Mini Program WeChat Mini Program client based on SSE service, providing community highlights, chat, and personal information functions. ## Project Overview This project is an SSE (Server-Sent Events) client based on WeChat Mini Program, mainly including three core pages: community highlights page, chat page, and personal information page. ## Features - **Community Highlights Page**: Displays various selected MCP applications and popular recommendations - **Chat Page**: Implements real-time chat function based on SSE, supports MCP services such as AMap - **Personal Information Page**: User WeChat account login, logout, and chat count management - **SSE Real-time Communication**: Supports real-time message push between server and client - **Tool Invocation Process**: Implements a complete process of tool identification, parameter parsing, invocation execution, and result processing - **User Authentication System**: Supports WeChat account login, manages user chat counts ## Technical Implementation - Uses WeChat Mini Program native development framework - SSE server is implemented based on Express framework - Chat function uses SSE technology to achieve real-time communication between server and client - Integrates AMap API to implement map-related functions - Uses OpenAI interface to process natural language requests and tool invocation identification - Follows WeChat Mini Program design specifications and development best practices ## Project Structure ``` . ├── miniprogram/ # WeChat Mini Program client │ ├── app.js # Mini Program entry file │ ├── app.json # Mini Program configuration file │ ├── app.wxss # Global style file │ ├── images/ # Image resources │ ├── pages/ # Page files │ │ ├── community/ # Community highlights page │ │ │ ├── index.js # Community page logic │ │ │ ├── index.json # Page configuration │ │ │ ├── index.wxml # Page structure │ │ │ └── index.wxss # Page style │ │ ├── chat/ # Chat page │ │ │ ├── index.js # Chat page logic │ │ │ ├── index.json # Page configuration │ │ │ ├── index.wxml # Page structure │ │ │ └── index.wxss # Page style │ │ ├── profile/ # Personal information page │ │ │ ├── index.js # Personal page logic │ │ │ ├── index.json # Page configuration │ │ │ ├── index.wxml # Page structure │ │ │ └── index.wxss # Page style │ │ └── travel-guide/ # Travel guide rendering page │ │ ├── index.js # Guide page logic │ │ ├── index.json # Page configuration │ │ ├── index.wxml # Page structure │ │ └── index.wxss # Page style │ └── utils/ # Utility functions │ ├── sseClient.js # SSE client service │ ├── markdown.js # Markdown parsing tool │ └── mcpConfig.js/ # MCP SSE configuration (Server id can be obtained from Cherry Studio) ├── server_back/package/ # SSE server │ ├── sse_proxy_server.ts # Main file for SSE proxy server │ ├── package.json # Server dependency configuration │ └── .env # Environment variable configuration ├── package.json # Project dependency configuration ├── deploy.sh # Deployment script ├── 微信开发者工具配置.md # Configuration documentation └── README.md # Project documentation ``` ## SSE Server The SSE server is implemented based on Express and provides the following functions: - **SSE Real-time Communication**: Maintains a long connection with the client and pushes messages in real-time - **AI Chat Capability**: Integrates OpenAI API to provide intelligent dialogue function ### Proxy Server Location: server_back/package/sse_proxy_server.ts ### API Interface - `POST /sse-chat`: Creates an SSE connection for real-time chat - `POST /chat`: Regular chat API, does not use SSE connection - `GET /status`: Gets the server status ### Tool Invocation Example The following is an actual case of the system processing AMap weather query: ``` Received SSE chat request OpenAI response: Tool invocation request mcp_amap_maps_maps_weather Processing tool invocation: mcp_amap_maps_maps_weather Tool invocation parameters: { city: '深圳市' } Tool invocation result: { "status": "1", "count": "1", "info": "OK", "lives": [ { "province": "广东", "city": "深圳市", "adcode": "440300", "weather": "阴", "temperature": "26", "winddirection": "西南", "windpower": "≤3", "humidity": "69", "reporttime": "2025-04-09 11:00:36" } ] } Final response: The weather in Shenzhen yesterday was cloudy, the temperature was 26°C, the southwest wind force was ≤3, and the humidity was 69%. ``` ## SSE Client The SSE client is implemented in the WeChat Mini Program and provides the following functions: - **Chunked Data Reception**: Simulates the data reception method of SSE - **Event Handling**: Parses and processes various events sent by the server - **Tool Invocation**: Supports the invocation of tools such as AMap and the display of results - **Real-time Rendering**: Renders the information returned by the server to the chat interface in real-time ### Client API - `createSseConnection()`: Creates an SSE connection - `sendChatMessage()`: Sends a regular chat message - `checkServerStatus()`: Checks the server status ## Startup Method ### Start Server ```bash # Install dependencies and start the server npm run start-server # Or use the debug script ./debug.sh ``` The server runs on port 3091 by default. If the port is occupied, it will automatically try to release it. ### Run Mini Program 1. Open the project with WeChat Developer Tools 2. In "Details" -> "Local Settings", check "Do not verify legal domain names" 3. Ensure the server is running normally 4. Preview the effect in the simulator or perform real machine debugging ## Development Notes - Follow the WeChat Mini Program resource size limit, images and audio resources should not exceed 200K - Use placeholder images instead of larger image resources - SSE connection requires the server to support cross-domain requests - When developing locally, make sure that "Do not verify legal domain names" is checked in WeChat Developer Tools - When debugging on a real machine, the server address needs to be changed to the computer's local area network IP ## User Authentication System This project implements a complete WeChat account login and chat count management function: ### Login Function - **WeChat Account Login**: Use WeChat Mini Program's official `wx.getUserProfile` API to get user information - **User Information Display**: Display user avatar, nickname, and other information on the personal page - **Logout**: Supports users to log out of the current account ### Chat Count Management - **Initial Login Gift**: Users are automatically given 200 chat counts when they log in for the first time - **Consumption Mechanism**: Each chat consumes 1 chat count - **Count Display**: Real-time display of remaining chat counts on the personal page and chat page ### Cloud Development Integration - **Cloud Functions**: Use WeChat Cloud Development's cloud functions to implement user authentication and data storage - **Database**: Use Cloud Development database to store user information and chat counts - **Local Debugging**: Supports local debugging mode for easy development and testing ## Future Plans - Add more MCP service types - Optimize the stability of SSE connections - Enhance the visual display of tool invocation results - Add chat count recharge function - Implement user chat history storage ## Reference Documents - [WeChat Mini Program Development Documentation](https://developers.weixin.qq.com/miniprogram/dev/framework/) - [Server-Sent Events Tutorial](https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events) - [OpenAI API Documentation](https://platform.openai.com/docs/api-reference) # MCP SSE Proxy Server This server is a proxy server for the Model Context Protocol (MCP). It uses Server-Sent Events (SSE) to communicate with the MCP server and integrates OpenAI GPT-4o to intelligently select and call tools. ## Features - Connects to the MCP server and manages the connection - Uses OpenAI LLM to intelligently select the appropriate tools to handle user requests - Supports multi-turn tool calls and integrates the results - Automatically cleans up inactive connections ## Installation ```bash npm install ``` ## Configuration 1. Copy the `.env.example` file to `.env` 2. Configure the OpenAI API key and other settings in the `.env` file ``` OPENAI_API_KEY=your_openai_api_key_here OPENAI_MODEL=gpt-4o OPENAI_BASE_URL=https://api.openai.com/v1 PORT=3091 ``` ## Usage Start the server: ```bash npm start ``` ### API Endpoints 1. **Create Connection** - `POST /connect` ```json { "sseUrl": "https://example-sse-server.com/sse" } ``` 2. **Send Message** - `POST /send/:connectionId` ```json { "message": "I want to know the current time in New York" } ``` Or ```json { "type": "tool_call", "tool": "get_current_time", "args": { "timezone": "America/New_York" } } ``` 3. **Get Available Tools** - `GET /tools/:connectionId` 4. **Close Connection** - `DELETE /connection/:connectionId` 5. **Check Server Status** - `GET /status` ## Processing Flow 1. User message is sent to the server 2. The server uses GPT-4o to analyze the message 3. LLM selects the appropriate tool and calls it 4. The server executes the tool call and returns the result 5. If needed, LLM may select more tool calls 6. Finally, LLM integrates all tool call results and provides a complete response # WeChat Mini Program MCP Server Deployment Instructions ## Service Components This project includes two main server-side components: 1. **Login Server (LoginServer)** - Handles WeChat Mini Program login authentication and user management 2. **MCP Proxy Service (Package)** - Provides MCP (Model Context Protocol) proxy functionality ## Deployment ### Prerequisites - Node.js environment (v14+) - PM2 process manager - Nginx - The server needs to have a public IP - Domain name (if HTTPS is required) ### Deployment Script The project provides an automated deployment script `deploy.sh`. Execute the following command to deploy: ```bash chmod +x deploy.sh ./deploy.sh ``` The deployment script will: 1. Create a local build directory 2. Package the server-side code 3. Upload to the target server 4. Install dependencies 5. Configure Nginx reverse proxy 6. Start the service using PM2 7. Handle environment variable configuration ### Environment Variable Configuration After deployment, you need to configure the environment variables for the two services: **Login Server (.env)** ``` # Service configuration PORT=3090 NODE_ENV=production # JWT configuration JWT_SECRET=your_jwt_secret_here JWT_EXPIRES_IN=7d # WeChat Mini Program configuration WX_APPID=your_wx_appid_here WX_SECRET=your_wx_secret_here # Data storage configuration DATA_DIR=data ``` **MCP Proxy Service (.env)** ``` # Service configuration PORT=3091 NODE_ENV=production # OpenAI configuration OPENAI_API_KEY=your_openai_api_key_here OPENAI_MODEL=gpt-4o OPENAI_BASE_URL=https://api.openai.com/v1 ``` ### Manual Deployment Steps If you need to deploy manually, please refer to the following steps: 1. Upload the server-side code to the server 2. Install dependencies ```bash cd loginServer && npm install cd package && npm install && npm run build ``` 3. Configure environment variables 4. Start the service ```bash cd loginServer && pm2 start app.js --name wxapp-login-server cd package && pm2 start dist/sse_proxy_server.js --name mcp-proxy-server ``` 5. Configure Nginx reverse proxy ### Nginx Configuration Example ```nginx server { listen 80; server_name your-domain.com; # Login Server location /api/ { proxy_pass http://localhost:3090; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection 'upgrade'; proxy_set_header Host $host; proxy_cache_bypass $http_upgrade; } # MCP Proxy Server location / { proxy_pass http://localhost:3091; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection 'upgrade'; proxy_set_header Host $host; proxy_cache_bypass $http_upgrade; } } ``` ## Service Description ### Login Service (LoginServer) The login service is responsible for handling WeChat Mini Program login authentication and user management. The main API endpoints include: - `/api/user/login` - User login - `/api/user/info` - Get/update user information - `/api/user/chat-credits` - Manage chat counts For detailed API documentation, please refer to `server_back/loginServer/README.md` ### MCP Proxy Service (Package) The MCP proxy service provides the ability to interact with AI models through the SSE connection protocol. The main endpoints include: - `/discover-mcp` - Discover MCP server - `/connect` - Create connection - `/send/:connectionId` - Send message - `/tools/:connectionId` - List available tools ## Troubleshooting If you encounter deployment problems, please check: 1. Server logs ```bash pm2 logs ``` 2. Nginx logs ```bash tail -f /var/log/nginx/error.log ``` 3. Ensure that the environment variables are configured correctly 4. Check whether the required ports are open