This commit is contained in:
Josh at WLTechBlog
2025-08-15 07:41:30 -05:00
parent dc6b288aa4
commit efab3cc11e
7 changed files with 533 additions and 4 deletions

View File

@@ -4,7 +4,7 @@ This guide explains how LLMs can use the cremote MCP (Model Context Protocol) to
## Available Tools
The cremote MCP server provides six comprehensive web automation tools:
The cremote MCP server provides ten comprehensive web automation, file transfer, and console debugging tools:
### 1. `web_navigate_cremotemcp`
Navigate to URLs and optionally take screenshots.
@@ -123,6 +123,73 @@ web_iframe_cremotemcp:
action: "exit"
```
### 7. `file_upload_cremotemcp`
Upload files from the client to the container for use in form uploads.
**Parameters:**
- `local_path` (required): Path to the file on the client machine
- `container_path` (optional): Path where to store the file in the container (defaults to /tmp/filename)
**Example Usage:**
```
file_upload_cremotemcp:
local_path: "/home/user/document.pdf"
container_path: "/tmp/upload.pdf"
file_upload_cremotemcp:
local_path: "/home/user/image.jpg"
# Will default to /tmp/image.jpg in container
```
### 8. `file_download_cremotemcp`
Download files from the container to the client (e.g., downloaded files from browser).
**Parameters:**
- `container_path` (required): Path to the file in the container
- `local_path` (required): Path where to save the file on the client machine
**Example Usage:**
```
file_download_cremotemcp:
container_path: "/tmp/downloaded-report.pdf"
local_path: "/home/user/Downloads/report.pdf"
```
### 9. `console_logs_cremotemcp`
Get console logs from the browser tab for debugging.
**Parameters:**
- `tab` (optional): Specific tab ID to use
- `clear` (optional): Clear logs after retrieval (default: false)
**Example Usage:**
```
console_logs_cremotemcp:
clear: true
console_logs_cremotemcp:
tab: "ABC123"
clear: false
```
### 10. `console_command_cremotemcp`
Execute JavaScript commands in the browser console.
**Parameters:**
- `command` (required): JavaScript command to execute
- `tab` (optional): Specific tab ID to use
- `timeout` (optional): Timeout in seconds (default: 5)
**Example Usage:**
```
console_command_cremotemcp:
command: "console.log('Hello from MCP!')"
console_command_cremotemcp:
command: "document.querySelector('h1').textContent"
timeout: 10
```
## Common Usage Patterns
### 1. Basic Web Navigation
@@ -277,6 +344,100 @@ web_navigate_cremotemcp:
screenshot: true
```
## Example: File Upload Workflow
Here's how to upload a file and use it in a web form:
```
# Step 1: Upload a file from client to container
file_upload_cremotemcp:
local_path: "/home/user/resume.pdf"
container_path: "/tmp/resume.pdf"
# Step 2: Navigate to upload form
web_navigate_cremotemcp:
url: "https://jobsite.com/apply"
# Step 3: Fill out application form
web_interact_cremotemcp:
action: "fill"
selector: "input[name='name']"
value: "Jane Smith"
# Step 4: Upload the file using the container path
web_interact_cremotemcp:
action: "upload"
selector: "input[type='file']"
value: "/tmp/resume.pdf"
# Step 5: Submit the application
web_interact_cremotemcp:
action: "submit"
selector: "form.application"
```
## Example: Download Files from Browser
Here's how to download files that the browser saves:
```
# Step 1: Navigate to download page
web_navigate_cremotemcp:
url: "https://example.com/reports"
# Step 2: Click download link
web_interact_cremotemcp:
action: "click"
selector: "a.download-report"
# Step 3: Wait a moment for download to complete
# (In practice, you might need to check for file existence)
# Step 4: Download the file from container to client
file_download_cremotemcp:
container_path: "/tmp/downloads/report.pdf"
local_path: "/home/user/Downloads/report.pdf"
```
## Example: Console Debugging Workflow
Here's how to use console tools for debugging web automation:
```
# Step 1: Navigate to a page
web_navigate_cremotemcp:
url: "https://example.com/form"
# Step 2: Check what's in the console initially
console_logs_cremotemcp:
clear: false
# Step 3: Execute some debugging commands
console_command_cremotemcp:
command: "console.log('Starting form automation')"
console_command_cremotemcp:
command: "document.querySelectorAll('input').length"
# Step 4: Try to interact with form
web_interact_cremotemcp:
action: "fill"
selector: "input[name='email']"
value: "test@example.com"
# Step 5: Check for any console errors after interaction
console_logs_cremotemcp:
clear: false
# Step 6: Debug element selection
console_command_cremotemcp:
command: "document.querySelector('input[name=\"email\"]') ? 'Found' : 'Not found'"
# Step 7: Check element properties
console_command_cremotemcp:
command: "document.querySelector('input[name=\"email\"]').value"
```
## Integration Notes
- Tools use the `_cremotemcp` suffix to avoid naming conflicts