mcp features
This commit is contained in:
Josh at WLTechBlog
390
mcp/WORKFLOW_EXAMPLES.md
Normal file
390
mcp/WORKFLOW_EXAMPLES.md
Normal file
@@ -0,0 +1,390 @@
|
||||
# Cremote MCP Tools - Comprehensive Workflow Examples
|
||||
|
||||
This document provides practical workflow examples demonstrating how to use the enhanced cremote MCP tools for common automation tasks.
|
||||
|
||||
## 🎯 Form Automation Workflows
|
||||
|
||||
### 1. Efficient Registration Form Completion
|
||||
|
||||
**Traditional Approach (10+ API calls):**
|
||||
```yaml
|
||||
# Multiple individual interactions
|
||||
web_interact_cremotemcp:
|
||||
action: "fill"
|
||||
selector: "#firstName"
|
||||
value: "John"
|
||||
|
||||
web_interact_cremotemcp:
|
||||
action: "fill"
|
||||
selector: "#lastName"
|
||||
value: "Doe"
|
||||
|
||||
# ... 8 more individual calls
|
||||
```
|
||||
|
||||
**Enhanced Approach (2-3 API calls):**
|
||||
```yaml
|
||||
# 1. Check if form exists and analyze structure
|
||||
web_form_analyze_cremotemcp:
|
||||
selector: "#registration-form"
|
||||
|
||||
# 2. Fill entire form in one call (10x efficiency)
|
||||
web_form_fill_bulk_cremotemcp:
|
||||
form_selector: "#registration-form"
|
||||
fields:
|
||||
firstName: "John"
|
||||
lastName: "Doe"
|
||||
email: "john.doe@example.com"
|
||||
password: "SecurePass123"
|
||||
confirmPassword: "SecurePass123"
|
||||
phone: "+1-555-0123"
|
||||
country: "United States"
|
||||
agreeToTerms: true
|
||||
|
||||
# 3. Submit and verify
|
||||
web_interact_cremotemcp:
|
||||
action: "click"
|
||||
selector: "button[type='submit']"
|
||||
```
|
||||
|
||||
### 2. Multi-Step Form with Validation
|
||||
|
||||
```yaml
|
||||
# 1. Navigate and check page state
|
||||
web_navigate_cremotemcp:
|
||||
url: "https://example.com/multi-step-form"
|
||||
screenshot: true
|
||||
|
||||
# 2. Check if first step is loaded
|
||||
web_element_check_cremotemcp:
|
||||
selector: "#step-1"
|
||||
check_type: "visible"
|
||||
|
||||
# 3. Fill first step
|
||||
web_form_fill_bulk_cremotemcp:
|
||||
form_selector: "#step-1"
|
||||
fields:
|
||||
personalInfo: "John Doe"
|
||||
birthDate: "1990-01-01"
|
||||
|
||||
# 4. Check if next button is enabled
|
||||
web_element_check_cremotemcp:
|
||||
selector: "#next-step-1"
|
||||
check_type: "enabled"
|
||||
|
||||
# 5. Proceed to next step
|
||||
web_interact_cremotemcp:
|
||||
action: "click"
|
||||
selector: "#next-step-1"
|
||||
|
||||
# 6. Wait for step 2 and continue
|
||||
web_element_check_cremotemcp:
|
||||
selector: "#step-2"
|
||||
check_type: "visible"
|
||||
```
|
||||
|
||||
## 📊 Data Extraction Workflows
|
||||
|
||||
### 3. E-commerce Product Analysis
|
||||
|
||||
```yaml
|
||||
# 1. Navigate to product listing
|
||||
web_navigate_cremotemcp:
|
||||
url: "https://shop.example.com/products"
|
||||
screenshot: true
|
||||
|
||||
# 2. Get page performance metrics
|
||||
web_performance_metrics_cremotemcp: {}
|
||||
|
||||
# 3. Extract all product data in one call
|
||||
web_extract_multiple_cremotemcp:
|
||||
selectors:
|
||||
product_titles: ".product-card h3"
|
||||
prices: ".product-card .price"
|
||||
ratings: ".product-card .rating"
|
||||
availability: ".product-card .stock-status"
|
||||
images: ".product-card img"
|
||||
|
||||
# 4. Extract all product links with filtering
|
||||
web_extract_links_cremotemcp:
|
||||
container_selector: ".product-grid"
|
||||
href_pattern: ".*/product/.*"
|
||||
text_pattern: ".*"
|
||||
|
||||
# 5. Extract pricing table if available
|
||||
web_extract_table_cremotemcp:
|
||||
selector: "#pricing-comparison"
|
||||
include_headers: true
|
||||
|
||||
# 6. Check if more products are loading (infinite scroll)
|
||||
web_content_check_cremotemcp:
|
||||
type: "scripts"
|
||||
|
||||
# 7. Take enhanced screenshot with metadata
|
||||
web_screenshot_enhanced_cremotemcp:
|
||||
output: "/tmp/product-analysis.png"
|
||||
full_page: true
|
||||
```
|
||||
|
||||
### 4. Contact Information Extraction
|
||||
|
||||
```yaml
|
||||
# 1. Navigate to contact page
|
||||
web_navigate_cremotemcp:
|
||||
url: "https://company.example.com/contact"
|
||||
|
||||
# 2. Extract contact information with patterns
|
||||
web_extract_text_cremotemcp:
|
||||
selector: ".contact-info"
|
||||
pattern: "\\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\\.[A-Z|a-z]{2,}\\b"
|
||||
extract_type: "textContent"
|
||||
|
||||
# 3. Extract phone numbers
|
||||
web_extract_text_cremotemcp:
|
||||
selector: ".contact-info"
|
||||
pattern: "\\+?1?-?\\(?\\d{3}\\)?-?\\d{3}-?\\d{4}"
|
||||
extract_type: "textContent"
|
||||
|
||||
# 4. Extract all contact-related links
|
||||
web_extract_links_cremotemcp:
|
||||
container_selector: ".contact-section"
|
||||
href_pattern: "(mailto:|tel:).*"
|
||||
|
||||
# 5. Extract office locations from table
|
||||
web_extract_table_cremotemcp:
|
||||
selector: "#office-locations"
|
||||
include_headers: true
|
||||
```
|
||||
|
||||
## 🔍 Page Analysis Workflows
|
||||
|
||||
### 5. Comprehensive Site Health Check
|
||||
|
||||
```yaml
|
||||
# 1. Navigate and get initial state
|
||||
web_navigate_cremotemcp:
|
||||
url: "https://example.com"
|
||||
screenshot: true
|
||||
|
||||
# 2. Get comprehensive page information
|
||||
web_page_info_cremotemcp: {}
|
||||
|
||||
# 3. Get viewport and scroll information
|
||||
web_viewport_info_cremotemcp: {}
|
||||
|
||||
# 4. Get performance metrics
|
||||
web_performance_metrics_cremotemcp: {}
|
||||
|
||||
# 5. Check if all images are loaded
|
||||
web_content_check_cremotemcp:
|
||||
type: "images"
|
||||
|
||||
# 6. Check if all scripts are loaded
|
||||
web_content_check_cremotemcp:
|
||||
type: "scripts"
|
||||
|
||||
# 7. Check for JavaScript errors
|
||||
console_logs_cremotemcp:
|
||||
clear: false
|
||||
|
||||
# 8. Take element-specific screenshots of key areas
|
||||
web_screenshot_element_cremotemcp:
|
||||
selector: "header"
|
||||
output: "/tmp/header-screenshot.png"
|
||||
|
||||
web_screenshot_element_cremotemcp:
|
||||
selector: "main"
|
||||
output: "/tmp/main-content-screenshot.png"
|
||||
|
||||
# 9. Take enhanced full-page screenshot
|
||||
web_screenshot_enhanced_cremotemcp:
|
||||
output: "/tmp/full-page-analysis.png"
|
||||
full_page: true
|
||||
```
|
||||
|
||||
### 6. Form Validation Testing
|
||||
|
||||
```yaml
|
||||
# 1. Navigate to form page
|
||||
web_navigate_cremotemcp:
|
||||
url: "https://example.com/contact-form"
|
||||
|
||||
# 2. Analyze form structure
|
||||
web_form_analyze_cremotemcp:
|
||||
selector: "#contact-form"
|
||||
|
||||
# 3. Test empty form submission
|
||||
web_interact_cremotemcp:
|
||||
action: "click"
|
||||
selector: "button[type='submit']"
|
||||
|
||||
# 4. Check for validation errors
|
||||
web_element_check_cremotemcp:
|
||||
selector: ".error-message"
|
||||
check_type: "visible"
|
||||
|
||||
# 5. Get error message attributes
|
||||
web_element_attributes_cremotemcp:
|
||||
selector: ".error-message"
|
||||
attributes: "textContent,class,style_display"
|
||||
|
||||
# 6. Fill form with invalid data
|
||||
web_form_fill_bulk_cremotemcp:
|
||||
form_selector: "#contact-form"
|
||||
fields:
|
||||
email: "invalid-email"
|
||||
phone: "123"
|
||||
|
||||
# 7. Submit and check validation
|
||||
web_interact_cremotemcp:
|
||||
action: "click"
|
||||
selector: "button[type='submit']"
|
||||
|
||||
# 8. Screenshot validation state
|
||||
web_screenshot_element_cremotemcp:
|
||||
selector: "#contact-form"
|
||||
output: "/tmp/form-validation-errors.png"
|
||||
```
|
||||
|
||||
## 📁 File Management Workflows
|
||||
|
||||
### 7. Bulk File Operations
|
||||
|
||||
```yaml
|
||||
# 1. Upload multiple files for form submission
|
||||
file_operations_bulk_cremotemcp:
|
||||
operation: "upload"
|
||||
files:
|
||||
- local_path: "/local/documents/resume.pdf"
|
||||
container_path: "/tmp/resume.pdf"
|
||||
- local_path: "/local/documents/cover-letter.pdf"
|
||||
container_path: "/tmp/cover-letter.pdf"
|
||||
- local_path: "/local/images/profile.jpg"
|
||||
container_path: "/tmp/profile.jpg"
|
||||
|
||||
# 2. Fill file upload form
|
||||
web_form_fill_bulk_cremotemcp:
|
||||
form_selector: "#application-form"
|
||||
fields:
|
||||
resume: "/tmp/resume.pdf"
|
||||
coverLetter: "/tmp/cover-letter.pdf"
|
||||
photo: "/tmp/profile.jpg"
|
||||
|
||||
# 3. Submit application
|
||||
web_interact_cremotemcp:
|
||||
action: "click"
|
||||
selector: "#submit-application"
|
||||
|
||||
# 4. Download confirmation documents
|
||||
file_operations_bulk_cremotemcp:
|
||||
operation: "download"
|
||||
files:
|
||||
- container_path: "/tmp/application-confirmation.pdf"
|
||||
local_path: "/local/downloads/confirmation.pdf"
|
||||
- container_path: "/tmp/receipt.pdf"
|
||||
local_path: "/local/downloads/receipt.pdf"
|
||||
|
||||
# 5. Clean up temporary files
|
||||
file_management_cremotemcp:
|
||||
operation: "cleanup"
|
||||
pattern: "/tmp/application-*"
|
||||
max_age: "1"
|
||||
```
|
||||
|
||||
## 🎯 Advanced Automation Patterns
|
||||
|
||||
### 8. Conditional Workflow with Error Handling
|
||||
|
||||
```yaml
|
||||
# 1. Navigate with error checking
|
||||
web_navigate_cremotemcp:
|
||||
url: "https://example.com/dynamic-form"
|
||||
screenshot: true
|
||||
|
||||
# 2. Check if login is required
|
||||
web_element_check_cremotemcp:
|
||||
selector: "#login-form"
|
||||
check_type: "exists"
|
||||
|
||||
# 3. Conditional login (if login form exists)
|
||||
# This would be handled by LLM logic based on the check result
|
||||
web_form_fill_bulk_cremotemcp:
|
||||
form_selector: "#login-form"
|
||||
fields:
|
||||
username: "testuser"
|
||||
password: "testpass"
|
||||
|
||||
# 4. Wait for page to load after login
|
||||
web_element_check_cremotemcp:
|
||||
selector: "#main-content"
|
||||
check_type: "visible"
|
||||
|
||||
# 5. Check if target form is now available
|
||||
web_element_check_cremotemcp:
|
||||
selector: "#target-form"
|
||||
check_type: "all"
|
||||
|
||||
# 6. Proceed with main workflow if form is ready
|
||||
web_form_analyze_cremotemcp:
|
||||
selector: "#target-form"
|
||||
```
|
||||
|
||||
### 9. Performance-Optimized Data Collection
|
||||
|
||||
```yaml
|
||||
# 1. Navigate and immediately start performance monitoring
|
||||
web_navigate_cremotemcp:
|
||||
url: "https://data-heavy-site.com"
|
||||
|
||||
# 2. Get initial performance baseline
|
||||
web_performance_metrics_cremotemcp: {}
|
||||
|
||||
# 3. Extract all data in parallel (single call)
|
||||
web_extract_multiple_cremotemcp:
|
||||
selectors:
|
||||
headlines: "h1, h2, h3"
|
||||
content: ".article-content"
|
||||
metadata: ".article-meta"
|
||||
tags: ".tag"
|
||||
authors: ".author"
|
||||
dates: ".publish-date"
|
||||
comments: ".comment-count"
|
||||
shares: ".share-count"
|
||||
|
||||
# 4. Extract all navigation and content links
|
||||
web_extract_links_cremotemcp:
|
||||
container_selector: "main"
|
||||
href_pattern: ".*"
|
||||
|
||||
# 5. Check final performance impact
|
||||
web_performance_metrics_cremotemcp: {}
|
||||
|
||||
# 6. Take comprehensive documentation screenshot
|
||||
web_screenshot_enhanced_cremotemcp:
|
||||
output: "/tmp/data-collection-complete.png"
|
||||
full_page: true
|
||||
```
|
||||
|
||||
## 🚀 Best Practices Summary
|
||||
|
||||
### Efficiency Guidelines
|
||||
1. **Use Batch Operations**: Prefer bulk tools over individual operations
|
||||
2. **Check Before Acting**: Always verify element state before interaction
|
||||
3. **Monitor Performance**: Use performance metrics for optimization
|
||||
4. **Document with Screenshots**: Use enhanced screenshots for debugging
|
||||
|
||||
### Error Prevention
|
||||
1. **Element Checking**: Use `web_element_check_cremotemcp` before interactions
|
||||
2. **Form Analysis**: Use `web_form_analyze_cremotemcp` before filling forms
|
||||
3. **Content Verification**: Use `web_content_check_cremotemcp` for loading states
|
||||
4. **Console Monitoring**: Check `console_logs_cremotemcp` for JavaScript errors
|
||||
|
||||
### Performance Optimization
|
||||
1. **Batch Data Extraction**: Use `web_extract_multiple_cremotemcp` for multiple selectors
|
||||
2. **Bulk Form Filling**: Use `web_form_fill_bulk_cremotemcp` for complete forms
|
||||
3. **Efficient File Operations**: Use `file_operations_bulk_cremotemcp` for multiple files
|
||||
4. **Smart Screenshots**: Use `web_screenshot_element_cremotemcp` for targeted debugging
|
||||
|
||||
---
|
||||
|
||||
**🎉 Production Ready**: These workflows demonstrate the 10x efficiency gains possible with the enhanced cremote MCP tools, optimized for LLM agents and production automation tasks.
|
||||
Reference in New Issue
Block a user