40640badad
This commit introduces significant enhancements to the Crawl4AI ecosystem: Chrome Extension - Script Builder (Alpha): - Add recording functionality to capture user interactions (clicks, typing, scrolling) - Implement smart event grouping for cleaner script generation - Support export to both JavaScript and C4A script formats - Add timeline view for visualizing and editing recorded actions - Include wait commands (time-based and element-based) - Add saved flows functionality for reusing automation scripts - Update UI with consistent dark terminal theme (Dank Mono font, green/pink accents) - Release new extension versions: v1.1.0, v1.2.0, v1.2.1 LLM Context Builder Improvements: - Reorganize context files from llmtxt/ to llm.txt/ with better structure - Separate diagram templates from text content (diagrams/ and txt/ subdirectories) - Add comprehensive context files for all major Crawl4AI components - Improve file naming convention for better discoverability Documentation Updates: - Update apps index page to match main documentation theme - Standardize color scheme: "Available" tags use primary color (#50ffff) - Change "Coming Soon" tags to dark gray for better visual hierarchy - Add interactive two-column layout for extension landing page - Include code examples for both Schema Builder and Script Builder features Technical Improvements: - Enhance event capture mechanism with better element selection - Add support for contenteditable elements and complex form interactions - Implement proper scroll event handling for both window and element scrolling - Add meta key support for keyboard shortcuts - Improve selector generation for more reliable element targeting The Script Builder is released as Alpha, acknowledging potential bugs while providing early access to this powerful automation recording feature.
8.3 KiB
🚀 Crawl4AI Interactive Apps
Welcome to the Crawl4AI Apps Hub - your gateway to interactive tools and demos that make web scraping more intuitive and powerful.
<style> .apps-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 2rem; margin: 2rem 0; } .app-card { background: #3f3f44; border: 1px solid #3f3f44; border-radius: 8px; padding: 1.5rem; transition: all 0.3s ease; position: relative; overflow: hidden; } .app-card:hover { transform: translateY(-4px); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); border-color: #50ffff; } .app-card h3 { margin-top: 0; display: flex; align-items: center; gap: 0.5rem; color: #e8e9ed; } .app-status { display: inline-block; padding: 0.25rem 0.75rem; border-radius: 20px; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; margin-bottom: 1rem; } .status-available { background: #50ffff; color: #070708; } .status-beta { background: #f59e0b; color: #070708; } .status-coming-soon { background: #2a2a2a; color: #888; } .app-description { margin: 1rem 0; line-height: 1.6; color: #a3abba; } .app-features { list-style: none; padding: 0; margin: 1rem 0; } .app-features li { padding-left: 1.5rem; position: relative; margin-bottom: 0.5rem; color: #d5cec0; font-size: 0.9rem; } .app-features li:before { content: "▸"; position: absolute; left: 0; color: #50ffff; font-weight: bold; } .app-action { margin-top: 1.5rem; } .app-btn { display: inline-block; padding: 0.75rem 1.5rem; background: #50ffff; color: #070708; text-decoration: none; border-radius: 6px; font-weight: 600; transition: all 0.2s ease; font-family: dm, Monaco, monospace; } .app-btn:hover { background: #09b5a5; transform: scale(1.05); color: #070708; } .app-btn.disabled { background: #2a2a2a; color: #666; cursor: not-allowed; transform: none; } .app-btn.disabled:hover { background: #2a2a2a; transform: none; } .intro-section { background: #3f3f44; border-radius: 8px; padding: 2rem; margin-bottom: 3rem; border: 1px solid #3f3f44; } .intro-section h2 { margin-top: 0; color: #50ffff; } .intro-section p { color: #d5cec0; } </style>🛠️ Interactive Tools for Modern Web Scraping
Our apps are designed to make Crawl4AI more accessible and powerful. Whether you're learning browser automation, designing extraction strategies, or building complex scrapers, these tools provide visual, interactive ways to work with Crawl4AI's features.
🎯 Available Apps
🎨 C4A-Script Interactive Editor
A visual, block-based programming environment for creating browser automation scripts. Perfect for beginners and experts alike!
- Drag-and-drop visual programming
- Real-time JavaScript generation
- Interactive tutorials
- Export to C4A-Script or JavaScript
- Live preview capabilities
🧠 LLM Context Builder
Generate optimized context files for your favorite LLM when working with Crawl4AI. Get focused, relevant documentation based on your needs.
- Modular context generation
- Memory, reasoning & examples perspectives
- Component-based selection
- Vibe coding preset
- Download custom contexts
🕸️ Web Scraping Playground
Test your scraping strategies on real websites with instant feedback. See how different configurations affect your results.
- Live website testing
- Side-by-side result comparison
- Performance metrics
- Export configurations
🔍 Crawl4AI Assistant (Chrome Extension)
Visual schema builder Chrome extension - click on webpage elements to generate extraction schemas and Python code!
- Visual element selection
- Container & field selection modes
- Smart selector generation
- Complete Python code generation
- One-click installation
🧪 Extraction Lab
Experiment with different extraction strategies and see how they perform on your content. Compare LLM vs CSS vs XPath approaches.
- Strategy comparison tools
- Performance benchmarks
- Cost estimation for LLM strategies
- Best practice recommendations
🤖 AI Prompt Designer
Craft and test prompts for LLM-based extraction. See how different prompts affect extraction quality and costs.
- Prompt templates library
- A/B testing interface
- Token usage calculator
- Quality metrics
📊 Crawl Monitor
Real-time monitoring dashboard for your crawling operations. Track performance, debug issues, and optimize your scrapers.
- Real-time crawl statistics
- Error tracking and debugging
- Resource usage monitoring
- Historical analytics
🚀 Why Use These Apps?
🎯 Accelerate Learning
Visual tools help you understand Crawl4AI's concepts faster than reading documentation alone.
💡 Reduce Development Time
Generate working code instantly instead of writing everything from scratch.
🔍 Improve Quality
Test and refine your approach before deploying to production.
🤝 Community Driven
These tools are built based on user feedback. Have an idea? Let us know!
📢 Stay Updated
Want to know when new apps are released?
- ⭐ Star us on GitHub to get notifications
- 🐦 Follow @unclecode for announcements
- 💬 Join our Discord community for early access
!!! tip "Developer Resources" Building your own tools with Crawl4AI? Check out our API Reference and Integration Guide for comprehensive documentation.