Update homepage and README to highlight graceful MCP capability enhancement

elsigh · claude · elsigh · commit 92516b408700 · 2025-09-30T06:44:18.000-07:00
Features Highlighted: - Core dev3000 works great standalone - zero dependencies - Gracefully enhances with chrome-devtools and nextjs-dev MCPs when available - Dynamic capability discovery that adapts to MCP updates automatically - Context-aware suggestions based on discovered capabilities - New get_mcp_capabilities() tool for ecosystem inspection Homepage Changes: - Updated hero subtitle to mention graceful MCP enhancement - New "Smart MCP Integration" section with visual cards - Enhanced AI integration step with color-coded MCP types - Dynamic capability discovery callout box README Changes: - Updated tagline to mention graceful enhancement - Comprehensive "AI Integration with Dynamic Enhancement" section - Updated orchestrator section to emphasize dynamic discovery innovation - Enhanced MCP server tools documentation - Added capability inspector tool documentation - Maintained existing functionality documentation Key Messaging: - dev3000 is fully functional on its own - Enhancement is automatic and graceful when specialized MCPs available - Dynamic discovery ensures always-current capability suggestions - Zero manual configuration required 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # dev3000
 
-Captures your web app's complete development timeline - server logs, browser events, console messages, network requests, and automatic screenshots - in a unified, timestamped feed for AI debugging.
+Captures your web app's complete development timeline - server logs, browser events, console messages, network requests, and automatic screenshots - in a unified, timestamped feed for AI debugging. **Gracefully enhances with chrome-devtools and nextjs-dev MCPs when available.**
 
 ## Quick Start
 
@@ -9,20 +9,51 @@ pnpm install -g dev3000
 dev3000
 ```
 
-## AI Integration
+## AI Integration with Dynamic Enhancement
 
-**dev3000 automatically configures MCP connections for supported AI tools!**
+**dev3000 features smart MCP integration that gracefully enhances capabilities when specialized MCPs are available!**
 
-When you run `dev3000`, it automatically detects and configures:
-- **dev3000 MCP** - Core debugging and browser automation tools
-- **chrome-devtools MCP** - Enhanced browser inspection and control
+### 🎯 Core Experience (Always Available)
+When you run `dev3000`, you get:
+- **dev3000 MCP** - Complete debugging and browser automation tools
+- Full log analysis, error detection, interaction replay
+- Comprehensive browser automation and screenshot capture
+
+### ⚡ Enhanced Experience (When Available)
+dev3000 **automatically discovers** and integrates with:
+- **chrome-devtools MCP** - Advanced browser inspection, DOM analysis, performance profiling
+- **nextjs-dev MCP** - Framework-specific build analysis, SSR debugging, hydration troubleshooting
+
+### 🚀 Dynamic Capability Discovery
+- **Real-time detection** of available MCP capabilities via log introspection
+- **Context-aware suggestions** that match your current debugging scenario  
+- **Zero manual configuration** - works out of the box
+- **Intelligent caching** (5min TTL) for optimal performance
+- **Self-updating** - automatically adapts when MCPs add new features
 
 For **Claude Code**, no manual setup is required. Just run `dev3000` and start using AI commands:
 
 ```
 fix my app
 ```
 
+dev3000 will provide comprehensive analysis and, when enhanced MCPs are available, suggest additional capabilities like:
+```
+🔗 AUGMENTED ANALYSIS AVAILABLE
+
+dev3000 provided the core log analysis above. For deeper insights, consider also gathering:
+
+Next.js Framework Analysis:
+• dev3000-nextjs-dev:debug_hydration() - Client-server hydration analysis
+• dev3000-nextjs-dev:analyze_build_process() - Deep build system insights
+
+Browser-Side Analysis:
+• dev3000-chrome-devtools:inspect_element() - Deep DOM inspection
+• dev3000-chrome-devtools:start_performance_profile() - Client-side performance data
+
+💡 Best approach: Use dev3000's log analysis as your foundation, then gather specific additional data as needed for a complete picture.
+```
+
 ![dev3000 CLI](www/public/cli.gif)
 
 ## What it does
@@ -41,23 +72,34 @@ The tool monitors your app in a real browser and captures:
 
 Logs are automatically saved with timestamps in `/var/log/dev3000/` (or temp directory) and rotated to keep the 10 most recent per project. Each instance has its own timestamped log file displayed when starting dev3000.
 
-## dev3000 is The Orchestrator
+## dev3000: Smart Debugging Orchestrator
+
+**dev3000 doesn't just work alone - it's designed to intelligently enhance its capabilities by orchestrating your entire MCP debugging ecosystem!** 🎼
 
-**dev3000 doesn't just work alone - it's designed to be the conductor of your debugging orchestra!** 🎼
+### 🎯 How Smart Integration Works
 
-When other MCP tools like `nextjs-dev` or `chrome-devtools` are available, dev3000 automatically detects them and transforms into an **intelligent debugging orchestrator** that coordinates all your debugging tools together.
+**Core Mode** (dev3000 alone):
+- Complete log analysis, browser automation, error detection, interaction replay
+- All essential debugging functionality available immediately
+- Zero dependencies - works great out of the box
 
-### 🎯 How Orchestration Works
+**Enhanced Mode** (with specialized MCPs):
+- **Dynamic Discovery**: Real-time detection of available MCP capabilities via log introspection
+- **Capability-Aware Suggestions**: Context-sensitive recommendations based on discovered MCP functions  
+- **Augmented Delegation**: Provides comprehensive dev3000 analysis PLUS enhanced MCP suggestions
+- **Self-Updating Intelligence**: Automatically adapts when MCPs add new capabilities - no manual updates required
 
-**Standalone Mode** (no other MCPs detected):
-- dev3000 works exactly as before - full error analysis, interaction replay, browser automation
-- All existing functionality remains intact
+### 🚀 Key Innovation: Dynamic Capability Discovery
 
-**Enhanced Mode** (MCPs detected):
-- **Auto-Discovery**: Automatically finds running `nextjs-dev` and `chrome-devtools` MCPs via process detection and port pinging
-- **Smart Delegation**: Suggests better tools when available ("Use chrome-devtools for detailed browser inspection")
-- **Cross-Correlation**: "Compare dev3000's interaction timestamps with Next.js request logs"
-- **Systematic Workflows**: Creates 3-phase debugging plans across all available tools
+Unlike static integrations that become outdated, dev3000 features **living integration** that:
+
+- **Introspects MCP Logs**: Analyzes Claude's MCP communication logs to discover available functions
+- **Pattern Recognition**: Uses intelligent regex patterns to extract function names and descriptions
+- **Smart Categorization**: Automatically classifies capabilities as "advanced" vs "basic"
+- **Context Matching**: Prioritizes suggestions based on current error patterns
+- **Cache Intelligence**: 5-minute caching for performance with automatic refresh
+
+**Result**: You always get suggestions for the **latest available capabilities** from your MCPs, even when they update with new features you haven't seen yet!
 
 ### 🚀 Integration Benefits
 
@@ -76,7 +118,28 @@ When other MCP tools like `nextjs-dev` or `chrome-devtools` are available, dev30
 - AI-powered error correlation across all layers
 - 90%+ issue resolution rate through systematic workflows
 
-### 📋 New Orchestrator Tools
+### 📋 Smart Integration Tools
+
+**`fix_my_app`** - Enhanced with dynamic capability discovery
+- Provides comprehensive dev3000 log analysis  
+- Automatically suggests relevant enhanced MCP functions based on discovered capabilities
+- Context-aware suggestions that match current error patterns
+- Returns structured data for orchestration when needed
+
+**`get_mcp_capabilities`** - NEW! Inspect your MCP ecosystem
+```bash
+# In Claude Code
+"Show me what MCP capabilities are currently available"
+```
+- Displays all discovered functions from available MCPs
+- Shows capability categories (advanced vs basic)  
+- Reveals cache status and discovery timestamps
+- Perfect for debugging MCP integration issues
+
+**`execute_browser_action`** - Now capability-aware
+- Performs dev3000 browser automation (clicks, navigation, screenshots)
+- Suggests enhanced MCP capabilities when relevant
+- Context-specific recommendations based on the action performed
 
 **`discover_available_mcps`** - Find what MCPs are running
 ```bash
@@ -90,11 +153,6 @@ When other MCP tools like `nextjs-dev` or `chrome-devtools` are available, dev30
 "Create an integrated debugging workflow for my Next.js app"
 ```
 
-**Enhanced `fix_my_app`** - Now integration-aware
-- Automatically suggests relevant MCP functions
-- Provides cross-tool correlation tips
-- Returns structured data for orchestration
-
 ### 🔍 Proactive Discovery
 
 dev3000 can automatically discover other MCPs without manual configuration:
@@ -115,13 +173,17 @@ dev3000 can automatically discover other MCPs without manual configuration:
 
 The MCP server runs at `http://localhost:3684/mcp` and provides these tools:
 
+- `fix_my_app` - **Enhanced!** AI-powered debugging with dynamic MCP capability suggestions
+- `execute_browser_action` - **Enhanced!** Browser automation with context-aware MCP recommendations  
+- `get_mcp_capabilities` - **NEW!** Inspect available MCP ecosystem capabilities in real-time
+- `discover_available_mcps` - Find running MCPs via process detection and port pinging
+- `create_integrated_workflow` - Generate systematic multi-MCP debugging plans
+- `get_shared_cdp_url` - Get CDP WebSocket URL for browser coordination
 - `read_consolidated_logs` - Get recent logs with filtering
 - `search_logs` - Regex search with context  
 - `get_browser_errors` - Extract browser errors by time period
-- `execute_browser_action` - Control the browser (click, navigate, screenshot, evaluate, scroll, type)
-- `fix_my_app` - AI-powered debugging and error resolution
 
-**Automatic Configuration**: Claude Code users get MCP access automatically when running `dev3000`. Other AI tools will be supported in future releases.
+**Automatic Configuration**: Claude Code users get MCP access automatically when running `dev3000`. The dynamic capability discovery works with any MCPs you have configured - no manual setup required!
 
 
 
diff --git a/www/app/page.tsx b/www/app/page.tsx
@@ -89,7 +89,7 @@ export default function HomePage() {
             <p className="text-xl text-muted-foreground mb-10 max-w-2xl mx-auto leading-relaxed">
               <Balancer>
                 Captures server + browser logs, events, and network requests. Takes automatic screenshots and stitches
-                it all into a unified, timestamped feed for AI and you.
+                it all into a unified, timestamped feed for AI debugging. <span className="font-medium text-foreground">Gracefully enhances with chrome-devtools and nextjs-dev MCPs when available.</span>
               </Balancer>
             </p>
             <div className="flex flex-col sm:flex-row gap-4 justify-center items-center mb-16">
@@ -202,20 +202,26 @@ export default function HomePage() {
                   3
                 </div>
                 <div className="flex-1">
-                  <h3 className="font-semibold mb-3 text-lg">AI integration configured automatically</h3>
+                  <h3 className="font-semibold mb-3 text-lg">AI integration with dynamic capability enhancement</h3>
                   <div className="space-y-3">
                     <p className="text-sm text-muted-foreground">
-                      dev3000 automatically configures MCP connections for Claude Code and chrome-devtools browser
-                      automation. No manual setup required!
+                      dev3000 automatically configures MCP connections for Claude Code. When chrome-devtools and nextjs-dev MCPs are also available, dev3000 dynamically discovers their capabilities and suggests enhanced debugging workflows.
                     </p>
                     <div className="flex items-center gap-2 text-sm text-muted-foreground">
                       <div className="w-2 h-2 bg-green-500 rounded-full"></div>
-                      <span>dev3000 MCP configured automatically</span>
+                      <span>Core dev3000 MCP - Always configured</span>
                     </div>
                     <div className="flex items-center gap-2 text-sm text-muted-foreground">
-                      <div className="w-2 h-2 bg-green-500 rounded-full"></div>
-                      <span>chrome-devtools MCP configured automatically</span>
+                      <div className="w-2 h-2 bg-blue-500 rounded-full"></div>
+                      <span>chrome-devtools MCP - Enhances browser automation</span>
+                    </div>
+                    <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                      <div className="w-2 h-2 bg-purple-500 rounded-full"></div>
+                      <span>nextjs-dev MCP - Enhances Next.js debugging</span>
                     </div>
+                    <p className="text-xs text-muted-foreground italic">
+                      💡 Enhanced MCPs are optional - dev3000 works great on its own and gracefully improves when they're available
+                    </p>
                   </div>
                 </div>
               </div>
@@ -244,6 +250,85 @@ export default function HomePage() {
         </div>
       </section>
 
+      {/* MCP Enhancement Section */}
+      <section className="relative py-20 border-b">
+        <div className="container mx-auto px-6">
+          <div className="max-w-2xl mx-auto text-center mb-12">
+            <h2 className="text-3xl font-bold mb-4">Smart MCP Integration</h2>
+            <p className="text-lg text-muted-foreground">
+              Gracefully enhances capabilities when specialized MCPs are available
+            </p>
+          </div>
+
+          <div className="max-w-4xl mx-auto">
+            <div className="grid md:grid-cols-3 gap-6 mb-12">
+              <Card className="bg-card border p-6 text-center">
+                <div className="w-16 h-16 bg-green-100 dark:bg-green-900 rounded-full flex items-center justify-center mx-auto mb-4">
+                  <div className="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center">
+                    <span className="text-white font-bold text-sm">d3k</span>
+                  </div>
+                </div>
+                <h3 className="font-semibold mb-2">Core dev3000</h3>
+                <p className="text-sm text-muted-foreground">
+                  Complete log analysis, browser automation, error detection, and interaction replay - always available
+                </p>
+              </Card>
+
+              <Card className="bg-card border p-6 text-center">
+                <div className="w-16 h-16 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center mx-auto mb-4">
+                  <svg className="w-8 h-8 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"
+                    />
+                  </svg>
+                </div>
+                <h3 className="font-semibold mb-2">+ Chrome DevTools</h3>
+                <p className="text-sm text-muted-foreground">
+                  Adds DOM inspection, performance profiling, network interception, and advanced browser debugging
+                </p>
+              </Card>
+
+              <Card className="bg-card border p-6 text-center">
+                <div className="w-16 h-16 bg-purple-100 dark:bg-purple-900 rounded-full flex items-center justify-center mx-auto mb-4">
+                  <svg className="w-8 h-8 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"
+                    />
+                  </svg>
+                </div>
+                <h3 className="font-semibold mb-2">+ Next.js Dev</h3>
+                <p className="text-sm text-muted-foreground">
+                  Adds build system analysis, SSR/hydration debugging, and Next.js-specific performance optimization
+                </p>
+              </Card>
+            </div>
+
+            <Card className="bg-gradient-to-r from-green-50 to-blue-50 dark:from-green-950 dark:to-blue-950 border-2 border-dashed border-green-300 dark:border-green-700 p-8 text-center">
+              <h3 className="font-bold text-lg mb-4">🎯 Dynamic Capability Discovery</h3>
+              <div className="max-w-2xl mx-auto space-y-3">
+                <p className="text-sm">
+                  dev3000 automatically discovers what MCP capabilities are available and suggests the best tools for each debugging scenario
+                </p>
+                <div className="flex items-center justify-center gap-4 text-xs text-muted-foreground">
+                  <span>• Real-time capability detection</span>
+                  <span>• Context-aware suggestions</span>
+                  <span>• Zero manual configuration</span>
+                </div>
+                <p className="text-sm font-medium">
+                  🚀 Result: Always get the most comprehensive debugging capabilities available in your environment
+                </p>
+              </div>
+            </Card>
+          </div>
+        </div>
+      </section>
+
       {/* Features */}
       <section className="relative py-20 bg-muted/30">
         <div className="container mx-auto px-6">
