171 lines
4.4 KiB
Markdown
171 lines
4.4 KiB
Markdown
# Testing the New Direct Connection Architecture
|
|
|
|
This guide helps you test the new direct connection architecture where Cherry Studio and the Chrome extension connect directly to the remote server, bypassing the native server.
|
|
|
|
## Architecture Overview
|
|
|
|
### Old Flow (with Native Server)
|
|
```
|
|
Cherry Studio → Remote Server → Native Server → Chrome Extension
|
|
```
|
|
|
|
### New Flow (Direct Connection)
|
|
```
|
|
Cherry Studio → Remote Server
|
|
Chrome Extension → Remote Server (direct WebSocket)
|
|
```
|
|
|
|
## Prerequisites
|
|
|
|
1. **Remote Server** running on port 3001
|
|
2. **Chrome Extension** installed and loaded
|
|
3. **Node.js** for running test scripts
|
|
|
|
## Step-by-Step Testing
|
|
|
|
### 1. Start the Remote Server
|
|
|
|
```bash
|
|
cd app/remote-server
|
|
npm run dev
|
|
```
|
|
|
|
The server should start on `http://localhost:3001` with these endpoints:
|
|
- HTTP: `http://localhost:3001/mcp` (for Cherry Studio)
|
|
- WebSocket: `ws://localhost:3001/chrome` (for Chrome extension)
|
|
|
|
### 2. Load the Chrome Extension
|
|
|
|
1. Open Chrome and go to `chrome://extensions/`
|
|
2. Enable "Developer mode"
|
|
3. Click "Load unpacked" and select the `app/chrome-extension` directory
|
|
4. The extension should load and automatically attempt to connect to the remote server
|
|
|
|
### 3. Check Chrome Extension Connection
|
|
|
|
1. Click on the Chrome extension icon
|
|
2. Go to the "Remote Server" section
|
|
3. You should see:
|
|
- ✅ Connected status
|
|
- Connection time
|
|
- Server URL: `ws://localhost:3001/chrome`
|
|
|
|
### 4. Run Automated Tests
|
|
|
|
```bash
|
|
# Install dependencies if needed
|
|
npm install node-fetch ws
|
|
|
|
# Run the test script
|
|
node test-direct-connection.js
|
|
```
|
|
|
|
This will test:
|
|
- Remote server health
|
|
- MCP tools list retrieval
|
|
- Chrome extension WebSocket connection
|
|
- Tool call execution
|
|
|
|
### 5. Test with Cherry Studio
|
|
|
|
1. Copy the configuration from the Chrome extension popup:
|
|
- Click the extension icon
|
|
- Go to "Remote Server" section
|
|
- Copy the "Streamable HTTP" configuration
|
|
2. Add this configuration to Cherry Studio's MCP servers
|
|
3. Test browser automation tools like:
|
|
- `chrome_navigate`
|
|
- `chrome_screenshot`
|
|
- `get_windows_and_tabs`
|
|
|
|
## Expected Results
|
|
|
|
### ✅ Success Indicators
|
|
|
|
1. **Remote Server Logs**:
|
|
```
|
|
Chrome extension WebSocket connection established
|
|
MCP server connected to streaming transport
|
|
```
|
|
|
|
2. **Chrome Extension Console**:
|
|
```
|
|
Connected to remote MCP server - direct connection established
|
|
Chrome extension will receive tool calls directly from remote server
|
|
```
|
|
|
|
3. **Tool Calls**:
|
|
- No 10-second timeout errors
|
|
- Faster response times (< 5 seconds)
|
|
- All browser automation tools working
|
|
|
|
### ❌ Troubleshooting
|
|
|
|
1. **Chrome Extension Not Connecting**:
|
|
- Check if remote server is running on port 3001
|
|
- Check browser console for WebSocket errors
|
|
- Verify firewall settings
|
|
|
|
2. **Tool Calls Failing**:
|
|
- Check Chrome extension permissions
|
|
- Verify active tab exists
|
|
- Check remote server logs for errors
|
|
|
|
3. **Timeout Errors**:
|
|
- Ensure you're using the new architecture (not native server)
|
|
- Check network connectivity
|
|
- Verify WebSocket connection is stable
|
|
|
|
## Performance Comparison
|
|
|
|
### Before (Native Server)
|
|
- Tool call timeout: 10 seconds
|
|
- Average response time: 5-15 seconds
|
|
- Frequent timeout errors on complex operations
|
|
|
|
### After (Direct Connection)
|
|
- Tool call timeout: 60 seconds
|
|
- Average response time: 1-5 seconds
|
|
- Rare timeout errors, better reliability
|
|
|
|
## Configuration Examples
|
|
|
|
### Cherry Studio MCP Configuration (Streamable HTTP)
|
|
```json
|
|
{
|
|
"mcpServers": {
|
|
"chrome-mcp-remote-server": {
|
|
"type": "streamableHttp",
|
|
"url": "http://localhost:3001/mcp",
|
|
"description": "Remote Chrome MCP Server for browser automation (Streamable HTTP) - Direct Connection"
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
### Chrome Extension Configuration
|
|
- Server URL: `ws://localhost:3001/chrome`
|
|
- Reconnect Interval: 5000ms
|
|
- Max Reconnect Attempts: 50
|
|
|
|
## Debugging Tips
|
|
|
|
1. **Enable Verbose Logging**:
|
|
- Chrome extension: Check browser console
|
|
- Remote server: Check terminal output
|
|
|
|
2. **Network Inspection**:
|
|
- Use browser DevTools to inspect WebSocket connections
|
|
- Check for connection drops or errors
|
|
|
|
3. **Tool Call Tracing**:
|
|
- Monitor remote server logs for tool call routing
|
|
- Check Chrome extension logs for tool execution
|
|
|
|
## Next Steps
|
|
|
|
Once testing is successful:
|
|
1. Update documentation to reflect the new architecture
|
|
2. Consider deprecating native server for Chrome extension communication
|
|
3. Monitor performance improvements in production use
|