diff --git a/docs/docs.json b/docs/docs.json
index 1e783f7ee22..34d6de9fe58 100644
--- a/docs/docs.json
+++ b/docs/docs.json
@@ -264,7 +264,8 @@
"guides/sanity-mcp-continue-cookbook",
"guides/snyk-mcp-continue-cookbook",
"guides/dlt-mcp-continue-cookbook",
- "guides/netlify-mcp-continuous-deployment"
+ "guides/netlify-mcp-continuous-deployment",
+ "guides/chrome-devtools-mcp-performance"
]
}
]
diff --git a/docs/guides/chrome-devtools-mcp-performance.mdx b/docs/guides/chrome-devtools-mcp-performance.mdx
new file mode 100644
index 00000000000..02a24edd37f
--- /dev/null
+++ b/docs/guides/chrome-devtools-mcp-performance.mdx
@@ -0,0 +1,798 @@
+---
+title: "Chrome DevTools Performance Optimization Cookbook"
+description: "Measure and optimize web performance with Chrome DevTools MCP, automated performance traces, and Core Web Vitals monitoring using Continue."
+sidebarTitle: "Chrome DevTools MCP for Performance"
+---
+
+
+ Use AI to automatically trace performance, analyze Core Web Vitals, diagnose bottlenecks, and get actionable optimization suggestions directly from Chrome DevTools
+
+
+
+ **Did You Know?** Chrome DevTools MCP brings the full power of browser debugging to your AI workflow:
+ - [Performance Traces](https://developer.chrome.com/docs/devtools/performance) with automated analysis
+ - [Network Request Monitoring](https://developer.chrome.com/docs/devtools/network) for bottleneck detection
+ - [Console Debugging](https://developer.chrome.com/docs/devtools/console) with error pattern recognition
+ - [CPU & Network Throttling](https://developer.chrome.com/docs/devtools/performance/reference#throttling) to simulate real-world conditions
+ - [Performance Insights](https://developer.chrome.com/docs/devtools/performance-insights) with AI-powered analysis
+ - [Screenshot Debugging](https://developer.chrome.com/docs/devtools/device-mode) for visual regression detection
+
+This guide shows you how to leverage these features through natural language with Continue CLI!
+
+
+
+## What You'll Learn
+
+This cookbook teaches you to:
+
+- Run automated [performance traces](https://developer.chrome.com/docs/devtools/performance) to capture runtime metrics
+- Analyze [Core Web Vitals](https://web.dev/vitals/) (LCP, FID, CLS, INP) and performance insights
+- Diagnose performance bottlenecks using network and console analysis
+- Test performance under different network and CPU conditions with [throttling](https://developer.chrome.com/docs/devtools/performance/reference#throttling)
+- Automate visual regression testing with [screenshots](https://developer.chrome.com/docs/devtools/device-mode)
+
+## Prerequisites
+
+- Chrome browser installed
+- Web project with a running development server (or deployed URL)
+- Node.js 20+ installed
+- [Continue CLI](https://docs.continue.dev/guides/cli) (`npm i -g @continuedev/cli`)
+- [Chrome DevTools MCP](https://hub.continue.dev) configured
+
+## Quick Setup
+
+For all options, first:
+
+
+ ```bash
+ npm i -g @continuedev/cli
+ ```
+
+
+
+## Chrome DevTools MCP Workflow Options
+
+
+ Skip the manual setup and use our pre-built Chrome DevTools agent that includes
+ optimized prompts, rules, and the Chrome DevTools MCP for more consistent results.
+
+
+After completing **Quick Setup** above, you have two paths to get started:
+
+
+
+ **Perfect for:** Immediate results with optimized prompts and built-in performance analysis
+
+
+
+ Visit the [Chrome DevTools Continuous Agent](https://hub.continue.dev/continuedev/chrome-dev-continuous) on Continue Hub and click **"Install Agent"** or run:
+
+ ```bash
+ cn --config continuedev/chrome-dev-continuous
+ ```
+
+ This agent includes:
+ - **Optimized prompts** for performance analysis and debugging
+ - **Built-in rules** for consistent formatting and error handling
+ - **[Chrome DevTools MCP](https://hub.continue.dev/google/chrome-devtools-mcp)** for reliable browser automation
+
+
+
+ In the TUI that opens, type:
+ ```
+ Analyze performance of http://localhost:3000 and provide optimization recommendations
+ ```
+
+ That's it! The agent handles Chrome automation automatically.
+
+
+
+
+ **Why Use the Agent?** Results are more consistent and debugging is easier thanks to the Chrome DevTools MCP integration and pre-tested prompts.
+
+
+
+
+
+
+
+ Visit the [Chrome DevTools MCP](https://hub.continue.dev/google/chrome-devtools-mcp) on Continue Hub and add it to your assistant, or add this to your configuration:
+
+ ```yaml
+ name: Chrome DevTools MCP
+ version: 0.0.1
+ schema: v1
+ mcpServers:
+ - name: Chrome DevTools MCP
+ command: npx
+ args:
+ - chrome-devtools-mcp@latest
+ ```
+
+ The MCP will automatically launch Chrome and connect to DevTools when needed.
+
+
+
+ Test the connection:
+
+ **TUI Mode Prompt:**
+ ```
+ Open web.dev and take a screenshot
+ ```
+
+
+
+ Navigate to your project directory:
+
+ **TUI Mode Prompt:**
+ ```
+ Navigate to http://localhost:3000 and record a performance trace. Analyze LCP, FID, and CLS.
+ ```
+
+
+
+
+ **Manual Setup**: While you can configure the MCP manually, the pre-built agent provides optimized prompts and better error handling for performance analysis workflows.
+
+
+
+
+
+ To use the pre-built agent, you need either:
+ - **Continue CLI Pro Plan** with the models add-on, OR
+ - **Your own API keys** added to Continue Hub secrets
+ - **Chrome browser** installed on your system
+ - **Node.js 20+** to run the MCP via npx
+
+ The agent will automatically detect and use your configuration.
+
+
+---
+
+## Performance Measurement Workflows
+
+The Chrome DevTools MCP enables natural language performance analysis. Here are workflows adapted from real-world use cases:
+
+### Quick Performance Checks
+
+
+**TUI Mode Prompt:**
+```
+Verify in the browser that your change works as expected.
+```
+
+
+
+**TUI Mode Prompt:**
+```
+A few images on localhost:8080 are not loading. What's happening?
+```
+
+
+
+**TUI Mode Prompt:**
+```
+Why does submitting the form fail after entering an email address?
+```
+
+
+
+**TUI Mode Prompt:**
+```
+The page on localhost:8080 looks strange and off. Check what's happening there.
+```
+
+
+
+**TUI Mode Prompt:**
+```
+Localhost:8080 is loading slowly. Make it load faster.
+```
+
+
+
+**TUI Mode Prompt:**
+```
+Please check the LCP of web.dev.
+```
+
+
+---
+
+## Performance Analysis Recipes
+
+Now you can use natural language prompts to analyze web performance. The Continue agent automatically calls the appropriate Chrome DevTools MCP tools.
+
+
+ **Where to run these workflows:**
+ - **IDE Extensions**: Use Continue in VS Code, JetBrains, or other supported IDEs
+ - **Terminal (TUI mode)**: Run `cn` to enter interactive mode, then type your prompts
+ - **CLI (headless mode)**: Use `cn -p "your prompt"` for headless commands
+
+ **Test in Plan Mode First**: Before running performance measurements, test your prompts in plan mode (see the [Plan Mode Guide](/guides/plan-mode-guide); press **Shift+Tab** to switch modes). This shows you what the agent will do without executing it.
+
+
+### Step 1: Baseline Performance Trace
+
+Establish your current performance baseline:
+
+**TUI Mode Prompt:**
+```
+Navigate to http://localhost:3000 and record a performance trace with page reload. Analyze the trace and show me the LCP, FID, CLS, and total blocking time.
+```
+
+
+
+
+ Chrome DevTools Performance Panel automatically tracks:
+ - **Core Web Vitals**: LCP, FID, CLS, INP
+ - **Loading Performance**: DOMContentLoaded, Load events, First Paint
+ - **Runtime Performance**: JavaScript execution time, layout shifts, paint events
+ - **Resource Usage**: Memory consumption, CPU utilization
+
+
+
+### Step 2: Analyze Performance Insights
+
+Deep dive into specific performance issues:
+
+**TUI Mode Prompt:**
+```
+Record a performance trace for http://localhost:3000 and analyze all Performance Insights. For each insight found, provide detailed information about:
+- The specific issue (e.g., DocumentLatency, SlowCSS)
+- Root cause analysis
+- Affected resources or code
+- Recommended optimizations
+- Expected impact on Core Web Vitals
+```
+
+
+ **Performance Insights**: Chrome DevTools automatically detects common performance issues like:
+ - **Render Blocking Resources**: CSS and JavaScript that delay first paint
+ - **Layout Shifts**: Elements that move during page load
+ - **Long Tasks**: JavaScript execution blocking the main thread
+ - **Slow Network Requests**: Resources taking too long to load
+ - **Unused CSS/JavaScript**: Dead code increasing bundle size
+
+
+### Step 3: Network Performance Analysis
+
+Identify slow network requests and optimization opportunities:
+
+**TUI Mode Prompt:**
+```
+Navigate to https://my-site.com and:
+1. List all network requests made during page load
+2. Identify the 5 slowest requests and their sizes
+3. Find any requests over 1MB
+4. Detect render-blocking resources
+5. Check for inefficient caching (missing cache headers)
+6. Suggest specific optimizations for each issue found
+```
+
+### Step 4: Throttling Performance Tests
+
+Test performance under real-world network and CPU conditions:
+
+**TUI Mode Prompt:**
+```
+Test my site's performance under different conditions:
+
+1. Navigate to http://localhost:3000
+2. Emulate 4x CPU slowdown and Fast 3G network
+3. Record a performance trace with reload
+4. Analyze LCP and Total Blocking Time
+5. Take a screenshot when page is fully loaded
+
+Then repeat the test with:
+- Slow 3G network + 6x CPU slowdown
+- Offline network (to test service worker)
+
+Compare results and identify which conditions cause the worst performance degradation."
+```
+
+
+ **Available Network Presets**:
+ - No throttling
+ - Fast 3G (1.6 Mbps down, 0.75 Mbps up)
+ - Slow 3G (400 Kbps down, 400 Kbps up)
+ - Offline
+
+ **CPU Throttling**: 4x, 6x, or custom slowdown to simulate low-end devices
+
+
+### Step 5: JavaScript Performance Analysis
+
+Identify expensive JavaScript operations:
+
+**TUI Mode Prompt:**
+```
+Record a performance trace for http://localhost:3000 and:
+1. Identify all long tasks (>50ms) blocking the main thread
+2. Find the specific JavaScript functions causing these tasks
+3. Measure total JavaScript execution time
+4. Detect unused JavaScript being loaded
+5. Show the call stack for the longest task
+6. Recommend code splitting or lazy loading opportunities"
+```
+
+## Automated Performance Monitoring
+
+### Step 6: Core Web Vitals Dashboard
+
+Create automated monitoring for Core Web Vitals:
+
+**TUI Mode Prompt:**
+```
+Create a performance monitoring script that:
+1. Opens my site at http://localhost:3000
+2. Records a performance trace with reload
+3. Extracts Core Web Vitals (LCP, FID, CLS, INP)
+4. Checks console for JavaScript errors
+5. Takes a screenshot
+6. Saves results to performance-report.json with format:
+ {
+ 'timestamp': 'ISO date',
+ 'lcp': number,
+ 'fid': number,
+ 'cls': number,
+ 'inp': number,
+ 'errors': array,
+ 'screenshot': 'path'
+ }
+
+Save this as scripts/performance-monitor.js that I can run regularly"
+```
+
+### Step 7: Visual Regression Detection
+
+Detect unintended visual changes:
+
+**TUI Mode Prompt:**
+```
+Set up visual regression testing:
+1. Navigate to http://localhost:3000
+2. Take full-page screenshots at:
+ - Desktop viewport (1920x1080)
+ - Tablet viewport (768x1024)
+ - Mobile viewport (375x667)
+3. Save screenshots to screenshots/baseline/
+4. Create a script to compare future screenshots against baseline
+5. Highlight any pixel differences over 5%
+6. Generate a visual diff report"
+```
+
+### Step 8: Performance Budget Enforcement
+
+Set and enforce performance budgets:
+
+**TUI Mode Prompt:**
+```
+Create a performance budget checker that:
+
+Requirements:
+- LCP must be < 2.5 seconds
+- FID must be < 100ms
+- CLS must be < 0.1
+- Total JavaScript < 300KB
+- Total page size < 1MB
+- No console errors
+
+Implementation:
+1. Navigate to http://localhost:3000
+2. Record performance trace with reload
+3. List all network requests and calculate total sizes
+4. Check console messages for errors
+5. Validate all metrics against budgets
+6. Exit with code 1 if any budget is exceeded
+7. Generate a detailed report showing pass/fail for each metric
+
+Save as scripts/performance-budget.js for CI/CD integration"
+```
+
+## Continuous Performance Testing with GitHub Actions
+
+This example demonstrates a **Continuous AI workflow** where performance validation runs automatically in your CI/CD pipeline using Chrome DevTools MCP in headless mode.
+
+### Add GitHub Secrets
+
+Navigate to **Repository Settings → Secrets and variables → Actions** and add:
+
+- `CONTINUE_API_KEY`: Your Continue API key from [hub.continue.dev/settings/api-keys](https://hub.continue.dev/settings/api-keys)
+
+### Create Workflow File
+
+This workflow automatically validates web performance on pull requests using the Continue CLI in headless mode. It records performance traces, extracts Core Web Vitals, and posts a summary report as a PR comment.
+
+Create `.github/workflows/performance-check.yml` in your repository:
+
+```yaml
+name: Performance Check
+
+on:
+ pull_request:
+
+jobs:
+ performance:
+ runs-on: ubuntu-latest
+ steps:
+ - uses: actions/checkout@v4
+ - uses: actions/setup-node@v4
+ with:
+ node-version: "20"
+
+ - name: Install Dependencies
+ run: |
+ npm install -g @continuedev/cli
+ npm ci
+
+ - name: Build Project
+ run: npm run build
+
+ - name: Start Dev Server
+ run: |
+ npm run dev &
+ npx wait-on http://localhost:3000
+
+ - name: Run Performance Tests
+ env:
+ CONTINUE_API_KEY: ${{ secrets.CONTINUE_API_KEY }}
+ run: |
+ cn --config continuedev/chrome-dev-continuous \
+ -p "Navigate to http://localhost:3000 and:
+ 1. Record performance trace with reload
+ 2. Extract LCP, FID, CLS values
+ 3. List network requests and calculate total bundle size
+ 4. Output results as JSON to performance.json" \
+ --auto
+
+ - name: Check Performance Budgets
+ run: |
+ node << 'EOF'
+ const fs = require('fs');
+ const perf = JSON.parse(fs.readFileSync('performance.json'));
+
+ const budgets = {
+ lcp: 2.5,
+ fid: 100,
+ cls: 0.1,
+ bundleSize: 300000
+ };
+
+ let failed = false;
+ const results = [];
+
+ if (perf.lcp > budgets.lcp) {
+ results.push(`❌ LCP: ${perf.lcp}s (budget: ${budgets.lcp}s)`);
+ failed = true;
+ } else {
+ results.push(`✅ LCP: ${perf.lcp}s`);
+ }
+
+ if (perf.fid > budgets.fid) {
+ results.push(`❌ FID: ${perf.fid}ms (budget: ${budgets.fid}ms)`);
+ failed = true;
+ } else {
+ results.push(`✅ FID: ${perf.fid}ms`);
+ }
+
+ if (perf.cls > budgets.cls) {
+ results.push(`❌ CLS: ${perf.cls} (budget: ${budgets.cls})`);
+ failed = true;
+ } else {
+ results.push(`✅ CLS: ${perf.cls}`);
+ }
+
+ if (perf.bundleSize > budgets.bundleSize) {
+ results.push(`❌ Bundle: ${perf.bundleSize}KB (budget: ${budgets.bundleSize}KB)`);
+ failed = true;
+ } else {
+ results.push(`✅ Bundle: ${perf.bundleSize}KB`);
+ }
+
+ console.log(results.join('\n'));
+
+ if (failed) {
+ process.exit(1);
+ }
+ EOF
+
+ - name: Comment Performance Results
+ if: always()
+ uses: actions/github-script@v7
+ with:
+ script: |
+ const fs = require('fs');
+ const perf = JSON.parse(fs.readFileSync('performance.json'));
+
+ const comment = `## 📊 Performance Report
+
+ | Metric | Value | Budget | Status |
+ |--------|-------|--------|--------|
+ | LCP | ${perf.lcp}s | 2.5s | ${perf.lcp <= 2.5 ? '✅' : '❌'} |
+ | FID | ${perf.fid}ms | 100ms | ${perf.fid <= 100 ? '✅' : '❌'} |
+ | CLS | ${perf.cls} | 0.1 | ${perf.cls <= 0.1 ? '✅' : '❌'} |
+ | Bundle Size | ${perf.bundleSize}KB | 300KB | ${perf.bundleSize <= 300 ? '✅' : '❌'} |
+
+ ${perf.lcp > 2.5 || perf.fid > 100 || perf.cls > 0.1 || perf.bundleSize > 300
+ ? '⚠️ **Performance budgets exceeded. Please optimize before merging.**'
+ : '✅ **All performance budgets met!**'}`;
+
+ github.rest.issues.createComment({
+ issue_number: context.issue.number,
+ owner: context.repo.owner,
+ repo: context.repo.repo,
+ body: comment
+ });
+```
+
+
+ The Chrome DevTools MCP works in headless Chrome environments. Make sure your CI environment has Chrome installed (it's pre-installed on GitHub Actions ubuntu-latest runners).
+
+
+## Advanced Performance Workflows
+
+### Step 9: Competitor Comparison
+
+Compare your site's performance with competitors:
+
+**TUI Mode Prompt:**
+```
+Compare performance between my site and competitors:
+
+Sites to test:
+- http://localhost:3000 (my site)
+- https://competitor1.com
+- https://competitor2.com
+
+For each site:
+1. Navigate to homepage
+2. Record performance trace with reload
+3. Extract LCP, FID, CLS, Total Blocking Time
+4. List network requests and calculate total page size
+5. Count JavaScript and CSS files
+
+Create a comparison table showing:
+- Site name
+- All Core Web Vitals
+- Total page size
+- Number of requests
+- Which site performs best for each metric
+
+Provide specific recommendations for how my site can improve based on what competitors do better."
+```
+
+### Step 10: Performance Testing Across Routes
+
+Test performance consistency across your entire site:
+
+**TUI Mode Prompt:**
+```
+Test performance across all major routes:
+
+Routes to test:
+- / (homepage)
+- /products
+- /products/[id] (pick a sample product)
+- /checkout
+- /blog
+
+For each route:
+1. Navigate to the URL
+2. Record performance trace
+3. Extract LCP, Total Blocking Time, bundle size
+4. Check console for errors
+5. Take a screenshot
+
+Generate a report showing:
+- Which routes have the worst LCP
+- Routes with the most JavaScript errors
+- Bundle size variations across routes
+- Recommendations for route-specific optimizations"
+```
+
+### Step 11: Mobile Performance Analysis
+
+Focus on mobile-specific performance issues:
+
+**TUI Mode Prompt:**
+```
+Analyze mobile performance for http://localhost:3000:
+
+1. Resize viewport to mobile (375x667)
+2. Emulate Slow 3G network + 4x CPU slowdown
+3. Record performance trace with reload
+4. Analyze Performance Insights for mobile-specific issues
+5. Check for:
+ - Touch target sizes too small
+ - Horizontal scrolling issues
+ - Oversized images not optimized for mobile
+ - Excessive JavaScript on mobile
+6. Take mobile screenshot
+7. Provide mobile-specific optimization recommendations"
+```
+
+## Performance Troubleshooting
+
+### Debug Performance Regressions
+
+Quickly identify what caused a performance regression:
+
+**TUI Mode Prompt:**
+```
+Debug performance regression on http://localhost:3000:
+
+1. Record performance trace
+2. Analyze all Performance Insights
+3. List console errors and warnings
+4. Check network requests for:
+ - Failed requests
+ - Slow requests (>1s)
+ - Large requests (>500KB)
+5. Identify the top 3 performance bottlenecks
+6. For each bottleneck, suggest:
+ - Root cause
+ - Specific code or resource causing it
+ - Step-by-step fix
+ - Expected performance improvement"
+```
+
+### Performance Issue Quick Reference
+
+| Issue | Quick Fix Command (in cn TUI) |
+| :---- | :---------------------------- |
+| Slow LCP | `"Find render-blocking resources and suggest preloading or deferring"` |
+| High CLS | `"Detect layout shifts and identify unsized images or dynamic content"` |
+| Long Tasks | `"Find JavaScript tasks over 50ms and suggest code splitting"` |
+| Large Bundles | `"List all JavaScript files, identify largest ones, suggest lazy loading"` |
+| Slow Network | `"Find requests over 500KB and suggest compression or optimization"` |
+| Console Errors | `"List all console errors and suggest fixes"` |
+
+## What You've Built
+
+After completing this guide, you have a complete **AI-powered performance analysis system** that:
+
+- ✅ **Uses natural language** — Simple prompts instead of complex DevTools commands
+- ✅ **Analyzes automatically** — AI interprets performance traces and suggests fixes
+- ✅ **Runs continuously** — Automated validation in CI/CD pipelines
+- ✅ **Ensures quality** — Performance checks prevent regressions from shipping
+
+
+ Your performance workflow now operates at **[Level 2 Continuous AI](https://blog.continue.dev/what-is-continuous-ai-a-developers-guide/)** - AI handles routine performance analysis and debugging with human oversight through review and approval of changes.
+
+
+## Chrome DevTools MCP Capabilities
+
+
+
+
+ **Tools Available**
+ - `performance_start_trace`: Start recording with auto-reload
+ - `performance_stop_trace`: Stop and analyze trace
+ - `performance_analyze_insight`: Deep dive into specific issues
+
+
+
+
+
+ **Tools Available**
+ - `list_network_requests`: See all requests and sizes
+ - `get_network_request`: Inspect specific request details
+ - `emulate_network`: Test under various network conditions
+
+
+
+
+
+ **Tools Available**
+ - `list_console_messages`: Get all console logs and errors
+ - `evaluate_script`: Run JavaScript in page context
+ - Automatic error pattern detection
+
+
+
+
+
+ **Tools Available**
+ - `take_screenshot`: Capture full or partial page
+ - `take_snapshot`: Get accessibility tree snapshot
+ - `resize_page`: Test responsive layouts
+
+
+
+
+## Performance Best Practices
+
+Key metrics to monitor for optimal web performance:
+
+
+
+ - LCP < 2.5s (good)
+ - FID < 100ms (good)
+ - CLS < 0.1 (good)
+ - INP < 200ms (good)
+
+
+
+ - Total page size < 1MB
+ - JavaScript < 300KB
+ - Time to Interactive < 3.8s
+ - First Contentful Paint < 1.8s
+
+
+
+ - No long tasks > 50ms
+ - 60 FPS during interactions
+ - No memory leaks
+ - Efficient event listeners
+
+
+
+## Advanced Testing Scenarios
+
+### A/B Test Performance Impact
+
+**TUI Mode Prompt:**
+```
+Compare performance of two implementations:
+1. Test variant A at http://localhost:3000?variant=A
+2. Test variant B at http://localhost:3000?variant=B
+Run each test 5 times and calculate average LCP, FID, CLS
+Determine which variant has better performance and by how much
+```
+
+### Lighthouse Score Tracking
+
+**TUI Mode Prompt:**
+```
+Create a script that runs daily performance audits:
+1. Navigate to production site
+2. Record performance trace
+3. Calculate Lighthouse-style performance score based on:
+ - FCP (10%)
+ - SI (10%)
+ - LCP (25%)
+ - TTI (10%)
+ - TBT (30%)
+ - CLS (15%)
+4. Track score over time in performance-history.json
+5. Alert if score drops below 90
+```
+
+### Performance Regression Detection
+
+**TUI Mode Prompt:**
+```
+Set up automated regression detection:
+1. Record baseline performance for main branch
+2. Save baseline metrics to baseline-perf.json
+3. On each PR, run performance tests
+4. Compare PR metrics with baseline
+5. Flag regressions over 10% for any metric
+6. Generate visual diff report with screenshots
+```
+
+## Next Steps
+
+1. **Analyze your first site** - Try the baseline performance trace on your current project
+2. **Debug bottlenecks** - Use the network analysis prompt to fix slow requests
+3. **Set up CI pipeline** - Add the GitHub Actions workflow to your repo
+4. **Test throttling** - Measure performance under real-world network conditions
+5. **Monitor trends** - Track Core Web Vitals over time
+
+## Additional Resources
+
+
+
+ Official Chrome DevTools MCP repository
+
+
+ Explore more MCP integrations
+
+
+ Complete Chrome DevTools documentation
+
+
+ Learn about Core Web Vitals
+
+
diff --git a/docs/guides/netlify-mcp-continuous-deployment.mdx b/docs/guides/netlify-mcp-continuous-deployment.mdx
index c852de1de2e..a6e53a6ef14 100644
--- a/docs/guides/netlify-mcp-continuous-deployment.mdx
+++ b/docs/guides/netlify-mcp-continuous-deployment.mdx
@@ -95,7 +95,7 @@ After completing **Quick Setup** above, you have two paths to get started:
- Navigate to your project directory and run:
+ From your project directory, run:
```bash
cn "Analyze my Netlify site's performance and optimize it for better Core Web Vitals."
```
diff --git a/docs/guides/overview.mdx b/docs/guides/overview.mdx
index fb0f486e338..13a8d0534e5 100644
--- a/docs/guides/overview.mdx
+++ b/docs/guides/overview.mdx
@@ -22,6 +22,7 @@ Step-by-step guides for integrating Model Context Protocol (MCP) servers with Co
- [Continue Docs MCP Cookbook](/guides/continue-docs-mcp-cookbook) - Use the Continue Docs MCP to write cookbooks, guides, and documentation with AI-powered workflows
- [PostHog Session Analysis Cookbook](/guides/posthog-github-continuous-ai) - Analyze user behavior data to optimize your codebase with automatic issue creation
- [Netlify Performance Optimization Cookbook](/guides/netlify-mcp-continuous-deployment) - Optimize web performance with A/B testing and automated monitoring using Netlify MCP
+- [Chrome DevTools Performance Cookbook](/guides/chrome-devtools-mcp-performance) - Measure and optimize web performance with automated traces, Core Web Vitals monitoring, and performance budgets
- [Sanity CMS Integration Cookbook](/guides/sanity-mcp-continue-cookbook) - Manage headless CMS content with AI-powered workflows using Sanity MCP
- [Snyk + Continue Hub Agent Cookbook (MCP)](/guides/snyk-mcp-continue-cookbook) - Integrate Snyk MCP via Continue Hub to scan code, deps, IaC, and containers
- [dlt Data Pipelines Cookbook](/guides/dlt-mcp-continue-cookbook) - Build AI-powered data pipelines with dlt MCP for pipeline inspection, schema management, and debugging
diff --git a/docs/guides/posthog-github-continuous-ai.mdx b/docs/guides/posthog-github-continuous-ai.mdx
index b5aac1a1b2a..e4421f7ed69 100644
--- a/docs/guides/posthog-github-continuous-ai.mdx
+++ b/docs/guides/posthog-github-continuous-ai.mdx
@@ -147,7 +147,7 @@ You only need to configure the PostHog MCP credential - it automatically handles
- Navigate to your project directory and run:
+ From your project directory, run:
```bash
cn "Give me my PostHog Session data and create GitHub issues based on the problems."
```
diff --git a/docs/guides/snyk-mcp-continue-cookbook.mdx b/docs/guides/snyk-mcp-continue-cookbook.mdx
index 850b1f212ae..cd45ac71ed8 100644
--- a/docs/guides/snyk-mcp-continue-cookbook.mdx
+++ b/docs/guides/snyk-mcp-continue-cookbook.mdx
@@ -74,7 +74,7 @@ After ensuring you meet the **Prerequisites** above, you have two paths to get s
- Start with a comprehensive security scan:
+ From your project directory, start with a comprehensive security scan:
```bash
# Headless mode
cn -p "Run a complete security scan on this project including code vulnerabilities, dependencies, and any IaC files. Summarize findings by severity." --auto