add browsermcp y trending data

Author: davila7

cli-tool/components/mcps/browser_automation/browsermcp.json

@@ -0,0 +1,9 @@
+{
+  "mcpServers": {
+    "browsermcp": {
+      "description": "With Browser MCP, you can use MCP to automate your browser so that AI applications can navigate the web, fill out forms, and more.",
+      "command": "npx",
+      "args": ["@browsermcp/mcp@latest"]
+    }
+  }
+}

docs/components.json

@@ -2788,6 +2788,14 @@
       "content": "{\n  \"mcpServers\": {\n    \"browser-server\": {\n      \"description\": \"An MCP server that enables AI agents to control web browsers using browser-use.\",\n      \"command\": \"browser-use-mcp-server\",\n      \"args\": [\n        \"run\",\n        \"server\",\n        \"--port\",\n        \"8000\",\n        \"--stdio\",\n        \"--proxy-port\",\n        \"9000\"\n      ],\n      \"env\": {\n        \"OPENAI_API_KEY\": \"your-api-key\"\n      }\n    }\n  }\n}",
       "description": "An MCP server that enables AI agents to control web browsers using browser-use."
     },
+    {
+      "name": "browsermcp",
+      "path": "browser_automation/browsermcp.json",
+      "category": "browser_automation",
+      "type": "mcp",
+      "content": "{\n  \"mcpServers\": {\n    \"browsermcp\": {\n      \"description\": \"With Browser MCP, you can use MCP to automate your browser so that AI applications can navigate the web, fill out forms, and more.\",\n      \"command\": \"npx\",\n      \"args\": [\"@browsermcp/mcp@latest\"]\n    }\n  }\n}",
+      "description": "With Browser MCP, you can use MCP to automate your browser so that AI applications can navigate the web, fill out forms, and more."
+    },
     {
       "name": "mcp-server-browserbase",
       "path": "browser_automation/mcp-server-browserbase.json",

docs/index.html

@@ -428,6 +428,12 @@ <h3>Claude Conversation Monitor</h3>
                 <div class="footer-right">
                     <p class="footer-copyright">&copy; 2025 Claude Code Templates. Open source project.</p>
                     <div class="footer-links">
+                        <a href="trending.html" class="footer-link">
+                            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+                                <path d="M16,6L18.29,8.29L13.41,13.17L9.41,9.17L2,16.59L3.41,18L9.41,12L13.41,16L19.71,9.71L22,12V6H16Z"/>
+                            </svg>
+                            Trending
+                        </a>
                         <a href="https://docs.aitmpl.com/" target="_blank" class="footer-link">
                             <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                                 <path d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z"/>

docs/js/trending.js

@@ -95,17 +95,23 @@ class TrendingPage {
                         allItems = allItems.concat(categoryItems);
                     }
                 });
-                // Sort by weekly downloads and take top 10
-                allItems.sort((a, b) => (b.downloadsWeek || 0) - (a.downloadsWeek || 0));
-                allItems = allItems.slice(0, 10);
             }
         } else {
             // Get items from selected category
             allItems = this.data.trending[this.currentType] || [];
         }
 
-        // Apply date range filter (for now just return all items)
-        // In the future, this could filter by actual dates
+        // Sort by the current date range downloads (highest to lowest)
+        allItems.sort((a, b) => {
+            const aDownloads = this.getDownloadsForRange(a);
+            const bDownloads = this.getDownloadsForRange(b);
+            return bDownloads - aDownloads;
+        });
+        
+        // For "all" categories, limit to top 10
+        if (this.currentType === '') {
+            allItems = allItems.slice(0, 10);
+        }
 
         return allItems;
     }