🔧 REAL-WORLD MCP TOOLS: Add Crawl4AI, Desktop Commander, Playwright
ADVANCED GUIDE ENHANCEMENT: ✅ Added three cutting-edge MCP tools to demonstrate real connected AI capabilities 🌐 CRAWL4AI INTEGRATION: ✅ Web intelligence and content analysis capabilities ✅ Market research and competitive intelligence examples ✅ Safe, read-only web access with rate limiting 🎭 PLAYWRIGHT INTEGRATION: ✅ Browser automation and web interaction capabilities ✅ E-commerce monitoring and testing workflows ✅ Medium safety level with action monitoring 🖥️ DESKTOP COMMANDER INTEGRATION: ✅ Full system control and automation capabilities ✅ Development environment setup examples ✅ ⚠️ PROMINENT SAFETY WARNINGS: VM/container only ✅ Clear cautions about power and isolation requirements 📍 STRATEGIC PLACEMENT: ✅ MCP Foundation Workshop: Introduction with capability overview ✅ Design Connected Workflows: Practical workflow examples ✅ Reference Guide: Complete technical specifications REAL-WORLD CONNECTED AI EXAMPLES NOW AVAILABLE! 🚀
This commit is contained in:
Claude AI Guide Project
parent
615dd8b7b9
commit
fd96fcf485
@ -674,6 +674,185 @@ class WorkflowTester {
|
||||
</Card>
|
||||
</CardGrid>
|
||||
|
||||
---
|
||||
|
||||
## Real-World MCP Tool Integration
|
||||
|
||||
### **Practical Connected AI Examples**
|
||||
|
||||
<Tabs>
|
||||
<TabItem label="Crawl4AI Research Workflows">
|
||||
**Automated Market Intelligence**
|
||||
|
||||
```javascript
|
||||
// Market research workflow using Crawl4AI
|
||||
async function marketResearchWorkflow(industry, competitors) {
|
||||
const research = [];
|
||||
|
||||
// Crawl competitor websites for analysis
|
||||
for (const competitor of competitors) {
|
||||
const crawlResult = await crawl4ai.md(`https://${competitor}.com`);
|
||||
const analysis = await ai.analyzeCompetitor({
|
||||
company: competitor,
|
||||
content: crawlResult.content,
|
||||
focus: ['pricing', 'features', 'positioning']
|
||||
});
|
||||
research.push(analysis);
|
||||
}
|
||||
|
||||
// Gather industry news and trends
|
||||
const industryNews = await crawl4ai.crawl(`https://news.google.com/search?q=${industry}`);
|
||||
const trendAnalysis = await ai.analyzeTrends(industryNews.content);
|
||||
|
||||
// Synthesize comprehensive market report
|
||||
const marketReport = await ai.synthesizeReport({
|
||||
competitorAnalysis: research,
|
||||
industryTrends: trendAnalysis,
|
||||
recommendations: await ai.generateRecommendations(research, trendAnalysis)
|
||||
});
|
||||
|
||||
return marketReport;
|
||||
}
|
||||
```
|
||||
|
||||
**Use Cases**: Competitive intelligence, market research, content discovery, lead generation
|
||||
</TabItem>
|
||||
|
||||
<TabItem label="Playwright Automation Workflows">
|
||||
**Web Application Testing and Data Collection**
|
||||
|
||||
```javascript
|
||||
// E-commerce monitoring workflow using Playwright
|
||||
async function ecommerceMonitoringWorkflow(products) {
|
||||
const monitoringResults = [];
|
||||
|
||||
for (const product of products) {
|
||||
// Navigate to product page
|
||||
await playwright.navigate(product.url);
|
||||
|
||||
// Take visual snapshot for comparison
|
||||
const snapshot = await playwright.takeScreenshot();
|
||||
|
||||
// Extract current pricing and availability
|
||||
const productData = await playwright.extractData({
|
||||
price: '.price-current',
|
||||
availability: '.stock-status',
|
||||
reviews: '.review-count'
|
||||
});
|
||||
|
||||
// Check for changes
|
||||
const changes = await ai.compareWithHistory({
|
||||
current: productData,
|
||||
previous: product.lastSnapshot,
|
||||
thresholds: product.alertThresholds
|
||||
});
|
||||
|
||||
if (changes.significant) {
|
||||
await ai.sendAlert({
|
||||
product: product.name,
|
||||
changes: changes,
|
||||
screenshot: snapshot
|
||||
});
|
||||
}
|
||||
|
||||
monitoringResults.push({
|
||||
product: product.name,
|
||||
data: productData,
|
||||
changes: changes,
|
||||
timestamp: Date.now()
|
||||
});
|
||||
}
|
||||
|
||||
return monitoringResults;
|
||||
}
|
||||
```
|
||||
|
||||
**Use Cases**: Price monitoring, web testing, form automation, data extraction
|
||||
</TabItem>
|
||||
|
||||
<TabItem label="Desktop Commander Workflows">
|
||||
**⚠️ SYSTEM AUTOMATION (USE WITH EXTREME CAUTION)**
|
||||
|
||||
```javascript
|
||||
// Development environment setup workflow (VM/Container ONLY)
|
||||
async function devEnvironmentSetup(projectSpec) {
|
||||
// ⚠️ SAFETY: Only run in isolated environment
|
||||
if (!isIsolatedEnvironment()) {
|
||||
throw new Error('Desktop Commander requires isolated environment!');
|
||||
}
|
||||
|
||||
const setupLog = [];
|
||||
|
||||
// Create project directory structure
|
||||
const projectPath = `/workspace/${projectSpec.name}`;
|
||||
await desktopCommander.createDirectory(projectPath);
|
||||
|
||||
// Install required dependencies
|
||||
const dependencies = projectSpec.dependencies;
|
||||
for (const dep of dependencies) {
|
||||
const installResult = await desktopCommander.executeCommand(
|
||||
`npm install ${dep}`,
|
||||
{ timeout: 300000 }
|
||||
);
|
||||
setupLog.push(`Installed ${dep}: ${installResult.success}`);
|
||||
}
|
||||
|
||||
// Generate project files from templates
|
||||
const files = await ai.generateProjectFiles(projectSpec);
|
||||
for (const [filename, content] of Object.entries(files)) {
|
||||
await desktopCommander.writeFile(`${projectPath}/${filename}`, content);
|
||||
setupLog.push(`Created ${filename}`);
|
||||
}
|
||||
|
||||
// Run initial tests and setup validation
|
||||
const testResult = await desktopCommander.executeCommand(
|
||||
`cd ${projectPath} && npm test`,
|
||||
{ timeout: 180000 }
|
||||
);
|
||||
|
||||
return {
|
||||
projectPath: projectPath,
|
||||
setupLog: setupLog,
|
||||
testResults: testResult,
|
||||
status: testResult.success ? 'ready' : 'needs-attention'
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
**⚠️ CRITICAL SAFETY WARNINGS**:
|
||||
- **ONLY use in VM or container environments**
|
||||
- **NEVER run on production systems**
|
||||
- **Always backup systems before use**
|
||||
- **Monitor all command execution**
|
||||
|
||||
**Use Cases** (in safe environments): Development automation, system administration, file management, process control
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
|
||||
### **MCP Tool Selection Guide**
|
||||
|
||||
<CardGrid>
|
||||
<Card title="🌐 When to Use Crawl4AI" icon="globe">
|
||||
**Best For**: Web research, content analysis, competitive intelligence, data gathering
|
||||
|
||||
**Safety**: High - read-only web access with rate limiting
|
||||
</Card>
|
||||
|
||||
<Card title="🎭 When to Use Playwright" icon="browser">
|
||||
**Best For**: Web automation, testing, form filling, dynamic content extraction
|
||||
|
||||
**Safety**: Medium - can interact with web applications, monitor actions
|
||||
</Card>
|
||||
|
||||
<Card title="🖥️ When to Use Desktop Commander" icon="terminal">
|
||||
**Best For**: System automation, development workflows, file management
|
||||
|
||||
**Safety**: ⚠️ EXTREME CAUTION - requires isolated environment
|
||||
</Card>
|
||||
</CardGrid>
|
||||
|
||||
---
|
||||
|
||||
## Your Next Steps
|
||||
|
||||
Connected AI workflow design is both **technical skill and strategic capability**. The patterns you learn here will enable you to transform any repetitive, complex, or expertise-dependent process into an AI-augmented workflow.
|
||||
|
||||
@ -227,6 +227,162 @@ import { Aside, CardGrid, Card, Tabs, TabItem, Steps, LinkCard, Badge } from '@a
|
||||
</Card>
|
||||
</CardGrid>
|
||||
|
||||
### **Production MCP Servers**
|
||||
|
||||
<Tabs>
|
||||
<TabItem label="Crawl4AI Server">
|
||||
**Web Intelligence and Content Analysis**
|
||||
|
||||
```javascript
|
||||
// Crawl4AI MCP integration
|
||||
const crawl4aiServer = {
|
||||
capabilities: [
|
||||
'website-crawling',
|
||||
'content-extraction',
|
||||
'page-analysis',
|
||||
'data-gathering',
|
||||
'pdf-generation',
|
||||
'screenshot-capture'
|
||||
],
|
||||
|
||||
// Example usage patterns
|
||||
webIntelligence: {
|
||||
crawlSite: async (url) => await crawl4ai.crawl(url),
|
||||
extractContent: async (url) => await crawl4ai.md(url),
|
||||
analyzePage: async (url) => await crawl4ai.html(url),
|
||||
captureScreenshot: async (url) => await crawl4ai.screenshot(url)
|
||||
},
|
||||
|
||||
// Security and safety
|
||||
safety: {
|
||||
level: 'high',
|
||||
risks: 'minimal - read-only web access',
|
||||
restrictions: 'rate-limited, respects robots.txt'
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
**Perfect For**:
|
||||
- **Market Research**: Automated competitor analysis and market intelligence
|
||||
- **Content Discovery**: Finding and analyzing relevant content across the web
|
||||
- **Data Gathering**: Systematic collection of information from multiple sources
|
||||
- **Research Automation**: AI-driven web research with content synthesis
|
||||
</TabItem>
|
||||
|
||||
<TabItem label="Playwright Browser">
|
||||
**Browser Automation and Interaction**
|
||||
|
||||
```javascript
|
||||
// Playwright MCP integration
|
||||
const playwrightServer = {
|
||||
capabilities: [
|
||||
'page-navigation',
|
||||
'element-interaction',
|
||||
'form-automation',
|
||||
'visual-verification',
|
||||
'console-access',
|
||||
'network-monitoring'
|
||||
],
|
||||
|
||||
// Example automation patterns
|
||||
browserAutomation: {
|
||||
navigate: async (url) => await playwright.navigate(url),
|
||||
takeSnapshot: async () => await playwright.snapshot(),
|
||||
fillForm: async (formData) => await playwright.type(formData),
|
||||
clickElement: async (selector) => await playwright.click(selector),
|
||||
extractData: async (selectors) => await playwright.extract(selectors)
|
||||
},
|
||||
|
||||
// Advanced capabilities
|
||||
advanced: {
|
||||
networkRequests: async () => await playwright.networkRequests(),
|
||||
consoleMessages: async () => await playwright.consoleMessages(),
|
||||
performanceMetrics: async () => await playwright.performance()
|
||||
},
|
||||
|
||||
// Security considerations
|
||||
safety: {
|
||||
level: 'medium',
|
||||
risks: 'can interact with web applications',
|
||||
precautions: 'use with trusted sites, monitor actions'
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
**Perfect For**:
|
||||
- **Web Testing**: Automated testing of web applications and user flows
|
||||
- **Form Automation**: Intelligent form filling and data submission
|
||||
- **Data Extraction**: Systematic extraction from dynamic web applications
|
||||
- **Workflow Automation**: End-to-end automation of browser-based processes
|
||||
</TabItem>
|
||||
|
||||
<TabItem label="Desktop Commander">
|
||||
**⚠️ POWERFUL SYSTEM CONTROL**
|
||||
|
||||
```javascript
|
||||
// Desktop Commander MCP integration
|
||||
const desktopCommander = {
|
||||
capabilities: [
|
||||
'command-execution',
|
||||
'file-management',
|
||||
'process-control',
|
||||
'system-monitoring',
|
||||
'application-control',
|
||||
'directory-operations'
|
||||
],
|
||||
|
||||
// System operations
|
||||
systemControl: {
|
||||
executeCommand: async (cmd) => await dc.execute(cmd),
|
||||
readFile: async (path) => await dc.readFile(path),
|
||||
writeFile: async (path, content) => await dc.writeFile(path, content),
|
||||
listDirectory: async (path) => await dc.listDirectory(path),
|
||||
searchFiles: async (pattern) => await dc.searchFiles(pattern),
|
||||
monitorProcesses: async () => await dc.listProcesses()
|
||||
},
|
||||
|
||||
// CRITICAL SAFETY WARNINGS
|
||||
safety: {
|
||||
level: 'MAXIMUM CAUTION',
|
||||
risks: 'FULL SYSTEM ACCESS - can modify/delete anything',
|
||||
requirements: 'VM/CONTAINER ISOLATION MANDATORY',
|
||||
restrictions: 'NEVER use on production systems'
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
**⚠️ SAFETY REQUIREMENTS**:
|
||||
- **MANDATORY**: Use only in isolated VM or container environment
|
||||
- **NEVER**: Run on production systems or important workstations
|
||||
- **BACKUP**: Ensure complete system backups before experimentation
|
||||
- **MONITORING**: Log all commands and monitor system state
|
||||
|
||||
**Perfect For** (in safe environments):
|
||||
- **System Administration**: Automated system management and maintenance
|
||||
- **Development Workflows**: Complex build, test, and deployment automation
|
||||
- **File Operations**: Large-scale file organization and management
|
||||
- **Process Automation**: Complete workflow automation across applications
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
|
||||
### **MCP Server Deployment Guide**
|
||||
|
||||
<Steps>
|
||||
|
||||
1. **Environment Setup**
|
||||
Choose appropriate isolation level based on MCP server capabilities and security requirements.
|
||||
|
||||
2. **Installation and Configuration**
|
||||
Install MCP servers with proper authentication, permissions, and safety constraints.
|
||||
|
||||
3. **Testing and Validation**
|
||||
Verify MCP server functionality in controlled environment before production use.
|
||||
|
||||
4. **Monitoring and Maintenance**
|
||||
Implement comprehensive logging, monitoring, and update procedures for ongoing operation.
|
||||
|
||||
</Steps>
|
||||
|
||||
### **Performance Optimization Techniques**
|
||||
|
||||
<Tabs>
|
||||
|
||||
@ -227,6 +227,55 @@ await connectedAI.generateReport('quarterly-analysis.md');
|
||||
await connectedAI.optimizeWorkflow(['prioritize', 'organize', 'automate']);
|
||||
```
|
||||
|
||||
## Real-World MCP Tools
|
||||
|
||||
The workshop uses actual MCP servers that demonstrate the full spectrum of connected AI capabilities:
|
||||
|
||||
<CardGrid stagger>
|
||||
<Card title="🌐 Crawl4AI" icon="globe">
|
||||
**Web Intelligence**: AI that can read websites, analyze content, extract data, and gather real-time information from the internet.
|
||||
|
||||
**Perfect for**: Market research, competitive analysis, content discovery, real-time data gathering
|
||||
</Card>
|
||||
|
||||
<Card title="🖥️ Desktop Commander" icon="terminal">
|
||||
**System Control**: AI that can execute commands, manage files, run applications, and control your entire system.
|
||||
|
||||
**⚠️ POWER WARNING**: Extremely powerful - **use in VM/container only** for safety during learning
|
||||
</Card>
|
||||
|
||||
<Card title="🎭 Playwright" icon="browser">
|
||||
**Browser Automation**: AI that can see web pages, interact with forms, access browser console, and automate web workflows.
|
||||
|
||||
**Perfect for**: Web testing, form automation, data extraction, browser-based workflows
|
||||
</Card>
|
||||
</CardGrid>
|
||||
|
||||
### MCP Server Capabilities Spectrum
|
||||
|
||||
```javascript
|
||||
// Crawl4AI - Web content and intelligence
|
||||
const webAI = {
|
||||
capabilities: ['read-websites', 'extract-content', 'analyze-pages', 'gather-data'],
|
||||
safetyLevel: 'high', // Read-only web access
|
||||
useCase: 'research and intelligence gathering'
|
||||
};
|
||||
|
||||
// Playwright - Browser automation and interaction
|
||||
const browserAI = {
|
||||
capabilities: ['see-pages', 'click-elements', 'fill-forms', 'extract-data'],
|
||||
safetyLevel: 'medium', // Can interact with web applications
|
||||
useCase: 'web automation and testing'
|
||||
};
|
||||
|
||||
// Desktop Commander - Full system control
|
||||
const systemAI = {
|
||||
capabilities: ['execute-commands', 'manage-files', 'run-programs', 'system-control'],
|
||||
safetyLevel: 'CAUTION', // Full system access - requires isolation
|
||||
useCase: 'complete system automation and control'
|
||||
};
|
||||
```
|
||||
|
||||
<Aside type="note" title="Why MCP Changes Everything">
|
||||
**Before MCP**: AI was a conversation partner that could only work with information you manually provided.
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user