🔧 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>
|
</Card>
|
||||||
</CardGrid>
|
</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
|
## 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.
|
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>
|
</Card>
|
||||||
</CardGrid>
|
</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**
|
### **Performance Optimization Techniques**
|
||||||
|
|
||||||
<Tabs>
|
<Tabs>
|
||||||
|
|||||||
@ -227,6 +227,55 @@ await connectedAI.generateReport('quarterly-analysis.md');
|
|||||||
await connectedAI.optimizeWorkflow(['prioritize', 'organize', 'automate']);
|
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">
|
<Aside type="note" title="Why MCP Changes Everything">
|
||||||
**Before MCP**: AI was a conversation partner that could only work with information you manually provided.
|
**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