code2mcp
by blas0
USAGE_EXAMPLES.md•11.4 kB
# Usage Examples - code2mcp with Real MCP Servers
Quick examples for using your configured MCP servers through Code Mode.
---
## 🎯 Basic Usage Pattern
All tool calls follow this pattern:
```typescript
const result = await __mcp_call('server-name__tool-name', {
// parameters
});
console.log(result);
```
---
## 📚 Example 1: Web Scraping Comparison
Compare data from the same URL using different scraping methods:
```typescript
// Method 1: Firecrawl (structured extraction)
const firecrawlData = await __mcp_call('firecrawl-mcp__scrape', {
url: 'https://news.ycombinator.com',
schema: {
stories: 'array',
topStory: 'string'
}
});
// Method 2: Playwright (browser-based)
await __mcp_call('playwright__navigate', {
url: 'https://news.ycombinator.com'
});
const playwrightData = await __mcp_call('playwright__get_text', {
selector: '.storylink'
});
// Method 3: Bright Data (proxy network)
const brightData = await __mcp_call('bright-data__scrape', {
url: 'https://news.ycombinator.com',
country: 'US'
});
console.log('Comparison complete:');
console.log('- Firecrawl (structured):', firecrawlData.topStory);
console.log('- Playwright (browser):', playwrightData);
console.log('- Bright Data (proxy):', brightData.success);
```
---
## 🌍 Example 2: Multi-Region Content Check
Check if content is accessible from different regions:
```typescript
const url = 'https://example.com/restricted-content';
// Check from multiple regions using Bright Data
const regions = ['US', 'GB', 'DE', 'JP', 'AU'];
const results = [];
for (const country of regions) {
const result = await __mcp_call('bright-data__scrape', {
url,
country
});
results.push({
country,
accessible: result.success,
statusCode: result.statusCode
});
console.log(`${country}: ${result.success ? '✅' : '❌'}`);
}
// Store results for later analysis
await __mcp_call('context7__store', {
key: `geo-check-${Date.now()}`,
value: { url, results, timestamp: new Date().toISOString() }
});
console.log('Geo-accessibility check complete!');
```
---
## 🤖 Example 3: Automated Browser Testing
Test a web application flow:
```typescript
// 1. Navigate to login page
await __mcp_call('playwright__navigate', {
url: 'https://app.example.com/login'
});
// 2. Fill in credentials
await __mcp_call('playwright__fill', {
selector: '#username',
value: 'testuser'
});
await __mcp_call('playwright__fill', {
selector: '#password',
value: 'testpass'
});
// 3. Click login button
await __mcp_call('playwright__click', {
selector: 'button[type="submit"]'
});
// 4. Wait for dashboard
await __mcp_call('playwright__wait_for_selector', {
selector: '.dashboard'
});
// 5. Take screenshot
await __mcp_call('playwright__screenshot', {
path: 'dashboard.png'
});
// 6. Extract metrics using Chrome DevTools
const performance = await __mcp_call('chrome-devtools__get_metrics', {});
console.log('Login flow test complete');
console.log('Performance:', performance);
```
---
## 📊 Example 4: Data Pipeline
Scrape, process, and store data:
```typescript
// 1. Scrape product listings
const products = await __mcp_call('firecrawl-mcp__crawl', {
url: 'https://shop.example.com/products',
maxDepth: 1,
schema: {
name: 'string',
price: 'number',
inStock: 'boolean'
}
});
console.log(`Found ${products.length} products`);
// 2. Process the data
const processed = products.map(p => ({
...p,
priceFormatted: `$${p.price.toFixed(2)}`,
availability: p.inStock ? 'In Stock' : 'Out of Stock'
}));
// 3. Store in Context7 for persistence
await __mcp_call('context7__store', {
key: 'product-catalog',
value: {
products: processed,
lastUpdated: new Date().toISOString(),
count: processed.length
}
});
// 4. Generate summary
const inStock = processed.filter(p => p.inStock).length;
const avgPrice = processed.reduce((sum, p) => sum + p.price, 0) / processed.length;
console.log('Pipeline complete:');
console.log(`- Total products: ${processed.length}`);
console.log(`- In stock: ${inStock}`);
console.log(`- Average price: $${avgPrice.toFixed(2)}`);
```
---
## 🔍 Example 5: Competitive Analysis
Monitor competitor websites:
```typescript
const competitors = [
'https://competitor1.com',
'https://competitor2.com',
'https://competitor3.com'
];
const analysis = [];
for (const url of competitors) {
console.log(`Analyzing: ${url}`);
// Scrape with Firecrawl
const data = await __mcp_call('firecrawl-mcp__scrape', {
url,
schema: {
title: 'string',
pricing: 'string',
features: 'array'
}
});
// Get page performance via Chrome DevTools
await __mcp_call('chrome-devtools__navigate', { url });
const metrics = await __mcp_call('chrome-devtools__get_metrics', {});
// Take screenshot
await __mcp_call('playwright__navigate', { url });
await __mcp_call('playwright__screenshot', {
path: `competitor-${analysis.length + 1}.png`
});
analysis.push({
url,
data,
performance: metrics,
capturedAt: new Date().toISOString()
});
}
// Store complete analysis
await __mcp_call('context7__store', {
key: `competitor-analysis-${Date.now()}`,
value: analysis
});
console.log('Competitive analysis complete!');
console.log(`Analyzed ${analysis.length} competitors`);
```
---
## 💾 Example 6: Context Management
Use Context7 for state persistence:
```typescript
// Store user session data
await __mcp_call('context7__store', {
key: 'user-session-123',
value: {
userId: '123',
preferences: {
theme: 'dark',
language: 'en',
notifications: true
},
lastActive: new Date().toISOString()
}
});
// Later: Retrieve session
const session = await __mcp_call('context7__retrieve', {
key: 'user-session-123'
});
console.log('User preferences:', session.preferences);
// Update specific field
session.lastActive = new Date().toISOString();
session.preferences.theme = 'light';
await __mcp_call('context7__store', {
key: 'user-session-123',
value: session
});
console.log('Session updated');
```
---
## 🎬 Example 7: Full Workflow - News Aggregator
Complete workflow combining all servers:
```typescript
// 1. Define news sources
const sources = [
'https://news.ycombinator.com',
'https://techcrunch.com',
'https://arstechnica.com'
];
const articles = [];
// 2. Scrape each source
for (const url of sources) {
console.log(`Scraping: ${url}`);
const data = await __mcp_call('firecrawl-mcp__scrape', {
url,
schema: {
headlines: 'array',
topStory: 'string'
}
});
articles.push({
source: url,
content: data,
scrapedAt: new Date().toISOString()
});
}
console.log(`Scraped ${articles.length} sources`);
// 3. Store raw data
await __mcp_call('context7__store', {
key: `news-raw-${Date.now()}`,
value: articles
});
// 4. Process and deduplicate
const allHeadlines = articles.flatMap(a => a.content.headlines || []);
const unique = [...new Set(allHeadlines)];
console.log(`Total headlines: ${allHeadlines.length}`);
console.log(`Unique headlines: ${unique.length}`);
// 5. Take screenshots of top sources for verification
await __mcp_call('playwright__navigate', {
url: sources[0]
});
await __mcp_call('playwright__screenshot', {
path: 'top-source.png'
});
// 6. Check accessibility from different regions
const geoCheck = await __mcp_call('bright-data__scrape', {
url: sources[0],
country: 'GB'
});
// 7. Store processed summary
await __mcp_call('context7__store', {
key: 'news-summary-latest',
value: {
sources: sources.length,
totalHeadlines: allHeadlines.length,
uniqueHeadlines: unique.length,
topStories: unique.slice(0, 5),
geoAccessible: geoCheck.success,
generatedAt: new Date().toISOString()
}
});
console.log('News aggregation complete!');
console.log('Summary stored in Context7');
```
---
## 🚀 Example 8: Performance Monitoring
Monitor website performance:
```typescript
const url = 'https://yoursite.com';
// 1. Connect Chrome DevTools
await __mcp_call('chrome-devtools__connect', { port: 9222 });
// 2. Navigate and collect metrics
await __mcp_call('chrome-devtools__navigate', { url });
const metrics = await __mcp_call('chrome-devtools__get_metrics', {});
// 3. Also test with Playwright
await __mcp_call('playwright__navigate', { url });
const loadTime = await __mcp_call('playwright__evaluate', {
expression: 'window.performance.timing.loadEventEnd - window.performance.timing.navigationStart'
});
// 4. Take screenshot
await __mcp_call('playwright__screenshot', {
path: 'performance-snapshot.png'
});
// 5. Test from different regions
const regions = ['US', 'EU', 'ASIA'];
const regionalPerf = [];
for (const region of regions) {
const start = Date.now();
await __mcp_call('bright-data__scrape', {
url,
country: region === 'US' ? 'US' : region === 'EU' ? 'DE' : 'JP'
});
const duration = Date.now() - start;
regionalPerf.push({ region, duration });
}
// 6. Store performance report
await __mcp_call('context7__store', {
key: `perf-report-${Date.now()}`,
value: {
url,
cdpMetrics: metrics,
loadTime,
regional: regionalPerf,
timestamp: new Date().toISOString()
}
});
console.log('Performance monitoring complete');
console.log('Load time:', loadTime, 'ms');
console.log('Regional performance:', regionalPerf);
```
---
## 💡 Pro Tips
### 1. Error Handling
```typescript
try {
const result = await __mcp_call('firecrawl-mcp__scrape', { url: 'https://example.com' });
console.log('Success:', result);
} catch (error) {
console.error('Failed:', error);
// Fallback to another method
const fallback = await __mcp_call('playwright__navigate', { url: 'https://example.com' });
}
```
### 2. Parallel Execution
```typescript
// Execute multiple calls in parallel
const [data1, data2, data3] = await Promise.all([
__mcp_call('firecrawl-mcp__scrape', { url: 'https://site1.com' }),
__mcp_call('firecrawl-mcp__scrape', { url: 'https://site2.com' }),
__mcp_call('firecrawl-mcp__scrape', { url: 'https://site3.com' })
]);
console.log('All three scraped in parallel!');
```
### 3. Rate Limiting
```typescript
// Simple rate limiting
async function delay(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
const urls = ['url1', 'url2', 'url3'];
for (const url of urls) {
await __mcp_call('firecrawl-mcp__scrape', { url });
await delay(1000); // Wait 1 second between requests
}
```
### 4. Data Aggregation
```typescript
// Collect data from multiple sources
const sources = ['source1', 'source2', 'source3'];
const allData = [];
for (const source of sources) {
const data = await __mcp_call('firecrawl-mcp__scrape', { url: source });
allData.push(...data.items);
}
console.log(`Aggregated ${allData.length} items from ${sources.length} sources`);
```
---
## 📖 Remember
1. **All data stays in the sandbox** - Even if you scrape 100MB of data, it doesn't enter Claude's context!
2. **Only logs are returned** - Keep your console.log() concise
3. **Combine tools** - Each server has unique strengths, use them together
4. **Store important data** - Use Context7 for persistence
5. **Handle errors gracefully** - Network requests can fail
---
**Happy coding with Code Mode!** 🚀
For more details on each server's capabilities, see [CONFIGURED_SERVERS.md](CONFIGURED_SERVERS.md)
Latest Blog Posts
- MCP Moves to the Linux Foundation: Neutral Stewardship for Agentic InfrastructureBy Om-Shree-0709 on .mcpanthropicLinux Foundation
MCP directory API
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/blas0/code2mcp'
If you have feedback or need assistance with the MCP directory API, please join our Discord server